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

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

Чаще всего это описывает использование мобильной и настольной версии страницы (или, в большинстве случаев, всего веб-сайта ), любая из которых извлекается на основе пользовательского агента, определенного в 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 до обслуживания страницы и загружает страницу, оформленную соответствующим образом, специфичную для пользовательского агента . При использовании адаптивного стандартного макета «обычно вы разрабатываете адаптивный сайт для шести распространенных ширин экрана: 320, 480, 760, 960, 1200 и 1600». ^[6]^[7] Это была не только обычная практика мобильной оптимизации, но и переходный период между 4:3 мониторами с низким разрешением ЭЛТ- и мониторами с высоким разрешением 16:9 ЖК- . Стандартный адаптивный веб-дизайн был необходим для создания гибких макетов для различных доступных мониторов. ^[6]

На заре появления смартфонов размеры экранов сильно различались, а в мобильных веб-браузерах не хватало расширенных функций и плагинов, используемых для создания богатой среды в настольных браузерах. Кроме того, использование мобильного Интернета было дорогостоящим и очень медленным, поэтому необходимо было разрабатывать «урезанные» мобильные страницы с меньшим количеством изображений или изображениями более низкого качества и четким переносом текста для удобства чтения. Следующее серьезное изменение в адаптивном стандартном веб-дизайне произошло с появлением iPhone и широкой доступностью 3G , при этом 3G значительно увеличил скорость соединения и доступную пропускную способность. Для сайтов стало обычным иметь две версии: макет для мобильных устройств, оптимизированный для iPhone (обычно с префиксом поддомена «m»), и макет для настольного компьютера. Мобильные версии по-прежнему обычно были «уменьшенными» с изображениями более низкого качества и иногда не имели такого контента, как видео, чтобы сократить время загрузки. На дизайн также повлияло распространение устройств с сенсорным экраном: на веб-сайтах использовались более крупные ссылки и кнопки, которые упрощают навигацию с помощью пальца в качестве указателя. В дальнейшем широкое внедрение Быстрый мобильный широкополосный доступ 4G LTE означал, что больше не было необходимости понижать качество мобильного мультимедиа или обрезать контент, чтобы справиться с низкой скоростью соединения. от Google По мере того, как операционная система Android стала популярной и представила больше разнообразия на рынке смартфонов, многостраничная парадигма стандартного динамического веб-дизайна стала менее распространенной, хотя она все еще находит некоторое применение для полного отделения дизайна контента для сенсорных экранов от дизайна для настольных компьютеров. При интеграции с Material Design или макетом и цветовыми схемами для конкретного устройства некоторым разработчикам проще создать три шаблона страниц (Android, iPhone/iOS, настольный компьютер), изменяя значки и цвета между каждым, используя медиа-запросы для определения макета. Такая практика приводит к гораздо более простому дизайну страницы и коду, но обновление требует редактирования всех трех шаблонов.

Отзывчивый веб-дизайн против адаптивного - веб дизайна

Не существует единого мнения по поводу именования, и и адаптивный, и отзывчивый используются для обозначения одного и того же поведения, но то, что обычно называют адаптивным дизайном, использует меньше макетов страниц, чем стандартный адаптивный дизайн, обычно только один. Адаптивный дизайн считается менее перспективным и менее эффективным, чем адаптивный дизайн, поскольку размеры экранов обычных устройств постоянно меняются и сильно варьируются. Гибридная модель адаптивного/отзывчивого дизайна включает в себя несколько версий страниц с адаптивным макетом. ^[6]

Стандартные адаптивные макеты также могут использовать масштабирование страницы с учетом области просмотра (как в адаптивном веб-дизайне), но подход создания разных макетов для разных устройств или разрешений сейчас встречается редко и обычно встречается там, где сайт хочет ориентироваться на пользователей неумного Интернета. -мобильные устройства и устаревшие смартфоны, которые не могут использовать технологии, необходимые для нового адаптивного дизайна. ^[6]

Существуют вариации этих концепций, которые стирают границы между адаптивным и отзывчивым веб-дизайном, например, «представления» Django и некоторые аспекты AJAX , которые обслуживают разные версии страниц, в том числе с целью обеспечения плавности работы на разных устройствах, однако страницы генерируется динамически, а не статически. ^[7]^[8]^[2]

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

