Адаптивный веб-дизайн
Адаптивный веб-дизайн (англ. Responsive web design, дословно отзывчивый веб-дизайн) — технология создания веб-страниц, удобно просматриваемых с различных устройств, с которых есть возможность выхода в интернет. Адаптивный веб-дизайн опирается на media queries из CSS3.
Содержание |
[править] Цель
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре разрешений.
[править] Предпосылки
Главными причинами возникновения технологии адаптивного веб-дизайна стали:
- увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет;
- популярность мобильных устройств с выходом в интернет и увеличение мобильного интернет-трафика.
[править] Создатели
Впервые понятие адаптивного веб-дизайна ввел Этан Маркотт[1] в одной из своих статей в мае 2010 года[2]. Впоследствии он выпустил книгу под названием Responsive Web Design, посвященную данной технологии[3]
[править] Основные принципы
- использование резинового типа макета[3];
- резиновые изображения;
- использование media queries;
- необходимо думать о мобильных устройствах с самых ранних этапов проектирования[4].
[править] Особенности технической реализации
Адаптивный веб-дизайн подразумевает применение особых техник на многих этапах веб-разработки.
- Проектирование и создание дизайна сайта с учетом работы на всем спектре разрешений: от мобильных устройств до широкоформатных дисплеев.
- Верстка с помощью media queries.
- Программирование как на стороне клиента с помощью javascript для добавления эластичности видеороликам с youtube, так и на стороне сервера для передачи мобильным устройствам изображений меньшего объёма и разрешения.
[править] Известные сайты, созданные по технологии адаптивного веб-дизайна
- Сайт The Boston Globe был модернизирован с использованием технологии адаптивного веб-дизайна в конце 2011 года[5].
- Известный англоязычный сайт для дизайнеров Smashing Magazine стал адаптивным в начале 2012 года[6].
- Сайт французского часа земли WWF[7].
- Сайт университета Ланкастера[8].
- Сайт мобильного браузера Nokia[9].
[править] Примечания
- ↑ Этан Маркотт — персональный сайт (англ.). Проверено 13 января 2012.
- ↑ Статья Responsive Web Design by Ethan Marcotte (англ.). Проверено 13 января 2012.
- ↑ 1 2 Книга Responsive Web Design на сайте издательства A Book Apart (англ.). Проверено 13 января 2012.
- ↑ Сайт группы исследователей мобильных веб-разработок (англ.). Проверено 13 января 2012.
- ↑ Globe unveils new website (англ.). The Boston Globe (30 November 2011). Проверено 13 января 2012.
- ↑ Smashing Magazine (англ.). Проверено 13 января 2012.
- ↑ Earth Hour (фр.). Проверено 13 января 2012.
- ↑ Lancaster University (англ.). Проверено 13 января 2012.
- ↑ Nokia Browser promo website (англ.). Проверено 13 января 2012.
[править] Ссылки
- Первый русскоязычный блог об адаптивном веб-дизайне (рус.). Архивировано из первоисточника 18 мая 2012. Проверено 13 января 2012.
- Галерея сайтов на основе адаптивного веб-дизайна (исп.). Проверено 13 января 2012.
- Как сделать один сайт для всех устройств (Responsive Web Design) (рус.). Архивировано из первоисточника 18 мая 2012.
