Почему следует отдавать предпочтение именно адаптивному веб-дизайну?

Адаптивный веб-дизайн будет регулировать поток содержимого страницы по мере изменения областей просмотра, однако это еще не все. Версия HTML5 предлагает больше функций, чем HTML 4, и ее более значимые семантические элементы лягут в основу нашей разметки. Медиазапросы CSS3 — важная составная часть адаптивного веб-дизайна, а дополнительные CSS3-модули позволят нам достичь невиданных ранее уровней гибкости. Мы уберем фоновую графику и сложные сценарии JavaScript, заменив их легковесными CSS3-градиентами, тенями, версткой, анимацией и трансформациями.

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

Примеры адаптивного веб-дизайна

Для полного тестирования ваших и чужих адаптивных веб-дизайнов сайтов потребуются отдельные системы, настроенные под каждое устройство и размер экрана. Несмотря на то что нет ничего лучше такого способа, основное тестирование может быть проведено простым изменением размеров окна браузера. Дополнением к такой методике станут разнообразные сторонние плагины и браузерные расширения, которые показывают текущие размеры окна браузера или области просмотра в пикселах либо автоматически устанавливают для текущего окна или области просмотра размеры экрана по умолчанию (например, 1024 х 768). Это позволит вам легче разобраться в том, что происходит при изменении экранных областей просмотра.

ПРИВЫКЛИ К ПИКСЕЛАМ? ПРИДЕТСЯ ОТВЫКАТЬ!

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

Инструменты для тестирования веб-страниц в разных областях просмотра

Пользователям Internet Explorer следует позаботиться о том, чтобы у них был инструмент Microsoft Internet Explorer Developer Toolbar. Его можно скачать по следующему URL-адресу: http://www.microsoft.com/download/en/details.aspx? id=18359.

