Адаптивный веб-дизайн ( AWD ) способствует созданию нескольких версий веб-страницы для лучшего соответствия устройству пользователя, в отличие от одной статической страницы, которая загружается (и выглядит) одинаково на всех устройствах, или одной страницы, которая изменяет порядок и размер контента в зависимости от устройства/ размера экрана / браузера пользователя.
Чаще всего это описывает использование мобильной и десктопной версии страницы (или в большинстве случаев всего веб-сайта ), любая из которых извлекается на основе user-agent , определенного в запросе HTTP GET , что известно как динамическое обслуживание . Адаптивный веб-дизайн был одной из первых стратегий оптимизации сайта для удобства чтения на мобильных устройствах , наиболее распространенной практикой было использование совершенно отдельного веб-сайта для мобильных устройств и настольных компьютеров, при этом мобильные устройства часто перенаправлялись на мобильную версию сайта, обслуживаемую на поддомене (часто поддомене третьего уровня, обозначаемом «m» ; например, http:// m .website.com/; и/или параметрах URL, как &app=m&persist_app=1на YouTube). Сегодня использование двух отдельных статических сайтов для просмотра на мобильных устройствах и компьютерах в значительной степени прекращается, вместо этого используются серверные скрипты для обслуживания динамически генерируемых страниц или для динамического решения, какую версию статической страницы обслуживать, хотя использование независимых сайтов для мобильных устройств и компьютеров все еще можно часто наблюдать. Хотя многие веб-сайты используют либо адаптивные , либо адаптивные методы веб-дизайна, они не являются взаимоисключающими , и лучшие практики для создания наиболее универсально читаемого разработанного контента используют комбинацию этих двух методов для поддержки полного спектра аппаратного и программного обеспечения . [2]
Наличие отдельных интерфейсов позволяет клиентам, испытывающим технические проблемы с одним из них, переключиться на другой, с вероятностью того, что проблема не возникнет.
Адаптивный веб-дизайн — это процесс обнаружения на стороне сервера, который выбирает макет дизайна и размер для отображения. Можно использовать все типы макетов веб-дизайна, включая адаптивный макет. Адаптивный дизайн будет обслуживать разные версии страницы для разных устройств на основе общих размеров экрана и разрешений. Термин был впервые введен Аароном Густафсоном в его книге 2011 года «Адаптивный веб-дизайн: создание богатых впечатлений с помощью прогрессивного улучшения» . [2]
Адаптивный веб-дизайн использует несколько макетов страниц для одной веб-страницы и иногда прогрессивное улучшение (PE). Адаптивная модель — это макет «мобильный отдельный», в отличие от « мобильный первый » JavaScript и прогрессивного улучшения адаптивного веб-дизайна. «Мобильный отдельный» — это та же концепция, что и «мобильный первый», за исключением того, что макет дизайна AWD должен иметь отдельный базовый мобильный макет в отличие от единого макета дизайна адаптивного веб-дизайна.
Браузеры базовых мобильных телефонов не понимают JavaScript или медиа-запросы , поэтому рекомендуется создать базовый мобильный макет и использовать прогрессивное улучшение для смартфонов, а не полагаться на постепенное ухудшение, чтобы заставить работать сложный сайт с большим количеством изображений. [3] [4]
Адаптивный дизайн — это широкий подход к веб-дизайну, который фокусируется на пригодности для различных интерфейсов , а не ограничивает себя форматом, предназначенным для отображения на настольном компьютере. Это особенно важно, поскольку мобильные устройства теперь имеют большую долю рынка, чем настольные компьютеры. [5] Хотя динамические веб-практики существуют уже более двух десятилетий, динамический дизайн в отношении графической компоновки, особенно для просмотра на мобильных устройствах, является более новой концепцией. Новые технологии, такие как CSS3 Media Queries , AJAX, HTML5 и JavaScript, были сосредоточены вокруг адаптивного дизайна, который, как правило, более эффективен и эффективен, чем адаптивный дизайн. Переход от настольного компьютера к мобильному устройству привел к отходу от адаптивного веб-дизайна и переходу к адаптивному веб-дизайну. [ необходима цитата ]
Адаптивный веб-дизайн работает над определением размера экрана во время запроса HTTP GET , до того, как страница будет предоставлена, и загружает соответствующим образом разработанную страницу, специфичную для user-agent . С адаптивной стандартной компоновкой «обычно вы разрабатываете адаптивный сайт для шести распространенных размеров экрана: 320, 480, 760, 960, 1200 и 1600». [6] [7] Это было не только обычной практикой для оптимизации под мобильные устройства, но и переходным периодом между мониторами с низким разрешением 4:3 и ЖК - мониторами с высоким разрешением 16:9 . Стандартный адаптивный веб-дизайн был необходим для создания жидких макетов для различных доступных мониторов. [6]
В самые первые дни смартфонов размеры экранов сильно различались, а в мобильных веб-браузерах отсутствовали расширенные функции и плагины, используемые для создания насыщенных сред в настольных браузерах. Кроме того, использование мобильного интернета было дорогим и очень медленным, поэтому приходилось разрабатывать «урезанные» мобильные страницы с меньшим количеством или более низким качеством изображений и резким переносом текста для удобства чтения. Следующее крупное изменение в адаптивном стандартном веб-дизайне произошло с появлением iPhone и широкой доступностью 3G , при этом 3G резко увеличило скорость соединения и доступную пропускную способность. Стало обычным для сайтов иметь две версии: мобильный макет, оптимизированный для iPhone (обычно с префиксом поддомена «m»), и макет для настольного компьютера. Мобильные версии по-прежнему обычно были «уменьшенными» с изображениями более низкого качества и иногда в них отсутствовал контент, такой как видео, чтобы сократить время загрузки. На дизайн также повлияло распространение устройств с сенсорным экраном, на веб-сайтах использовались более крупные ссылки и кнопки, которые упрощали навигацию с использованием пальца в качестве указателя. Позже, широкое внедрение быстрой мобильной широкополосной связи 4G LTE означало, что больше не было необходимости понижать качество мобильных медиа или обрезать контент для работы с медленной скоростью соединения. По мере того, как ОС Android от Google набирала популярность и вносила больше вариаций на рынок смартфонов, многостраничная парадигма стандартного динамического веб-дизайна стала менее распространенной, хотя она все еще находит некоторое применение для полного разделения дизайна контента для сенсорных экранов от дизайна настольных компьютеров. При интеграции с материальным дизайном или макетом и цветовыми схемами, специфичными для устройств, некоторые разработчики считают более простым создание трех шаблонов страниц (Android, iPhone/iOS, настольный компьютер), изменяя значки и цвета между ними, при этом используя медиазапросы для определения макета. Такая практика приводит к значительному упрощению дизайна страниц и кода, но обновление требует редактирования всех трех шаблонов.
Нет единого мнения по поводу наименования, и как адаптивный, так и отзывчивый используются для обозначения одного и того же поведения, но то, что обычно называют отзывчивым дизайном, использует меньше макетов страниц, чем стандартный адаптивный дизайн, как правило, только один. Адаптивный дизайн считается менее перспективным и менее эффективным, чем отзывчивый дизайн, поскольку размеры экранов обычных устройств постоянно меняются и сильно варьируются. Гибридная модель адаптивного/отзывчивого дизайна включает несколько версий страниц с отзывчивыми макетами. [6]
Стандартные адаптивные макеты также могут использовать адаптивное масштабирование страницы в зависимости от области просмотра (как в адаптивном веб-дизайне), но подход создания различных макетов для разных устройств или разрешений в настоящее время встречается редко и обычно применяется там, где сайт нацелен на пользователей мобильных устройств без возможности подключения к Интернету и устаревших смартфонов, которые не могут использовать технологии, требуемые новыми адаптивными дизайнами. [6]
Существуют вариации этих концепций, которые стирают границы между адаптивным и отзывчивым веб-дизайном, например, «представления» Django и некоторые аспекты AJAX , которые обслуживают различные версии страниц, в том числе для обеспечения гибкости на разных устройствах, однако страницы генерируются динамически, а не статически. [7] [8] [2]
