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