Адаптивный веб-дизайн

Адаптивный веб-дизайн — дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернет.

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

Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввел Итан Маркотт в одной из своих статей в мае 2010 года. Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии.

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

С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», которая рассматривает метод «постепенного улучшения» англ. progressive enhancement (ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.

В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение.
Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали:

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

Основные принципы

в отзывчивом дизайне

  • применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
  • использование гибких изображений (англ. flexible images);
  • работа с медиазапросами (англ. media queries);

в дополнение к этому в адаптивном дизайне

  • применение постепенного улучшения;
  • проектирование для мобильных устройств с самых ранних этапов.

Сначала мобильные («Mobile first»)

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

В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook: "Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для facebook.com, но, познакомившись с платформой, я быстро убедился, что можно создать версию, которая будет гораздо лучше, чем основной сайт! (Джо Хьюитт)"

Известные сайты, созданные по технологии адаптивного веб-дизайна

Сайт The Boston Globe был модернизирован с использованием технологии адаптивного веб-дизайна в конце 2011 года.
Известный англоязычный сайт для дизайнеров Smashing Magazine стал адаптивным в начале 2012 года.
Сайт французского часа земли WWF.
Сайт университета Ланкастера.
Сайт мобильного браузера Nokia.