Адаптивный веб-дизайн (англ. Responsive web design, дословно отзывчивый веб-дизайн) — технология создания веб-страниц, удобно просматриваемых с различных устройств, с которых есть возможность выхода в интернет. Адаптивный веб-дизайн опирается на media queries из CSS3.

Цель

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

Предпосылки

Главными причинами возникновения технологии адаптивного веб-дизайна стали:

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

Создатели

Впервые понятие адаптивного веб-дизайна ввел Этан Маркотт^[1] в одной из своих статей в мае 2010 года^[2]. Впоследствии он выпустил книгу под названием Responsive Web Design, посвященную данной технологии^[3].

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

• использование резинового типа макета^[3];
• резиновые изображения;
• использование media queries;
• необходимо думать о мобильных устройствах с самых ранних этапов проектирования^[4].

Особенности технической реализации

Адаптивный веб-дизайн подразумевает использование особых приёмов на нескольких этапах веб-разработки.

• Проектирование и создание дизайна сайта с учетом работы на всем спектре разрешений: от мобильных устройств до широкоформатных дисплеев.
• Верстка с помощью media queries.
• Программирование как на стороне клиента с помощью Javascript для добавления эластичности видеороликам с YouTube, так и на стороне сервера для передачи мобильным устройствам изображений меньшего объёма и разрешения.

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

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

В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook:

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

Оригинальный текст  (англ.)  

My goal was initially just to make a mobile companion for the facebook.com mothership, but once I got comfortable with the platform I became convinced it was possible to create a version of Facebook that was actually better than the website! (Joe Hewitt)

— ^[5][6]

Дизайн и вёрстка

С самого начала создаются отдельные макеты сайта для устройств с различными размерами экрана, например, мобильные телефоны, планшеты и настольные мониторы. Полученные макеты передаются соответствующим специалистами для вёрстки^{[источник не указан 17 дней]}.

Адаптирование к устройствам

Используя описания стилей из CSS и сценарии Javascript, браузер автоматически распознаёт размер экрана и тип устройства, на котором воспроизводится веб-сайт, и управляет соответствующим образом его элементами (размером шрифтов, шириной и взаимным расположением блоков, меню, анимацией и т. п.)^{[источник не указан 17 дней]}.

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

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

Примечания