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

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

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

ПонятияПравить

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

Jeffrey Zeldman — версия статьи «Зельдман, Джеффри» на английском языке Джеффри Зельдман (англ.) (рус. предложил расширить понятие Итана Маркотта, чтобы оно покрывало любые подходы, обеспечивающие ясное визуальное восприятие независимо от характеристик экрана и других ограничений пользовательского устройства^[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:

Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для 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

ПримечанияПравить

↑ Marcotte, Ethan Responsive web design (англ.). A List Apart (25 мая 2010). Архивировано 24 мая 2013 года.
↑ Main Page (англ.). EthanMarcotte.com. Дата обращения: 13 января 2012. Архивировано 9 сентября 2012 года.
↑ Responsive Web Design by Ethan Marcotte (англ.) (25 мая 2010). Дата обращения: 13 января 2012. Архивировано 9 сентября 2012 года.
↑ Marcotte, 2011.
↑ L. Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means (англ.) (2011-97-96). Дата обращения: 15 октября 2012. Архивировано 22 октября 2012 года.
↑ Gustafson, 2011.
↑ Viljami Salminen, Adaptive vs. Responsive, what’s the difference? (англ.). Дата обращения: 15 октября 2012. Архивировано 20 октября 2012 года.
↑ Jared Ponchot, Responsive & Adaptive Web Design, 2011 (англ.). Дата обращения: 15 октября 2012. Архивировано 1 ноября 2012 года.
↑ Маркотт, 2012, с. 15.
↑ About this site… (англ.). Сайт группы исследователей мобильных веб-разработок. Дата обращения: 13 января 2012. Архивировано 10 февраля 2013 года.
↑ Вроблевски, 2012.

ЛитератураПравить

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.

СсылкиПравить

Main Page (исп.). Media Queries. — Галерея сайтов на основе адаптивного веб-дизайна. Дата обращения: 13 января 2012.
Ryan Boudreaux. What is the difference between responsive vs. adaptive web design? (англ.). Дата обращения: 3 сентября 2014.

[fluid_grid-1] Marcotte, Ethan Responsive web design (англ.). A List Apart (25 мая 2010). Архивировано 24 мая 2013 года.

[2] Main Page (англ.). EthanMarcotte.com. Дата обращения: 13 января 2012. Архивировано 9 сентября 2012 года.

[3] Responsive Web Design by Ethan Marcotte (англ.) (25 мая 2010). Дата обращения: 13 января 2012. Архивировано 9 сентября 2012 года.

[_c18e6a186ca2747c-4] Marcotte, 2011.

[5] L. Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means (англ.) (2011-97-96). Дата обращения: 15 октября 2012. Архивировано 22 октября 2012 года.

[_5a804bde3a0d6677-6] Gustafson, 2011.

[Salminen-7] Viljami Salminen, Adaptive vs. Responsive, what’s the difference? (англ.). Дата обращения: 15 октября 2012. Архивировано 20 октября 2012 года.

[Ponchot-8] Jared Ponchot, Responsive & Adaptive Web Design, 2011 (англ.). Дата обращения: 15 октября 2012. Архивировано 1 ноября 2012 года.

[_a9f9baf1ab888f89-9] Маркотт, 2012, с. 15.

[10] About this site… (англ.). Сайт группы исследователей мобильных веб-разработок. Дата обращения: 13 января 2012. Архивировано 10 февраля 2013 года.

[_4f3f5c8637c6ae38-11] Вроблевски, 2012.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]