Адаптивный дизайн интернет страниц

Планшеты и смартфоны самых разных видов стремительно расширяют свою аудиторию, и количество просмотров интернет страниц с таких устройств в некоторых странах уже приближается или даже обгоняет стационарные PC и ноутбуки. Для владельцев сайтов становится просто невозможным упускать огромную часть аудитории, которая использует iPad, iPhone, Android устройства и нетбуки. Разрешение экранов таких гаджетов не позволяет комфортно просматривать страницы, созданные для традиционных мониторов, которые имеют большие разрешения. Решением проблемы является «адаптивный дизайн» (responsive design) интернет страниц, благодаря которому на экране любого размера сайт будет выглядеть в соответствии с задумкой дизайнера.

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

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

Концепция адаптивного дизайна, предложенная Этаном Маркоттом, предполагает, что размер изображений не должен быть фиксированным, количество колонок должно меняться, а media queries должны обеспечивать разную верстку для экранов разных размеров. Ниже мы постараемся уточнить технические детали использования этой технологии.

Media queries

Поддержка Media queries появилась в CSS3. Эта технология является расширением для media types, которые поддерживаются в CSS начиная с версии 2.1. Параметры Media queries позволяют определять логические условия для выбора того, какой из наборов стилей CSS применять при данном разрешении экрана.

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

Для управления Media queries используется jQuery плагин или css3-mediaqueries.js, который добавляет поддержку Media queries в браузеры IE 5+, Firefox 1+ и Safari 2.

Со спецификацией Media Queries вы можете ознакомиться на сайте W3C.

Изменяемая сетка

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

Многие дизайнеры пытаются отказаться от использования пиксельных размеров и отдают предпочтение процентам и относительным единицам em. Такая модель проектирования как раз соответствует рассматриваемой концепции. Изменяемая сетка означает в первую очередь применение относительных единиц измерения. Само собой, что полностью отказываться от применения пиксельных размеров не стоит и во многих случаях они просто незаменимы.

Самый лучший пример изменяемой размерной сетки вы можете увидеть на демо странице.

Тянущиеся изображения

С изменением размера экрана часто может потребоваться и изменение размера изображений. Это позволит освободить больше пространства для другой информации на маленьких экранах. Изменение размера изображений возможно с помощью таких HTML атрибутов, как высота  и ширина, или же можно удалить изображение с помощью свойства overflow в CSS (для примера overflow: hidden). Применение этого свойства позволит динамически скрывать элементы при некоторых размерах разрешений. Технически возможно загружать разные изображения с размерами соответствующими каждому из устройств. Таким образом, устройства с маленькими экранами смогут сократить время загрузки страницы и объем загружаемой информации, что может быть важным для многих пользователей.

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

Пример шаблона с адаптивным дизайном вы можете увидеть на странице http://www.templatemonster.com/ru/website-templates-type/37173.html. Перейдя на страницу с живым демо шаблона, вы можете попробовать изменить размер окна вашего браузера и увидеть, как он будет выглядеть на устройствах с разной шириной экрана.