Подход к веб-дизайну, обеспечивающий хорошее отображение веб-страниц на различных устройствах.
Скриншот Википедии с адаптивным скином Vector 2022 на экране компьютера (слева) и на экране мобильного телефона (справа). Элементы перестраиваются в более удобный для мобильных устройств макет.
Контент подобен воде — поговорка, иллюстрирующая принципы RWD.
Отзывчивый веб-дизайн ( RWD ) или адаптивный дизайн — это подход к веб-дизайну , целью которого является обеспечение хорошего отображения веб-страниц на различных устройствах и размерах окон или экранов от минимального до максимального размера дисплея, чтобы обеспечить удобство использования и удовлетворение. [1] [2]
Адаптивный дизайн адаптирует макет веб-страницы к среде просмотра [1] с использованием таких методов, как гибкие сетки на основе пропорций, [3] [4] гибкие изображения, [5] [6] и медиа-запросы CSS3 , [7] [8] [9] расширение правила , [10] следующими способами:@media
Концепция «резиновой» сетки требует, чтобы размеры элементов страницы определялись в относительных единицах, таких как проценты, а не в абсолютных единицах, таких как пиксели или точки . [4]
Гибкие изображения также имеют размеры в относительных единицах, чтобы предотвратить их отображение за пределами содержащего их элемента . [5]
Медиа-запросы позволяют странице использовать различные правила стиля CSS в зависимости от характеристик устройства, на котором отображается сайт, например ширины поверхности рендеринга (ширина окна браузера или физический размер дисплея).
Адаптивные макеты автоматически настраиваются и адаптируются к любому размеру экрана устройства, будь то настольный компьютер, ноутбук, планшет или мобильный телефон.
Адаптивный веб-дизайн стал более важным, поскольку пользователи мобильных устройств стали составлять большинство посетителей сайта. [11] [12] Например, в 2015 году Google объявил Mobilegeddon и начал повышать рейтинг страниц мобильных сайтов при поиске с мобильного устройства. [13]
Люк Вроблевски обобщил некоторые проблемы RWD и мобильного дизайна и создал каталог шаблонов макетов для нескольких устройств. [15] [16] [17] Он предположил, что по сравнению с простым подходом HWD подходы к работе с устройствами или RESS (адаптивный веб-дизайн с серверными компонентами) могут обеспечить пользовательский опыт, который лучше оптимизирован для мобильных устройств. [18] [19] [20] Реализация генератора CSS на стороне сервера для языков таблиц стилей, таких как Sass , может быть частью такого подхода. Google рекомендовал адаптивный дизайн для веб-сайтов для смартфонов среди других подходов. [21]
Хотя многие издатели внедрили адаптивный дизайн, одной из проблем при внедрении RWD было то, что некоторые рекламные баннеры и видеоролики не были гибкими. [22] Однако поисковая реклама и (баннерная) медийная реклама стали поддерживать таргетинг на конкретную платформу устройства и различные форматы размеров рекламы для настольных компьютеров, смартфонов и базовых мобильных устройств. Для разных платформ использовались разные URL-адреса целевых страниц , [23] или Ajax использовался для отображения на странице разных вариантов рекламы. [24] [16] [25] Таблицы CSS допускали гибридные фиксированные и гибкие макеты. [26]
Существует множество способов проверки и тестирования проектов RWD, [27] начиная от валидаторов мобильных сайтов и мобильных эмуляторов и заканчивая инструментами одновременного тестирования, такими как Adobe Edge Inspect . [28] Браузеры Chrome, Firefox и Safari и инструменты разработчика предлагают инструменты изменения размера области просмотра адаптивного дизайна, а также сторонние компании. [29] [30]
История
Спецификация HTML+ W3C гласит, что веб-сайты должны отображаться в соответствии с предпочтениями пользователя. [31] Однако отсутствовала настройка макета веб-страницы. Многие веб-разработчики прибегали к обычным HTML-таблицам как к способу настройки макета и одновременного обеспечения базовой отзывчивости своих веб-сайтов.
Первым крупным сайтом, макет которого нетривиальным образом адаптировался к ширине области просмотра браузера, был сайт Audi.com , запущенный в конце 2001 года [32], созданный командой Razorfish , состоящей из Юргена Шпангла и Джима Калбаха (информационная архитектура), Кена. Оллинг (дизайн) и Ян Хоффманн (разработка интерфейса). Ограниченные возможности браузера означали, что в Internet Explorer макет мог динамически адаптироваться в браузере, тогда как в Netscape при изменении размера страницу приходилось перезагружать с сервера.
Кэмерон Адамс провел демонстрацию в 2004 году. [33] К 2008 году для описания макетов использовался ряд связанных терминов, таких как «гибкий», «жидкий», [34] «жидкий» и «эластичный». Медиа-запросы CSS3 были почти готовы к использованию в прайм-тайм в конце 2008 — начале 2009 года. [35] Итан Маркотт придумал термин « адаптивный веб-дизайн» [36] — и определил его как означающий «плавную сетку/гибкие изображения/медиа-запросы» – в статье в мае 2010 года. в списке отдельно . [1] Он описал теорию и практику адаптивного веб-дизайна в своей краткой книге 2011 года под названием « Отзывчивый веб-дизайн» . Адаптивный дизайн занял второе место в рейтинге «Лучшие тенденции веб-дизайна за 2012 год» по версии журнала .net после прогрессивного улучшения и занял первое место. [37]
Mashable назвал 2013 год Годом адаптивного веб-дизайна. [38]
Связанные понятия
Проектирование, ориентированное на мобильные устройства, и прогрессивное улучшение — это родственные концепции, появившиеся еще до RWD. [39] Браузеры обычных мобильных телефонов не понимают JavaScript или медиа-запросы , поэтому рекомендуемой практикой было создание простого веб-сайта и его улучшение для смартфонов и персональных компьютеров , а не полагаться на плавную деградацию для создания сложного, насыщенного изображениями сайта. работа сайта на мобильных телефонах. [40] [41] [42] [43]
^ abc Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн». Список врозь .
↑ Шаде, Эми (4 мая 2014 г.). «Отзывчивый веб-дизайн (RWD) и пользовательский опыт». Нильсен Норман Групп . Проверено 19 октября 2017 г.
^ «Основные концепции адаптивного веб-дизайна». 8 сентября 2014 г.
^ аб Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки». Список врозь.
^ Аб Маркотт, Итан (7 июня 2011 г.). «Текучие изображения». Список врозь.
↑ Ханнеманн, Ансельм (7 сентября 2012 г.). «Путь к адаптивным изображениям». сетевой журнал.
↑ Гилленуотер, Зои Микли (15 декабря 2010 г.). Примеры гибких макетов с медиазапросами CSS3. Потрясающий CSS3. п. 320. ИСБН978-0-321-722133.
↑ Гилленуотер, Зои Микли (21 октября 2011 г.). «Составление качественных медиа-запросов».
^ «Адаптивный дизайн — использование возможностей медиа-запросов» . Центр веб-мастеров Google. 30 апреля 2012 г.
^ "Правило @media" . w3.org . W3C .
^ «Индекс Cisco Visual Networking: обновление глобального прогноза мобильного трафика данных на 2014–2019 годы» . Циско . 30 января 2015 года . Проверено 4 августа 2015 г.
^ «Доля мобильных посещений обычных поисковых систем США в 2021 году» . Статистика . Проверено 29 октября 2021 г.
^ «Официальный блог Google для веб-мастеров: выпуск обновления для мобильных устройств» . Официальный блог Центра веб-мастеров Google . Проверено 4 августа 2015 г.
^ Тевенен, Д.; Кутаз, Дж. (2002). «Пластичность пользовательских интерфейсов: основа и программа исследований». Учеб. Interact'99, А. Сасс и К. Джонсон Эдс, ИФИП IOS Press . Эдинбург. стр. 110–117.
^ Вроблевски, Люк (17 мая 2011 г.). «Мобилизм: jQuery Mobile».
^ Аб Вроблевски, Люк (6 февраля 2012 г.). «Засучить рукава реагирования».
↑ Вроблевски, Люк (14 марта 2012 г.). «Шаблоны макетов для нескольких устройств».
↑ Вроблевски, Люк (29 февраля 2012 г.). «Адаптивный дизайн… или RESS».
↑ Вроблевски, Люк (12 сентября 2011 г.). «RESS: адаптивный дизайн + серверные компоненты».
↑ Андерсен, Андерс (9 мая 2012 г.). «Начало работы с РЭСС».
^ «Создание веб-сайтов, оптимизированных для смартфонов».
^ Снайдер, Мэтью; Корен, Этай (30 апреля 2012 г.). «Состояние адаптивной рекламы: точка зрения издателей». Журнал .net.
^ «Справка Google Partners» . гугл.com . Проверено 21 мая 2015 г.
^ «Обнаружение устройств на стороне сервера: история, преимущества и инструкции» . Убойный журнал. 24 сентября 2012 г.
^ JavaScript и адаптивный веб-дизайн Разработчики Google
^ «Роль макетов таблиц в адаптивном веб-дизайне» . Веб-дизайн Тутс+ . Проверено 21 мая 2015 г.
↑ Янг, Джеймс (13 августа 2012 г.). «Основные проблемы адаптивного веб-дизайна… тестирование». Журнал .net.
↑ Ринальди, Брайан (26 сентября 2012 г.). «Тестирование браузера... с помощью Adobe Edge Inspect».
^ «Просмотр адаптивного дизайна» . Сеть разработчиков Mozilla . Проверено 21 мая 2015 г.
^ Мальте Вассерманн. «Инструмент тестирования адаптивного дизайна – Viewport Resizer – Эмуляция различных разрешений экрана – Лучшая панель инструментов для тестирования устройств для разработчиков». Maltewassermann.com . Проверено 21 мая 2015 г.
↑ Адамс, Кэмерон (21 сентября 2004 г.). «Макет, зависящий от разрешения: изменение макета в зависимости от ширины браузера». Человек в синем .
^ «G146: Использование жидкого макета» . w3.org . Проверено 21 мая 2015 г.
^ «Медиа-запросы». w3.org . Проверено 21 мая 2015 г.
^ «Группа OutSeller - организовывать, оптимизировать, максимизировать» . аутселлер.нет . Проверено 21 мая 2015 г.
↑ Граннелл, Крейг (9 января 2012 г.). «15 главных тенденций веб-дизайна и разработки на 2012 год». Журнал .net. Архивировано из оригинала 11 сентября 2013 года . Проверено 29 октября 2021 г.
↑ Кэшмор, Пит (11 декабря 2012 г.). «Почему 2013 год — год адаптивного веб-дизайна».
^ «Что такое адаптивный веб-дизайн» . 23 июля 2012 г.
↑ Вроблевски, Люк (3 ноября 2009 г.). «Мобильные прежде всего».
↑ Фиртман, Максимилиано (30 июля 2011 г.). Программирование мобильного Интернета. стр. 512. ISBN.978-0-596-80778-8.
^ «Изящная деградация против прогрессивного улучшения» . 3 февраля 2009 г. Архивировано из оригинала 13 ноября 2014 г.
^ Паркер, Тодд; Вакс, Мэгги Костелло; Джел, Скотт (февраль 2010 г.). Проектирование с прогрессивным улучшением. п. 456. ИСБН978-0-321-65888-3. Проверено 1 марта 2010 г.