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

«Адаптивный дизайн» перенаправляется сюда. О подходе к автоматизированному проектированию см. адаптивный компьютерный дизайн.
Не путать с Ответная реакция.

Скриншот Википедия с отзывчивой кожей (Вне времени ).
Тот же скин (Вне времени ) на мобильном телефоне; обратите внимание, как элементы перестраиваются, чтобы они были более мобильными.
Контент подобен воде, поговорка, иллюстрирующая принципы RWD
Пример того, как различные элементы веб-страницы адаптируются к размеру экрана различных устройств, таких как дисплей настольного компьютера, планшетного ПК и смартфона.
Каскадные таблицы стилей
Концепции
Философии
Инструменты
Сравнения

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

Сайт разработан с RWD[2][6] адаптирует макет к среде просмотра с помощью плавных, пропорциональных сеток,[7][8] гибкие изображения,[9][10][11] и CSS3 медиа-запросы,[4][12][13] расширение @средства массовой информации правило, следующими способами:[14]

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

Адаптивный веб-дизайн стал более важным, поскольку объем мобильного трафика составляет более половины общего интернет-трафика.[15] Например, в 2015 году Google объявил Mobilegeddon и начали повышать рейтинг сайтов, оптимизированных для мобильных устройств, если поиск осуществлялся с мобильного устройства.[16] Адаптивный веб-дизайн - это пример пластичность пользовательского интерфейса.[17]

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

Прежде всего, мобильные устройства, ненавязчивый JavaScript и прогрессивные улучшения

"Сначала мобильные", ненавязчивый JavaScript, и прогрессивное улучшение являются взаимосвязанными концепциями, предшествующими RWD.[18] Браузеры обычных мобильных телефонов не понимают JavaScript или медиа-запросы, поэтому рекомендуется создать базовый веб-сайт и улучшить его для смартфонов и персональных компьютеров, а не полагаться на изящная деградация заставить сложный, насыщенный изображениями сайт работать на мобильных телефонах.[19][20][21][22]

Прогрессивное улучшение на основе браузера, устройства или обнаружения функций

Из-за большого объема интернет-трафика с мобильных устройств их больше нельзя игнорировать. В 2014 году впервые больше пользователей вышло в Интернет со своих мобильных устройств, чем с компьютеров.[23] Если веб-сайт должен поддерживать основные мобильные устройства без JavaScript, обнаружение браузера ("агента пользователя") (также называемый "обнюхивание браузера ") и обнаружение мобильных устройств[20][24] есть два способа определить, поддерживаются ли определенные функции HTML и CSS (в качестве основы для прогрессивного улучшения), однако эти методы не являются полностью надежными, если они не используются вместе с базой данных возможностей устройства.

Для более функциональных мобильных телефонов и ПК, Фреймворки JavaScript подобно Modernizr, jQuery, и jQuery Mobile которые могут напрямую протестировать поддержку браузером функций HTML / CSS (или идентифицировать устройство или пользовательский агент). Полифиллы может использоваться для добавления поддержки функций, например. для поддержки медиа-запросов (требуется для RWD) и улучшения поддержки HTML5 в Internet Explorer. Обнаружение функции также может быть не совсем надежным; некоторые могут сообщить, что функция доступна, если она отсутствует или настолько плохо реализована, что фактически нефункциональна.[25][26]

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

Люк Вроблевски резюмировал некоторые проблемы RWD и мобильного дизайна и создал каталог шаблонов макетов для нескольких устройств.[27][28][29] Он предполагает, что по сравнению с простым подходом RWD, подходы к взаимодействию с устройством или RESS (адаптивный веб-дизайн с серверными компонентами) могут обеспечить пользовательский опыт, который лучше оптимизирован для мобильных устройств.[30][31][32] На стороне сервера "динамический CSS "реализация языков таблиц стилей, таких как Sass или MML Incentivated может быть частью такого подхода путем доступа к API на основе сервера, который обрабатывает различия устройств (обычно мобильных телефонов) в сочетании с базой данных возможностей устройств, чтобы улучшить удобство использования.[33] RESS дороже в разработке, требует чего-то большего, чем просто логика на стороне клиента, и поэтому, как правило, предназначен для организаций с большим бюджетом. Google рекомендует адаптивный дизайн для веб-сайтов для смартфонов по сравнению с другими подходами.[34]

Хотя многие издатели начинают внедрять адаптивный дизайн, одна из постоянных проблем RWD заключается в том, что некоторые баннерная реклама и видео не текучие.[35] Тем не мение, поисковая реклама и (баннер) медийная реклама поддерживает таргетинг на определенные платформы устройств и различные форматы рекламы для настольных компьютеров, смартфонов и базовых мобильных устройств. Разные целевая страница URL можно использовать для разных платформ,[36] или же Аякс может использоваться для отображения различных вариантов рекламы на странице.[24][28][37] Таблицы CSS допускают гибридные фиксированные + гибкие макеты.[38]