AJAX — группа взаимосвязанных методов веб-разработки.
Обратная совместимость – технологическая возможность взаимодействия со старыми технологиями.
Согласование контента – обслуживание нескольких документов по одному URI.
CSS — язык таблиц стилей
Медиа-запросы — модуль CSS3, позволяющий рендерингу контента адаптироваться к таким условиям, как разрешение экрана.
Прежде всего для мобильных устройств. Подход к веб-дизайну, обеспечивающий хорошее отображение веб-страниц на различных устройствах.
Polyfill (программирование) — код для реализации функций в веб-браузерах, которые их не поддерживают.
Адаптивный веб-дизайн — подход к веб-дизайну, обеспечивающий хорошее отображение веб-страниц на различных устройствах.
Пользовательские интерфейсы — средства, с помощью которых пользователь взаимодействует с машиной и управляет ею.
Область просмотра - область просмотра многоугольника в компьютерной графике.

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

^ «Отключение устаревшего Twitter означает, что вы больше не сможете писать в Твиттере с 3DS» . ЭкранРант . 2020-11-28.
^ Jump up to: Перейти обратно: ^а ^б ^с Густафсон, Аарон. Адаптивный веб-дизайн: создание богатого опыта с помощью прогрессивного улучшения . Easy Readers, ООО; 1-е издание, 2011 г.
^ «Милая деградация против прогрессивного улучшения» . 3 февраля 2009 г. Архивировано из оригинала 13 ноября 2014 г. Проверено 21 декабря 2016 г.
^ Паркер, Тодд; Вакс, Мэгги Костелло; Джел, Скотт (февраль 2010 г.). Проектирование с прогрессивным улучшением . п. 456. ИСБН 978-0-321-65888-3 . Проверено 1 марта 2010 г.
^ «Доля настольных компьютеров и мобильных устройств в мире» . Глобальная статистика StatCounter . Проверено 19 февраля 2024 г.
^ Jump up to: Перейти обратно: ^а ^б ^с ^д Адишешиа, Эмили Грейс (1 марта 2016 г.). «Выбор веб-дизайна: адаптивный или адаптивный» .
^ Jump up to: Перейти обратно: ^а ^б Венчурный Пакт, Венчурный Пакт. «Дизайн для 10 000 экранов. 4 совета по макетированию адаптивного веб-дизайна» .
^ Фиртман, Максимилиано (30 июля 2010 г.). Программирование мобильного Интернета . стр. 512 . ISBN 978-0-596-80778-8 .

[1] «Отключение устаревшего Twitter означает, что вы больше не сможете писать в Твиттере с 3DS» . ЭкранРант . 2020-11-28.

[Gustafson-2] Jump up to: Перейти обратно: ^а ^б ^с Густафсон, Аарон. Адаптивный веб-дизайн: создание богатого опыта с помощью прогрессивного улучшения . Easy Readers, ООО; 1-е издание, 2011 г.

[3] «Милая деградация против прогрессивного улучшения» . 3 февраля 2009 г. Архивировано из оригинала 13 ноября 2014 г. Проверено 21 декабря 2016 г.

[4] Паркер, Тодд; Вакс, Мэгги Костелло; Джел, Скотт (февраль 2010 г.). Проектирование с прогрессивным улучшением . п. 456. ИСБН 978-0-321-65888-3 . Проверено 1 марта 2010 г.

[5] «Доля настольных компьютеров и мобильных устройств в мире» . Глобальная статистика StatCounter . Проверено 19 февраля 2024 г.

[EmilyGrace-6] Jump up to: Перейти обратно: ^а ^б ^с ^д Адишешиа, Эмили Грейс (1 марта 2016 г.). «Выбор веб-дизайна: адаптивный или адаптивный» .

[VenturePact-7] Jump up to: Перейти обратно: ^а ^б Венчурный Пакт, Венчурный Пакт. «Дизайн для 10 000 экранов. 4 совета по макетированию адаптивного веб-дизайна» .

[Firtman-8] Фиртман, Максимилиано (30 июля 2010 г.). Программирование мобильного Интернета . стр. 512 . ISBN 978-0-596-80778-8 .

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]