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

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск

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

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

Понятия[править | править вики-текст]

Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввёл Итан Маркотт[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].

Предпосылки[править | править вики-текст]

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

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

Основные принципы[править | править вики-текст]

в отзывчивом дизайне[9]
  • применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
  • использование гибких изображений (англ. flexible images);
  • работа с медиа-запросами (англ. media queries);
в дополнение к этому в адаптивном дизайне
  • применение постепенного улучшения;
  • проектирование для мобильных устройств с самых ранних этапов[10].

Сначала мобильные («Mobile first»)[править | править вики-текст]

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

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

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

[11][12]

Примечания[править | править вики-текст]

Литература[править | править вики-текст]

  • 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

Ссылки[править | править вики-текст]