stringtranslate.com

Адаптивный веб-дизайн

Скриншот Википедии с адаптивным скином Vector 2022 на экране компьютера (слева) и на экране мобильного телефона (справа). Элементы перестраиваются в более удобный для мобильных устройств макет.
Контент как вода , высказывание, иллюстрирующее принципы RWD

Адаптивный веб-дизайн ( RWD ) или адаптивный дизайн — это подход к веб-дизайну , направленный на то, чтобы веб-страницы хорошо отображались на различных устройствах и при различных размерах окон или экранов от минимального до максимального размера дисплея, чтобы обеспечить удобство использования и удовлетворение. [1] [2]

Адаптивный дизайн адаптирует макет веб-страницы к среде просмотра [1] с помощью таких методов, как сетки с гибкими пропорциями, [3] [4] гибкие изображения, [5] [6] и медиа-запросы CSS3 , [7] [8] [9] расширение правила , [10] следующими способами:@media

Адаптивный веб-дизайн стал более важным, поскольку пользователи мобильных устройств стали составлять большинство посетителей веб-сайтов. [11] [12] Например, в 2015 году Google анонсировал Mobilegeddon и начал повышать рейтинг страниц сайтов, оптимизированных для мобильных устройств, при поиске с мобильного устройства. [13]

Адаптивный веб-дизайн является примером пластичности пользовательского интерфейса . [14]

Проблемы и другие подходы

Люк Вроблевски обобщил некоторые проблемы 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]

История

Спецификация W3C HTML+ гласила, что веб-сайты должны отображаться в соответствии с предпочтениями пользователя. [31] Однако настройка макета веб-страницы отсутствовала. Многие веб-разработчики прибегали к обычным таблицам HTML как к способу настройки макета и в то же время привнесения некоторой базовой отзывчивости на свои веб-сайты.

Первым крупным сайтом, на котором макет нетривиальным образом адаптировался к ширине области просмотра браузера, был Audi .com, запущенный в конце 2001 года, [32] созданный командой razorfish, состоящей из Юргена Шпангла и Джима Калбаха (информационная архитектура), Кена Оллинга (дизайн) и Яна Хоффмана (разработка интерфейса). Ограниченные возможности браузера означали, что для Internet Explorer макет мог динамически адаптироваться в браузере, тогда как для Netscape страницу приходилось перезагружать с сервера при изменении размера.

Кэмерон Адамс создал демонстрацию в 2004 году . [33] К 2008 году ряд связанных терминов, таких как «гибкий», «жидкий», [34] «текучий» и «эластичный», использовались для описания макетов. Медиа-запросы CSS3 были почти готовы к прайм-тайму в конце 2008/начале 2009 года. [35] Этан Маркотт придумал термин адаптивный веб-дизайн [36] — и определил его как жидкую сетку / гибкие изображения / медиа-запросы — в статье в мае 2010 года в A List Apart . [1] Он описал теорию и практику адаптивного веб-дизайна в своей краткой книге 2011 года под названием «Адаптивный веб-дизайн» . Адаптивный дизайн был указан как #2 в Top Web Design Trends for 2012 по версии журнала .net после прогрессивного улучшения на #1. [37]

Mashable назвал 2013 год годом адаптивного веб-дизайна. [38]

Связанные концепции

Mobile-first design и прогрессивное улучшение — это связанные концепции, которые появились еще до RWD. [39] Браузеры базовых мобильных телефонов не понимают JavaScript или медиа-запросы , поэтому рекомендуемой практикой было создание базового веб-сайта и его улучшение для смартфонов и персональных компьютеров , а не полагаться на постепенное ухудшение, чтобы заставить сложный, насыщенный изображениями сайт работать на мобильных телефонах. [40] [41] [42] [43]

Смотрите также

