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

Адаптивный веб-дизайн (англ. Adaptive 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)

— 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.

Шаблон:Веб и веб-сайты