В настоящее время существует множество способов проверки и тестирования конструкций RWD,[39] от валидаторов мобильных сайтов и мобильных эмуляторов до инструментов одновременного тестирования, таких как Adobe Edge Inspect.[40] Браузеры Chrome, Firefox и Safari, а также консоль Chrome предлагают инструменты для изменения размера окна просмотра адаптивного дизайна, как и сторонние производители.[41][42]

Варианты использования RWD теперь будут расширяться с увеличением использования мобильных устройств; По данным Statista, количество посещений с помощью обычных поисковых систем в США с мобильных устройств достигло 51% и продолжает расти.[43]

Шаблон для дизайна мобильных и настольных приложений.

История

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

Кэмерон Адамс создал демонстрацию в 2004 году, которая все еще находится в сети.[45] К 2008 году ряд связанных терминов, таких как «гибкий», «ликвидный»,[46] «текучая» и «эластичная» использовались для описания макетов. Медиа-запросы CSS3 были почти готовы к использованию в конце 2008 - начале 2009 года.[47] Итан Маркотт придумал термин адаптивный веб-дизайн[48] (RWD) - и определил это как означающее плавную сетку / гибкие изображения / медиа-запросы - в статье в мае 2010 г. Список отдельно.[2] Он описал теорию и практику адаптивного веб-дизайна в своей небольшой книге 2011 года под названием Адаптивный веб-дизайн. Адаптивный дизайн занял второе место в рейтинге лучших тенденций веб-дизайна 2012 года по версии журнал .net после прогрессивное улучшение на №1.

