Bdtyk

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

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

Понятия |

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

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

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

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

Предпосылки |

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

• увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет;


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


• рекомендации поисковых систем Яндекс и Google (отсутствие дублирующих страниц и концентрация ссылочной массы на одном домене).

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

в отзывчивом дизайне^[9]

• применение гибкого макета на основе сетки (англ. flexible, grid-based layout);


• использование гибких изображений (англ. flexible images);


• работа с медиа-запросами (англ. media queries);

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

• применение постепенного улучшения;


• проектирование для мобильных устройств с самых ранних этапов^[10].


• плавное перестраивание блоков в отзывчивом дизайне при изменении размера экрана (например, при повороте планшета)

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

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

В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook:
.mw-parser-output .ts-Начало_цитаты-quote{float:none;padding:0.25em 1em;border:thin solid #eaecf0}.mw-parser-output .ts-Начало_цитаты-source{margin:1em 0 0 5%;font-size:105%}.mw-parser-output .ts-Начало_цитаты-quote .ts-oq{margin:0 -1em -0.25em}.mw-parser-output .ts-Начало_цитаты-quote .ts-oq .NavFrame{padding:0}.mw-parser-output .ts-Начало_цитаты-quote .ts-oq .NavHead,.mw-parser-output .ts-Начало_цитаты-quote .ts-oq .NavContent{padding-left:1.052632em;padding-right:1.052632em}

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

.mw-parser-output .ts-oq{overflow:auto;font-style:normal}.mw-parser-output .ts-oq .ref-info{font-size:100%}.mw-parser-output .ts-oq .NavToggle{float:none;position:static;right:auto;text-align:left;margin-left:1em}

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

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)

.mw-parser-output .ts-Конец_цитаты-source{margin:0.357143em 2em 0 0;text-align:right}

— Joe Hewitt, iPad

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

См. также |

• Bootstrap

Примечания |

Литература |

• Ethan Marcotte. Responsive Web Design. — 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.

Ссылки |

• Галерея сайтов на основе адаптивного веб-дизайна (исп.). Проверено 13 января 2012.


• Ryan Boudreaux. What is the difference between responsive vs. adaptive web design? (англ.). Проверено 3 сентября 2014.