Ссылки

  1. ^ abc Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн». A List Apart .
  2. ^ Шаде, Эми (4 мая 2014 г.). «Адаптивный веб-дизайн (RWD) и пользовательский опыт». Nielsen Norman Group . Получено 19 октября 2017 г.
  3. ^ "Основные концепции адаптивного веб-дизайна". 8 сентября 2014 г.
  4. ^ ab Marcotte, Ethan (3 марта 2009 г.). «Жидкостные сетки». A List Apart.
  5. ^ ab Marcotte, Ethan (7 июня 2011 г.). «Текучие образы». A List Apart.
  6. ^ Ханнеманн, Ансельм (7 сентября 2012 г.). «Дорога к адаптивным изображениям». Net Magazine.
  7. ^ Gillenwater, Zoe Mickley (15 декабря 2010 г.). Примеры гибких макетов с медиазапросами CSS3. Потрясающий CSS3. стр. 320. ISBN 978-0-321-722133.
  8. ^ Джилленвотер, Зои Микли (21 октября 2011 г.). «Создание качественных медиазапросов».
  9. ^ «Адаптивный дизайн — использование возможностей медиа-запросов». Google Webmaster Central. 30 апреля 2012 г.
  10. ^ "@media rule". w3.org . W3C .
  11. ^ "Cisco Visual Networking Index: Глобальный прогноз трафика мобильных данных, обновление 2014–2019. Белая книга". Cisco . 30 января 2015 г. Получено 4 августа 2015 г.
  12. ^ "Доля мобильных устройств в органических посещениях поисковых систем США в 2021 году". Statista . Получено 29 октября 2021 г.
  13. ^ "Официальный блог Google Webmaster Central: развертывание обновления для мобильных устройств". Официальный блог Google Webmaster Central . Получено 4 августа 2015 г.
  14. ^ Тевенин, Д.; Кутаз, Дж. (2002). «Пластичность пользовательских интерфейсов: структура и исследовательская программа». Proc. Interact'99, редакторы A. Sasse & C. Johnson, IFIP IOS Press . Эдинбург. С. 110–117.
  15. ↑ Вроблевски, Люк (17 мая 2011 г.). «Мобилизм: jQuery Mobile».
  16. ^ ab Wroblewski, Luke (6 февраля 2012 г.). «Засучив рукава, мы реагируем».
  17. ↑ Вроблевски, Люк (14 марта 2012 г.). «Шаблоны компоновки для нескольких устройств».
  18. ↑ Вроблевски, Люк (29 февраля 2012 г.). «Адаптивный дизайн... или RESS».
  19. ^ Вроблевски, Люк (12 сентября 2011 г.). «RESS: Адаптивный дизайн + Компоненты на стороне сервера».
  20. ↑ Андерсен, Андерс (9 мая 2012 г.). «Начало работы с RESS».
  21. ^ «Создание веб-сайтов, оптимизированных для смартфонов».
  22. ^ Снайдер, Мэтью; Корен, Этай (30 апреля 2012 г.). «Состояние адаптивной рекламы: точка зрения издателей». .net Magazine.
  23. ^ "Google Partners Help". google.com . Получено 21 мая 2015 г. .
  24. ^ "Обнаружение устройств на стороне сервера: история, преимущества и инструкции". Журнал Smashing. 24 сентября 2012 г.
  25. ^ JavaScript и адаптивный веб-дизайн Разработчики Google
  26. ^ "Роль макетов таблиц в адаптивном веб-дизайне". Web Design Tuts+ . 23 января 2013 г. Получено 21 мая 2015 г.
  27. ↑ Янг, Джеймс (13 августа 2012 г.). «Основные проблемы адаптивного веб-дизайна... тестирование». .net Magazine.
  28. ↑ Ринальди, Брайан (26 сентября 2012 г.). «Тестирование браузера... с помощью Adobe Edge Inspect».
  29. ^ "Responsive Design View". Mozilla Developer Network . Получено 21 мая 2015 г.
  30. ^ Мальте Вассерманн. "Инструмент тестирования адаптивного дизайна – Viewport Resizer – Эмуляция различных разрешений экрана – Лучшая панель инструментов для тестирования устройств разработчика". maltewassermann.com . Получено 21 мая 2015 г.
  31. ^ "Обзор HTML+". w3.org . W3C .
  32. ^ Калбах, Джим (22 июля 2012 г.). «Первый веб-сайт с адаптивным дизайном: Audi (около 2002 г.)». [ самостоятельно опубликованный источник? ]
  33. ^ Адамс, Кэмерон (21 сентября 2004 г.). «Разметка, зависящая от разрешения: изменение макета в зависимости от ширины браузера». Человек в синем .
  34. ^ "G146: Использование текучей компоновки". w3.org . Получено 21 мая 2015 г. .
  35. ^ "Media Queries". w3.org . Получено 21 мая 2015 г. .
  36. ^ "OutSeller Group - Организуйте, Оптимизируйте, Максимизируйте". outseller.net . Получено 21 мая 2015 г. .
  37. ^ Граннелл, Крейг (9 января 2012 г.). «15 главных тенденций веб-дизайна и разработки в 2012 году». .net Magazine. Архивировано из оригинала 11 сентября 2013 г. Получено 29 октября 2021 г.
  38. ^ Кэшмор, Пит (11 декабря 2012 г.). «Почему 2013 год — год адаптивного веб-дизайна». Mashable .
  39. ^ «Что такое адаптивный веб-дизайн». 23 июля 2012 г.
  40. ↑ Вроблевски, Люк (3 ноября 2009 г.). «Mobile First».
  41. ^ Фиртман, Максимилиано (30 июля 2011 г.). Программирование мобильного Интернета. O'Reilly Media. С. 512. ISBN 978-0-596-80778-8.
  42. ^ "Graceful decay versus progressive enhancement". 3 февраля 2009 г. Архивировано из оригинала 13 ноября 2014 г.
  43. ^ Паркер, Тодд; Вакс, Мэгги Костелло; Джел, Скотт (февраль 2010 г.). Проектирование с прогрессивным улучшением. Новые райдеры. стр. 456. ISBN 978-0-321-65888-3. Получено 1 марта 2010 г. .