Mashable назвал 2013 год Годом адаптивного веб-дизайна.[49] Многие другие источники рекомендуют адаптивный дизайн в качестве экономичной альтернативы мобильным приложениям из-за его способности разместить весь код на одном веб-сайте. Пользователи и разработчики начали осознавать преимущества и важность адаптивного дизайна для мобильных устройств, поскольку использование мобильных устройств продолжало расти. Это осознание важности подтвердилось, когда Google объявил, что поисковые системы будут вознаграждать отзывчивые веб-сайты повышением рейтинга.

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

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

  1. ^ Тафреши, Амир Э. Сарабадани; Марбах, Ким; Норри, Мойра С. (5 июня 2017 г.). Адаптация веб-контента на публичных дисплеях на основе близости. Международная конференция по веб-инженерии (ICWE): веб-инженерия. Конспект лекций по информатике. 10360. С. 282–301. Дои:10.1007/978-3-319-60131-1_16. ISBN  978-3-319-60130-4.
  2. ^ а б c Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн». Список отдельно.
  3. ^ «20 любимых адаптивных сайтов Итана Маркотта». .net журнал. 11 октября 2011 г.
  4. ^ а б Гилленуотер, Зои Микли (15 декабря 2010 г.). Примеры гибких макетов с медиа-запросами CSS3. Великолепный CSS3. п. 320. ISBN  978-0-321-722133.
  5. ^ Шаде, Эми (4 мая 2014 г.). «Адаптивный веб-дизайн (RWD) и взаимодействие с пользователем». Nielsen Norman Group. Получено 19 октября, 2017.
  6. ^ Петтит, Ник (8 августа 2012 г.). «Руководство по адаптивному веб-дизайну для новичков». Блог TeamTreehouse.com.
  7. ^ «Основные концепции адаптивного веб-дизайна». 8 сентября 2014 г.
  8. ^ а б Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки». Список отдельно.
  9. ^ а б Маркотт, Итан (7 июня 2011 г.). "Плавные изображения". Список отдельно.
  10. ^ Ханнеманн, Ансельм (7 сентября 2012 г.). «Дорога к адаптивным изображениям». net Журнал.
  11. ^ Джейкобс, Дениз (24 апреля 2012 г.). «50 фантастических инструментов для адаптивного веб-дизайна». .net Журнал.
  12. ^ Гилленуотер, Зои Микли (21 октября 2011 г.). "Создание качественных медиа-запросов".
  13. ^ «Адаптивный дизайн - использование возможностей медиа-запросов». Центр веб-мастеров Google. 30 апреля 2012 г.
  14. ^ W3C @media правило
  15. ^ «Индекс Cisco Visual Networking: обновление глобального прогноза трафика мобильных данных на 2014–2019 гг.». Cisco. 30 января 2015 г.. Получено 4 августа, 2015.
  16. ^ "Официальный блог Google Webmaster Central: развертывание обновления для мобильных устройств". Официальный блог Центра веб-мастеров Google. Получено 4 августа, 2015.
  17. ^ Thevenin, D .; Коутаз, Дж. (2002). «Пластичность пользовательских интерфейсов: рамки и программа исследований». Proc. Interact'99, Редакторы А. Сасс и К. Джонсон, IFIP IOS Press. Эдинбург. С. 110–117.
  18. ^ «Что такое адаптивный веб-дизайн». 23 июля 2012 г.
  19. ^ Вроблевски, Люк (3 ноября 2009 г.). "Сначала мобильные".
  20. ^ а б Фиртман, Максимилиано (30 июля 2011 г.). Программирование мобильного Интернета. стр.512. ISBN  978-0-596-80778-8.
  21. ^ «Изящная деградация против прогрессивного улучшения». 3 февраля 2009 г. Архивировано с оригинал 13 ноября 2014 г.
  22. ^ Паркер, Тодд; Вакс, Мэгги Костелло; Джель, Скотт (февраль 2010 г.). Проектирование с прогрессивным улучшением. п. 456. ISBN  978-0-321-65888-3. Получено 1 марта, 2010.
  23. ^ "Мобильные сайты | Все, что нужно для СМИ". На всем пути к СМИ. 31 октября 2016 г.. Получено 8 октября, 2017.
  24. ^ а б «Обнаружение устройств на стороне сервера: история, преимущества и инструкции». Разрушающий журнал. 24 сентября 2012 г.
  25. ^ «BlackBerry Torch: рейтинг разработчиков HTML5 | Блог». Сенча. 18 августа 2010 г. Архивировано с оригинал 5 марта 2014 г.. Получено 11 сентября, 2012.
  26. ^ "Motorola Xoom: сводка для разработчиков HTML5 | Блог". Сенча. 24 февраля 2011 г. Архивировано с оригинал 13 февраля 2015 г.. Получено 11 сентября, 2012.
  27. ^ Вроблевски, Люк (17 мая 2011 г.). «Мобилизм: jQuery Mobile».
  28. ^ а б Вроблевски, Люк (6 февраля 2012 г.). «Закатывая наши отзывчивые рукава».
  29. ^ Вроблевски, Люк (14 марта 2012 г.). «Шаблоны макета для нескольких устройств».
  30. ^ Вроблевски, Люк (29 февраля 2012 г.). «Адаптивный дизайн ... или RESS».
  31. ^ Вроблевски, Люк (12 сентября 2011 г.). «RESS: адаптивный дизайн + серверные компоненты».
  32. ^ Андерсен, Андерс (9 мая 2012 г.). «Начало работы с RESS».
  33. ^ «Адаптивный, но не полностью оптимизированный для мобильных устройств | Блог». Поощрение.
  34. ^ «Создание веб-сайтов, оптимизированных для смартфонов».
  35. ^ Снайдер, Мэтью; Корен, Этаи (30 апреля 2012 г.). «Состояние адаптивной рекламы: взгляд издателей». .net Журнал.
  36. ^ «Справка Google Partners». google.com. Получено 21 мая, 2015.
  37. ^ JavaScript и адаптивный веб-дизайн Разработчики Google
  38. ^ «Роль макетов таблиц в адаптивном веб-дизайне». Веб-дизайн Tuts +. Получено 21 мая, 2015.
  39. ^ Янг, Джеймс (13 августа 2012 г.). «Самые популярные проблемы адаптивного веб-дизайна ... тестирование». .net Журнал.
  40. ^ Ринальди, Брайан (26 сентября 2012 г.). «Тестирование браузера ... с помощью Adobe Edge Inspect».
  41. ^ "Отзывчивый дизайн". Сеть разработчиков Mozilla. Получено 21 мая, 2015.
  42. ^ Мальте Вассерманн. «Инструмент тестирования адаптивного дизайна - Viewport Resizer - Эмуляция различных разрешений экрана - Лучшая панель инструментов для тестирования устройств для разработчиков». maltewassermann.com. Получено 21 мая, 2015.
  43. ^ «Доля мобильных посещений из обычных поисковых систем в США с 3 квартала 2013 г. по 4 квартал 2016 г.». Statista. Получено 27 марта, 2017.
  44. ^ Кальбах, Джим (22 июля 2012 г.). «Первый веб-сайт с адаптивным дизайном: Audi (около 2002 г.)».[самостоятельно опубликованный источник? ]
  45. ^ Адамс, Кэмерон (21 сентября 2004 г.). «Макет, зависящий от разрешения: изменение макета в зависимости от ширины браузера». Человек в синем.
  46. ^ «G146: Использование жидкого макета». w3.org. Получено 21 мая, 2015.
  47. ^ "Медиа-запросы". w3.org. Получено 21 мая, 2015.
  48. ^ "OutSeller Group - организовать, оптимизировать, максимизировать". outseller.net. Получено 21 мая, 2015.
  49. ^ Кэшмор, Пит (11 декабря 2012 г.). «Почему 2013 год стал годом адаптивного веб-дизайна».

внешняя ссылка