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]

История

Спецификация 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]

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

Рекомендации

  1. ^ abc Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн». Список врозь .
  2. ↑ Шаде, Эми (4 мая 2014 г.). «Отзывчивый веб-дизайн (RWD) и пользовательский опыт». Нильсен Норман Групп . Проверено 19 октября 2017 г.
  3. ^ «Основные концепции адаптивного веб-дизайна». 8 сентября 2014 г.
  4. ^ аб Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки». Список врозь.
  5. ^ Аб Маркотт, Итан (7 июня 2011 г.). «Текучие изображения». Список врозь.
  6. ↑ Ханнеманн, Ансельм (7 сентября 2012 г.). «Путь к адаптивным изображениям». сетевой журнал.
  7. ↑ Гилленуотер, Зои Микли (15 декабря 2010 г.). Примеры гибких макетов с медиазапросами CSS3. Потрясающий CSS3. п. 320. ИСБН 978-0-321-722133.
  8. ↑ Гилленуотер, Зои Микли (21 октября 2011 г.). «Составление качественных медиа-запросов».
  9. ^ «Адаптивный дизайн — использование возможностей медиа-запросов» . Центр веб-мастеров Google. 30 апреля 2012 г.
  10. ^ "Правило @media" . w3.org . W3C .
  11. ^ «Индекс Cisco Visual Networking: обновление глобального прогноза мобильного трафика данных на 2014–2019 годы» . Циско . 30 января 2015 года . Проверено 4 августа 2015 г.
  12. ^ «Доля мобильных посещений обычных поисковых систем США в 2021 году» . Статистика . Проверено 29 октября 2021 г.
  13. ^ «Официальный блог Google для веб-мастеров: выпуск обновления для мобильных устройств» . Официальный блог Центра веб-мастеров Google . Проверено 4 августа 2015 г.
  14. ^ Тевенен, Д.; Кутаз, Дж. (2002). «Пластичность пользовательских интерфейсов: основа и программа исследований». Учеб. Interact'99, А. Сасс и К. Джонсон Эдс, ИФИП IOS Press . Эдинбург. стр. 110–117.
  15. ^ Вроблевски, Люк (17 мая 2011 г.). «Мобилизм: jQuery Mobile».
  16. ^ Аб Вроблевски, Люк (6 февраля 2012 г.). «Засучить рукава реагирования».
  17. ↑ Вроблевски, Люк (14 марта 2012 г.). «Шаблоны макетов для нескольких устройств».
  18. ↑ Вроблевски, Люк (29 февраля 2012 г.). «Адаптивный дизайн… или RESS».
  19. ↑ Вроблевски, Люк (12 сентября 2011 г.). «RESS: адаптивный дизайн + серверные компоненты».
  20. ↑ Андерсен, Андерс (9 мая 2012 г.). «Начало работы с РЭСС».
  21. ^ «Создание веб-сайтов, оптимизированных для смартфонов».
  22. ^ Снайдер, Мэтью; Корен, Этай (30 апреля 2012 г.). «Состояние адаптивной рекламы: точка зрения издателей». Журнал .net.
  23. ^ «Справка Google Partners» . гугл.com . Проверено 21 мая 2015 г.
  24. ^ «Обнаружение устройств на стороне сервера: история, преимущества и инструкции» . Убойный журнал. 24 сентября 2012 г.
  25. ^ JavaScript и адаптивный веб-дизайн Разработчики Google
  26. ^ «Роль макетов таблиц в адаптивном веб-дизайне» . Веб-дизайн Тутс+ . Проверено 21 мая 2015 г.
  27. ↑ Янг, Джеймс (13 августа 2012 г.). «Основные проблемы адаптивного веб-дизайна… тестирование». Журнал .net.
  28. ↑ Ринальди, Брайан (26 сентября 2012 г.). «Тестирование браузера... с помощью Adobe Edge Inspect».
  29. ^ «Просмотр адаптивного дизайна» . Сеть разработчиков Mozilla . Проверено 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. ^ «Медиа-запросы». w3.org . Проверено 21 мая 2015 г.
  36. ^ «Группа OutSeller - организовывать, оптимизировать, максимизировать» . аутселлер.нет . Проверено 21 мая 2015 г.
  37. ↑ Граннелл, Крейг (9 января 2012 г.). «15 главных тенденций веб-дизайна и разработки на 2012 год». Журнал .net. Архивировано из оригинала 11 сентября 2013 года . Проверено 29 октября 2021 г.
  38. ↑ Кэшмор, Пит (11 декабря 2012 г.). «Почему 2013 год — год адаптивного веб-дизайна».
  39. ^ «Что такое адаптивный веб-дизайн» . 23 июля 2012 г.
  40. ↑ Вроблевски, Люк (3 ноября 2009 г.). «Мобильные прежде всего».
  41. ↑ Фиртман, Максимилиано (30 июля 2011 г.). Программирование мобильного Интернета. стр. 512. ISBN. 978-0-596-80778-8.
  42. ^ «Изящная деградация против прогрессивного улучшения» . 3 февраля 2009 г. Архивировано из оригинала 13 ноября 2014 г.
  43. ^ Паркер, Тодд; Вакс, Мэгги Костелло; Джел, Скотт (февраль 2010 г.). Проектирование с прогрессивным улучшением. п. 456. ИСБН 978-0-321-65888-3. Проверено 1 марта 2010 г.