Адаптивный веб-дизайн | это... Что такое Адаптивный веб-дизайн? (original) (raw)
Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернет.
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре разрешений[источник не указан 64 дня].
Содержание
- 1 Понятия
- 2 Предпосылки
- 3 Основные принципы
- 4 Известные сайты, созданные по технологии адаптивного веб-дизайна
- 5 Примечания
- 6 Литература
- 7 Ссылки
Понятия
Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввел Итан Маркотт[1] в одной из своих статей в мае 2010 года[2]. Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии[3].
Джеффри Зельдман (англ.)русск. предложил расширить понятие Итана Маркотта, чтобы оно покрывало любые подходы, обеспечивающие ясное визуальное восприятие независимо от характеристик экрана и других ограничений пользовательского устройства[4].
С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement»[5], которая рассматривает метод «постепенного улучшения» англ. progressive enhancement (ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.
В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение[6][7].
Предпосылки
Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали:
- увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет;
- популярность мобильных устройств с выходом в интернет и увеличение мобильного интернет-трафика.
Основные принципы
в отзывчивом дизайне[8]
- применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
- использование гибких изображений (англ. flexible images);
- работа с медиазапросами (англ. media queries);
в дополнение к этому в адаптивном дизайне
- применение постепенного улучшения;
- проектирование для мобильных устройств с самых ранних этапов[9].
Сначала мобильные («Mobile first»)
Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное[10].
В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для 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)
Известные сайты, созданные по технологии адаптивного веб-дизайна
- Сайт The Boston Globe был модернизирован с использованием технологии адаптивного веб-дизайна в конце 2011 года[12].
- Известный англоязычный сайт для дизайнеров Smashing Magazine стал адаптивным в начале 2012 года[13].
- Сайт французского часа земли WWF[14].
- Сайт университета Ланкастера[15].
- Сайт мобильного браузера Nokia[16].
Примечания
- ↑ Итан Маркотт — персональный сайт (англ.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 2012.
- ↑ Статья Responsive Web Design by Ethan Marcotte (англ.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 2012.
- ↑ Marcotte, 2011
- ↑ L. Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means.
- ↑ Gustafson, 2011
- ↑ Viljami Salminen, Adaptive vs. Responsive, what’s the difference?
- ↑ Jared Ponchot, Responsive & Adaptive Web Design, 2011
- ↑ Маркотт, 2012, с. 15
- ↑ Сайт группы исследователей мобильных веб-разработок (англ.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 2012.
- ↑ 1 2 Вроблевски, 2012
- ↑ Joe Hewitt, iPad
- ↑ Globe unveils new website (англ.). The Boston Globe (30 November 2011). Проверено 13 января 2012.
- ↑ Smashing Magazine (англ.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 2012.
- ↑ Earth Hour (фр.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 2012.
- ↑ Lancaster University (англ.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 2012.
- ↑ Nokia Browser promo website (англ.). Архивировано из первоисточника 9 сентября 2012. Проверено 13 января 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
Ссылки
- Галерея сайтов на основе адаптивного веб-дизайна (исп.). Проверено 13 января 2012.1
