Адаптивный веб-дизайн () — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету, и динамически подстраивающийся под заданные размеры окна браузера.
Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.
Понятия Впервые понятие отзывчивого веб-дизайна ( от ) ввёл Итан Маркотт в одной из своих статей в мае 2010 года. Впоследствии он выпустил книгу под названием «», посвященную данной технологии.
предложил расширить понятие Итана Маркотта, чтобы оно покрывало любые подходы, обеспечивающие ясное визуальное восприятие независимо от характеристик экрана и других ограничений пользовательского устройства.
С другой стороны, Аарон Густафсон выпустил книгу «», которая рассматривает метод «постепенного улучшения» ( — ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.
В результате среди веб-дизайнеров стали понимать адаптивный дизайн (, не путать с ) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение.
Предпосылки Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали: увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет; популярность мобильных устройств с выходом в интернет и увеличение мобильного интернет-трафика; рекомендации поисковых систем Яндекс и Google (отсутствие дублирующих страниц и концентрация ссылочной массы на одном домене).
Основные принципы в отзывчивом дизайне: применение гибкого макета на основе сетки (); использование гибких изображений (); работа с медиа-запросами ();
в дополнение к этому в адаптивном дизайне: применение постепенного улучшения; проектирование для мобильных устройств с самых ранних этапов. плавное перестраивание блоков в отзывчивом дизайне при изменении размера экрана (например, при повороте планшета)
Сначала мобильные («») Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное.
В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook:
Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для facebook.com, но, познакомившись с платформой, я быстро убедился, что можно создать версию, которая будет гораздо лучше, чем основной сайт! (Джо Хьюитт) Такой подход не является обязательным условием, однако его преимущество в меньшем размере кода, за счёт меньшего количества медиа-запросов и усиленных акцентах в дизайне на малых разрешениях.
См. также Bootstrap
Примечания
Литература
Ссылки
Категория:Веб-разработка Категория:Веб-дизайн Категория:Каскадные таблицы стилей