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

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

Понятия

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

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

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

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

Предпосылки

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

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

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

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

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

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

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

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

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

В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для 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)

—

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

См. также

• Bootstrap

Примечания

Литература

• Ethan Marcotte. . — A Book Apart, 2011. — 143 с. — ISBN 978-0-9844425-7-7 .
• Итан Маркотт. Отзывчивый веб-дизайн = Responsive Web Design. — М. : Манн, Иванов и Фербер, 2012. — 159 с. — (Актуальные книги для тех, кто создает сайты). — ISBN 978-5-91657-385-5 .
• Люк Вроблевски. Сначала мобильные! = Mobile first. — М. : Манн, Иванов и Фербер, 2012. — 176 с. — ISBN 978-5-91657-388-6 .
• Ben Frain. Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd, 2012. — 324 с. — ISBN 9781849693189 .
• Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. — Easy Readers, 2011. — 144 с. — ISBN 978-0-9835895-0-1 .

Ссылки

• (исп.) . Media Queries . — Галерея сайтов на основе адаптивного веб-дизайна. Дата обращения: 13 января 2012.
• Ryan Boudreaux. (англ.) . Дата обращения: 3 сентября 2014.