Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
«Адаптивный дизайн» перенаправляется сюда. Для подхода к автоматизированному проектированию см. Отзывчивое автоматизированное проектирование .
Не следует путать с отзывчивостью .

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

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

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

  • Концепция гибкой сетки требует, чтобы размер элемента страницы определялся в относительных единицах, таких как проценты, а не в абсолютных единицах, таких как пиксели или точки . [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] или Ajax может использоваться для отображения различных вариантов рекламы на странице. [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], созданный командой в razorfish, в которую входили Юрген Спангл и Джим Калбах (информационная архитектура), Кен Оллинг (дизайн) и Ян Хоффманн (разработка интерфейса). Ограниченные возможности браузера означают, что для Internet Explorer макет может динамически адаптироваться в браузере, тогда как для Netscape страницу необходимо перезагружать с сервера при изменении размера.

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

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

См. Также [ править ]

  • Адаптивный веб-дизайн
  • CSS-фреймворк
  • Em (типографика) § CSS
  • Прогрессивное улучшение
  • Адаптивный компьютерный дизайн
  • Веб-дизайн без стола
  • Bootstrap (интерфейсный фреймворк)
  • Фундамент (каркас)

Ссылки [ править ]

  1. ^ Тафреши, Амир Э. Сарабадани; Марбах, Ким; Норри, Мойра С. (5 июня 2017 г.). Адаптация веб-контента на публичных дисплеях на основе близости . Международная конференция по веб-инженерии (ICWE): Веб-инженерия . Конспект лекций по информатике. 10360 . С. 282–301. DOI : 10.1007 / 978-3-319-60131-1_16 . ISBN 978-3-319-60130-4.
  2. ^ a b c Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн» . Список отдельно .
  3. ^ «20 любимых отзывчивых сайтов Итана Маркотта» . .net журнал. 11 октября 2011 г.
  4. ^ a b Гилленуотер, Зои Микли (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. ^ a b Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки» . Список отдельно.
  9. ^ a b Маркотт, Итан (7 июня 2011 г.). «Плавные образы» . Список отдельно.
  10. ↑ Hannemann, Anselm (7 сентября 2012 г.). «Дорога к адаптивным изображениям» . net Журнал.
  11. ↑ Джейкобс, Дениз (24 апреля 2012 г.). «50 фантастических инструментов для адаптивного веб-дизайна» . .net Журнал.
  12. ^ Gillenwater, Зои Микли (21 октября 2011). «Создание качественных медиа-запросов» .
  13. ^ «Адаптивный дизайн - использование возможностей медиа-запросов» . Центр веб-мастеров Google. 30 апреля 2012 г.
  14. ^ W3C @media правило
  15. ^ «Индекс Cisco Visual Networking: Обновление прогноза глобального трафика мобильных данных на 2014–2019 гг.» . Cisco . 30 января 2015 года . Проверено 4 августа 2015 года .
  16. ^ "Официальный центральный блог Google для веб-мастеров: развертывание обновления для мобильных устройств" . Официальный блог Центра веб-мастеров Google . Проверено 4 августа 2015 года .
  17. ^ Thevenin, D .; Коутаз, Дж. (2002). «Пластичность пользовательских интерфейсов: рамки и исследовательская программа». Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press . Эдинбург. С. 110–117.
  18. ^ «Что такое адаптивный веб-дизайн» . 23 июля 2012 г.
  19. ^ Врублевский, Люк (3 ноября 2009). «Сначала мобильные» .
  20. ^ a b Фиртман, Максимилиано (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. ^ a b «Обнаружение устройств на стороне сервера: история, преимущества и инструкции» . Разрушающий журнал. 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. ^ a b Вроблевски, Люк (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. ^ Kalbach, Джим (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 год стал годом адаптивного веб-дизайна» .

Внешние ссылки [ править ]

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