Русская Википедия:Адаптивный веб-дизайн
Адаптивный веб-дизайн (Шаблон:Lang-en) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету, и динамически подстраивающийся под заданные размеры окна браузера.
Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств[1].
Понятия
Впервые понятие отзывчивого веб-дизайна (Шаблон:Lang-en от [[Адаптивная архитектура|Шаблон:Lang]]) ввёл Итан Маркотт[2] в одной из своих статей в мае 2010 года[3]. Впоследствии он выпустил книгу под названием «Шаблон:Lang», посвященную данной технологииШаблон:Sfn.
Шаблон:Нп3 предложил расширить понятие Итана Маркотта, чтобы оно покрывало любые подходы, обеспечивающие ясное визуальное восприятие независимо от характеристик экрана и других ограничений пользовательского устройства[4].
С другой стороны, Аарон Густафсон выпустил книгу «Шаблон:Lang»Шаблон:Sfn, которая рассматривает метод «постепенного улучшения» (Шаблон:Lang-en — ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.
В результате среди веб-дизайнеров стали понимать адаптивный дизайн (Шаблон:Lang-en, не путать с Шаблон:Lang-en) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение[5][6].
Предпосылки
Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали:
- увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет;
- популярность мобильных устройств с выходом в интернет и увеличение мобильного интернет-трафика;
- рекомендации поисковых систем Яндекс и Google (отсутствие дублирующих страниц и концентрация ссылочной массы на одном домене).
Основные принципы
- в отзывчивом дизайнеШаблон:Sfn
- применение гибкого макета на основе сетки (Шаблон:Lang-en);
- использование гибких изображений (Шаблон:Lang-en);
- работа с медиа-запросами (Шаблон:Lang-en);
- в дополнение к этому в адаптивном дизайне
- применение постепенного улучшения;
- проектирование для мобильных устройств с самых ранних этапов[7].
- плавное перестраивание блоков в отзывчивом дизайне при изменении размера экрана (например, при повороте планшета)
Сначала мобильные («Шаблон:Lang»)
Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важноеШаблон:Sfn.
В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook: Шаблон:Начало цитаты Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для facebook.com, но, познакомившись с платформой, я быстро убедился, что можно создать версию, которая будет гораздо лучше, чем основной сайт! (Джо Хьюитт) Шаблон:OqШаблон:Конец цитатыТакой подход не является обязательным условием, однако его преимущество в меньшем размере кода, за счёт меньшего количества медиа-запросов и усиленных акцентах в дизайне на малых разрешениях.
См. также
Примечания
Литература
Ссылки