Если вы используете Safari, то рекомендую вам Resize (http://resizeSafari.com/), хотя ResizeMe (http://web. me.com/aaronholla/Safari_Extensions/ResizeMe. html) похож на него и бесплатен.

Если же вы работаете в Firefox, то для этого браузера предназначено расширение Firesizer (Https://addons. mozilla. org/en-US/firefox/addon/firesizer/), а пользователям Chrome следует обратить внимание на решение с метким названием Windows Resizer (Https://chrome. google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh).

Вы не фанат расширений? Есть альтернатива: я написал простую HTML-страницу для отображения текущих значений высоты и ширины области просмотра окна браузера. Используя JavaScript-библиотеку jQuery (http://jquery.com), эта страница извлекает текущие значения высоты и ширины области просмотра и выводит их на экране. Вы можете держать эту страницу открытой на дополнительной вкладке браузера, изменять размеры своего окна, а затем возвращаться на исследуемый сайт, чтобы узнать, как он «поживает». Очень простую страницу, позволяющую узнать размеры вашей текущей области просмотра, вы найдете по следующему URL-адресу: http://benfrain.com/easily-display-the-viewport-size-of-your-Page-for-responsive-designs/.

РАЗМЕРЫ ОБЛАСТИ ПРОСМОТРА ИЛИ РАЗМЕРЫ ЭКРАНА?

Важно понимать, что размеры области просмотра и размеры экрана — это не одно и то же. Область просмотра относится к области содержимого в пределах окна браузера, включая панели инструментов, вкладки и т. д. Иными словами, она относится к области, в которой непосредственно отображается тот или иной сайт. Размеры экрана касаются физической области отображения на устройстве. Имейте в виду, что одни инструменты сообщают размеры, в которых также учтены такие браузерные элементы, как адресная строка, вкладки, окна для ввода поисковых запросов, а другие инструменты так не поступают. На рисунке 1.2 действительные размеры области просмотра отображаются вверху справа (1156 х 921), в то время как плагин Firesizer показывает размеры окна внизу справа (1171 х 1023).

Страница с отображенными размерами области просмотра и окна

Теперь вы вооружены всем необходимым для того, чтобы начать оценивать все достоинства адаптивного веб-дизайна. Откройте свой любимый браузер, запустите инструмент для определения размеров окон и взгляните на страницу http:// thinkvitamin.com/.

Если вы будете смотреть на открывшуюся страницу в области просмотра шириной менее 1060 пикселов, то увидите макет, показанный На рисунке 1.3.

Если же вы взглянете на сайт в области просмотра шире 930 пикселов, но уже 1060 пикселов, то увидите макет, показанный На рисунке 1.4.

Вы заметили, что основная навигация сбоку от логотипа изменилась? Значки справа от основного содержимого оказались расположенными один под другим. Все идеально с точки зрения удобства пользования, и, что самое важное, ничто не выходит за границы экрана. Теперь взгляните, как все выглядит в области просмотра шириной менее 880 пикселов (рисунок 1.5).

Верхний колонтитул остался без изменений, однако обратите внимание, что панель навигации справа стала еще более узкой; значки теперь располагаются так: два вверху и два внизу, в то время как текстовые блоки отрегулированы и текст заливается в них в соответствии с внесенными корректировками.

Страница открыта в области просмотра шириной меньше 1060 пикселов

Страница открыта в области просмотра шириной от 930 до 1060 пикселов

Страница открыта в области просмотра шириной меньше 880 пикселов

Теперь сделайте ширину своей области просмотра меньше чем 600 пикселов, и вы увидите существенные перемены (рисунок 1.6).

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

Область просмотра шириной менее 600 пикселов

Взглянем на другой пример по адресу http://2011.dconstruct. org/. В широкой области просмотра (например, более 1350 пикселов) этот сайт выглядит, как показано На рисунке 1.7.

Обратите особое внимание на сетку с девятью изображениями. Видите, что происходит по мере уменьшения ширины области просмотра (когда она становится меньше 960 пикселов)? Сетка из трех рядов, в каждом из которых содержится по три изображения, превращается в сетку из трех рядов с двумя изображениями в каждом и одного ряда с тремя изображениями, располагающегося в самом низу (рисунок 1.8).

1.7. Сайт dConstruct 2011

При уменьшении размеров области просмотра изображения перестраиваются

Дальнейшее уменьшение ширины области просмотра до менее чем 720 пикселов приведет к тому, что мы столкнемся со следующей «контрольной точкой» в дизайне: ссылки в верхнем колонтитуле теперь включают изображения, которые обеспечивают более удобную целевую область для навигации с использованием сенсорного экрана (рисунок 1.9).

Ссылки сопровождаются изображениями

Если мы еще уменьшим ширину области просмотра, сделав ее менее 480 пикселов, то сетка с изображениями снова изменится и теперь в ней будет ряд с двумя изображениями, затем — с тремя, а потом — с четырьмя. Размеры этих изображений продолжат меняться по мере уменьшения ширины области просмотра где-то до 300 пикселов. В качестве наглядного примера взгляните На рисунке 1.10, где показано, как все это будет выглядеть на экране iPhone.

Сайт dConstruct 2011 на экране смартфона

Онлайн-источники вдохновения

Веб-ресурс, который поможет вам обрести вдохновение, располагается по адресу http://mediaqueri. es. Однако не все сайты, представленные там, обязательно задействуют всю адаптивную методологию отображения содержимого сначала в небольших областях просмотра, а затем прогрессивно улучшая дизайн при отображении на более широких экранах. Тем не менее на этом этапе, пока мы рассматриваем возможности адаптивного веб-дизайна, можно обратиться к множеству замечательных примеров, чтобы почерпнуть из них идеи.

Несмотря на то что обзор этих сайтов с изменением размеров области просмотра наглядно показывает, на что способен адаптивный веб-дизайн, он не позволяет оценить достоинства HTML5. Они остаются за кадром, поэтому обратим на них внимание и посмотрим, чем так замечательна версия HTML5.