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

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

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

Сайт, разработанный с помощью RWD, адаптирует макет к среде просмотра, используя плавные, пропорциональные сетки, гибкие изображения и медиа-запросы CSS3 , расширение правила, следующими способами: @media

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

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

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

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

Дизайн , ориентированный на мобильные устройства, и прогрессивные улучшения - это взаимосвязанные концепции, предшествовавшие RWD. Браузеры базовых мобильных телефонов не понимают JavaScript или медиа-запросы , поэтому рекомендуется создать базовый веб-сайт и улучшить его для смартфонов и персональных компьютеров , а не полагаться на постепенную деградацию, чтобы заставить сложный, насыщенный изображениями сайт работать на нем. мобильные телефоны.

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

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

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

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

Люк Вроблевски резюмировал некоторые проблемы RWD и мобильного дизайна и создал каталог шаблонов макетов для нескольких устройств. Он предполагает, что, по сравнению с простым подходом RWD, подходы к взаимодействию с устройством или RESS (адаптивный веб-дизайн с серверными компонентами) могут обеспечить взаимодействие с пользователем, которое лучше оптимизировано для мобильных устройств. Реализация серверного генератора CSS языков таблиц стилей, таких как Sass или MML от Incentivated, может быть частью такого подхода путем доступа к серверному API, который обрабатывает различия устройств (обычно мобильных телефонов) в сочетании с базой данных возможностей устройства, чтобы улучшить удобство использования. RESS дороже в разработке, требует чего-то большего, чем просто логика на стороне клиента, и поэтому, как правило, предназначен для организаций с большим бюджетом. Google рекомендует адаптивный дизайн для веб-сайтов для смартфонов по сравнению с другими подходами. Хотя многие издатели начинают внедрять адаптивный дизайн, одна из постоянных проблем RWD заключается в том, что некоторые рекламные баннеры и видео не являются плавными. Однако поисковая реклама и (баннерная) медийная реклама поддерживают таргетинг на платформу конкретных устройств и разные форматы рекламы для настольных компьютеров, смартфонов и базовых мобильных устройств. Для разных платформ можно использовать разные URL-адреса целевой страницы , или Ajax можно использовать для отображения разных вариантов рекламы на странице. Таблицы CSS допускают гибридные фиксированные + гибкие макеты.

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

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

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

История

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

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

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

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

использованная литература