1. Введение в технологию создания веб-сайтов

• История возникновения Интернета и Всемирной паутины
• Понятие веб-страницы и веб-сайта
• Унифицированный указатель ресурсов
• Этапы разработки веб-сайта
• Компоновка сайта

1.5. Компоновка сайта

В настоящее время для отображения веб-страниц пользователи Всемирной паутины используют различные экраны, поддерживающие различные видеорежимы, характеризующиеся экранным разрешением и количеством цветов, используемых при отображении информации. Это может быть монитор персонального компьютера, экран ноутбука, смартфона и планшета или телевизор. В зависимости от используемого посетителем сайта экранного разрешения в одном и том же браузере какая-либо веб-страница может отображаться по разному.

Для того чтобы избежать деформации веб-страницы на различных экранах, применяется достаточно простой прием: все компоненты веб-страницы заключаются в соответствующие ячейки невидимой таблицы с фиксированной шириной, при этом каждому объекту назначается одно строго определенное положение. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Следовательно, при изменении параметров экрана не происходит смещения элементов дизайна страницы.

Достоинства этого подхода – простота алгоритма верстки документа. Оптимизировав страницу для отображения с определенным разрешением, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не "поплывут".

Недостатки – при отображении документа на компьютере с высоким экранным разрешением и на широкоформатном экране по краям остается заметное пустое пространство, а на экране малого размера – часть содержимого может не поместиться.

Иной подход, когда ширину невидимой таблицы, содержащей фрагменты веб-страницы, задавать в процентах от текущей ширины экрана либо вообще компоновать дизайн сайта без жесткого табличного "каркаса". При увеличении экранного разрешения таблица "растягивается" по горизонтали, и все размещенные в ее ячейках элементы смещаются. В силу того, что пара-метры веб-страницы изменяются в зависимости от настроек экрана, такой принцип компоновки называют динамическим.

Достоинства этого подхода – документ растягивается по всей ширине экрана, не остается неиспользованного пустого пространства.

Недостатки – сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в разных браузерах.

Следует отметить, что хотя на начальной стадии создания нового сайта использование макета на основе таблицы может оказаться более простым решением в дальнейшем, при обслуживании и добавлении новых данных, возникает много проблем. Поэтому для формирования каркаса сайта лучше использовать возможности каскадных таблицей стилей.

На внешний вид сайта и его функционирование оказывает влияние не только разрешение экрана, но и тип и настройки браузера клиента.

Прогрессивное улучшение – это одна из стратегий, помогающая справиться с неизвестными настройками браузера. При данном подходе разработка сайта начинается с базового варианта, при котором контент и функциональность доступны для загрузки в любом браузере. Далее на него наслаиваются более современные функции для браузеров, которые могут их воспроизвести. В конце можно добавить некоторые красивые, но необязательные эффекты, такие как анимация или скругленные углы рамок, чтобы улучшить опыт взаимодействия с сайтом для пользователей с самыми передовыми браузерами.

При прогрессивном улучшении можно использовать команды CSS для отображения определенных стилей только в последних версиях браузеров. Зная, что браузеры просто игнорируют те свойства и правила, которые не понимают, можно смело использовать инновации, не ухудшая при этом работу старых браузеров. Просто необходимо помнить, что сначала следует прописывать базовые правила стилей, а затем добавлять улучшения, как только будут выполнены минимальные требования.

По умолчанию большинство браузеров на небольших устройствах, таких как смартфоны и планшеты, сжимают веб-страницу до размеров экрана и предоставляют механизмы для масштабирования и перемещения по ней. Хотя технически все работает, это не очень удобно. Текст слишком мелкий, чтобы его прочесть, ссылки настолько малы, что по ним не попасть пальцем, а увеличение масштаба и панорамирование отвлекают.

Адаптивный веб-дизайн – это стратегия по предоставлению пользова-тельских макетов для устройств в зависимости от размера области просмотра (окна браузера). Хитрость адаптивного дизайна в том, что для всех устройств предоставляется один HTML-документ, но применяются разные таблицы стилей в зависимости от размера экрана, чтобы обеспечить наиболее оптимизированный макет для конкретного устройства. Например, при просмотре страницы на смартфоне текст отображается в одной колонке с крупными ссылками для легкого нажатия. Но когда та же самая страница просматривается в браузере на большом настольном компьютере, контент перегруппируется в несколько колонок с традиционными элементами навигации.

Альтернативой одному адаптивному сайту может быть проектирование дополнительного сайта с уникальным URL-адресом, который будет запускаться с сервера в ответ на запрос, приходящий с мобильного устройства. В URL-адресах мобильных сайтов, как правило, указывается префикс m или mobile. Для некоторых типов сайтов отдельная мобильная версия является лучшее решение, особенно если известно, что посетители, заходящие с мобильных устройств, придерживаются иных моделей просмотра сайта, чем пользователи настольных компьютеров.

Дело в том, что адаптивный веб-дизайн не является универсальным решением. Для сайтов, контент которых главным образом текстовый, небольшой настройки макета может быть достаточно для удобного чтения на всех устройствах. Для других сайтов и веб-приложений предпочтительным может оказаться совершенно иной вид.

Недостатком специализированного мобильного сайта является то, что объем работы увеличится более чем в два раза. Потребуется дополнительное планирование контента, проектирование шаблонов, затраты времени на производство и текущее обслуживание. Но если это означает предоставление посетителям функций, которые им действительно нужны, сайт стоит вложений. При этом даже специализированные мобильные сайты применять адаптивные техники для настройки удобства работы с сайтом в зависимости от устройства.