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

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

*Контент подобен воде* — поговорка, иллюстрирующая принципы RWD.

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

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

Концепция «резиновой» сетки требует, чтобы размеры элементов страницы определялись в относительных единицах, таких как проценты, а не в абсолютных единицах, таких как пиксели или точки . ^[4]
Гибкие изображения также имеют размеры в относительных единицах, чтобы предотвратить их отображение за пределами содержащего их элемента . ^[5]
Медиа-запросы позволяют странице использовать различные правила стиля CSS в зависимости от характеристик устройства, на котором отображается сайт, например, ширины поверхности рендеринга (ширины окна браузера или физического размера дисплея).
Адаптивные макеты автоматически настраиваются и адаптируются к любому размеру экрана устройства, будь то настольный компьютер, ноутбук, планшет или мобильный телефон.

Адаптивный веб-дизайн стал более важным, поскольку пользователи мобильных устройств стали составлять большинство посетителей сайта. ^[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]— и определил это как плавную сетку/гибкие изображения/медиа-запросы – в статье в журнале A List Apart за май 2010 года . ^[1] Он описал теорию и практику адаптивного веб-дизайна в своей краткой книге 2011 года под названием Responsive Web Design . Адаптивный дизайн занял второе место в рейтинге «Лучшие тенденции веб-дизайна за 2012 год» по версии журнала .net после прогрессивного улучшения и занял первое место. ^[37]

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

Связанные понятия

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

См. также

Ссылки

^ Перейти обратно: ^а ^б ^с Маркотт, Итан (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 г.
^ «Обзор HTML+» . w3.org . W3C .
↑ Кальбах, Джим (22 июля 2012 г.). «Первый веб-сайт с адаптивным дизайном: Audi (около 2002 г.)». ^{[ самостоятельно опубликованный источник? ]}
^ Адамс, Кэмерон (21 сентября 2004 г.). «Макет, зависящий от разрешения: изменение макета в зависимости от ширины браузера» . Человек в синем .
^ «G146: Использование жидкого макета» . w3.org . Проверено 21 мая 2015 г.
^ «Медиа-запросы» . w3.org . Проверено 21 мая 2015 г.
^ «OutSeller Group — Организуйте, Оптимизируйте, Максимизируйте» . аутселлер.нет . Проверено 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 г.

[fluid_grid-1] Перейти обратно: ^а ^б ^с Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн» . Список врозь .

[Schade_2014-2] Шаде, Эми (4 мая 2014 г.). «Отзывчивый веб-дизайн (RWD) и пользовательский опыт» . Нильсен Норман Групп . Проверено 19 октября 2017 г.

[3] «Основные концепции адаптивного веб-дизайна» . 8 сентября 2014 г.

[EM_FG-4] Перейти обратно: ^а ^б Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки» . Список врозь.

[EM_FI-5] Перейти обратно: ^а ^б Маркотт, Итан (7 июня 2011 г.). «Текучие изображения» . Список врозь.

[6] Ханнеманн, Ансельм (7 сентября 2012 г.). «Путь к адаптивным изображениям» . сетевой журнал.

[ZMGflexEx-7] Гилленуотер, Зои Микли (15 декабря 2010 г.). Примеры гибких макетов с медиазапросами CSS3 . Потрясающий CSS3. п. 320. ИСБН 978-0-321-722133 .

[ZMGmediaQ-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» .

[RWD-16] Перейти обратно: ^а ^б Вроблевски, Люк (6 февраля 2012 г.). «Засучим рукава реагирования» .

[17] Вроблевски, Люк (14 марта 2012 г.). «Шаблоны макетов для нескольких устройств» .

[RESS-18] Вроблевски, Люк (29 февраля 2012 г.). «Адаптивный дизайн… или RESS» .

[19] Вроблевски, Люк (12 сентября 2011 г.). «RESS: адаптивный дизайн + серверные компоненты» .

[20] Андерсен, Андерс (9 мая 2012 г.). «Начало работы с РЭС» .

[21] «Создание веб-сайтов, оптимизированных для смартфонов» .

[22] Снайдер, Мэтью; Корен, Этай (30 апреля 2012 г.). «Состояние адаптивной рекламы: взгляд издателей» . Журнал .net.

[23] «Справка Google Partners» . гугл.com . Проверено 21 мая 2015 г.

[SSDD-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 Group — Организуйте, Оптимизируйте, Максимизируйте» . аутселлер.нет . Проверено 21 мая 2015 г.

[37] Граннелл, Крейг (9 января 2012 г.). «15 главных тенденций веб-дизайна и разработки на 2012 год» . Журнал .net. Архивировано из оригинала 11 сентября 2013 года . Проверено 29 октября 2021 г.

[mashable_2013-38] Кэшмор, Пит (11 декабря 2012 г.). «Почему 2013 год — год адаптивного веб-дизайна» .

[39] «Что такое адаптивный веб-дизайн» . 23 июля 2012 г.

[40] Вроблевски, Люк (3 ноября 2009 г.). «Мобильные прежде всего» .

[Firtman-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 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

[40]

[41]

[42]

[43]