Адаптивно-отзывчивый: разбираемся в терминологии
Анонс веб-сайта, позволяющего сравнить на примере простой страницы фиксированный, резиновый, адаптивный и отзывчивый типы макетов, вызвал большой резонанс в веб-сообществе. Несмотря на то, сколько всего уже было сказано об отзывчивом и адаптивном веб-дизайне, энтропия непонимания принципиальной разницы подходов в веб-разработке имеющих подобные названия только возрастает.
Я постараюсь разложить все по полочкам и объяснить принципиальную разницу между типами макетов и подходами к веб-разработке.
Типы HTML-макетов
Под макетом в данной статье подразумевается не изображение в формате PSD, а уже готовая разметка HTML-страницы.
Фиксированные макеты
Фиксированный макет — макет страницы, ширина контента которой жестко задана в пикселях и не меняется в зависимости от размеров окна браузера.
Фиксированная верстка является пережитком прошлого, когда ширина контента страницы была строго продиктована разрешением самых популярных экранов (800 на 600, затем 1024 на 768 и так далее). Даже сейчас еще легко можно встретить сайты с фиксированной шириной контента в 960 пикселей.
Резиновые макеты
Резиновый тип макетов еще называют тянущимся (дословно с английского “жидкие”, liquid, жидкость), так как контент принимает размер любого экрана за счет использования для структурных элементов относительных показателей (зачастую, процентных) вместо статических, в пикселях.
Данный тип макетов в чистом виде также является устаревшим, так как учитывает только один тип устройств и не заботится о том, как контент будет выглядеть на экранах с критически большой или маленькой шириной.
Адаптивные макеты
Адаптивный макет является очень близким к следующему типу — отзывчивому и базируется на использовании медиа запросов (англ. media queries) для адаптации контента под различные параметры экранов.
Главное отличие от отзывчивого типа состоит в том, что при данном типе верстки страница «прыгает» по контрольным точкам, смещаясь и адаптируя контент каждый раз к наиближайшей следующей из них. То есть медиа-запросы описывают фиксированные положения контента для каждой из контрольных точек. В итоге мы имеем набор из нескольких фиксированных макетов для работы с различными разрешениями экранов.
Минус такого подхода к верстке страниц очевиден — мы не можем предугадать как будет выглядеть контент на всех устройствах, учитывая что расстояния между контрольными точками могут быть достаточно большими.
Данный подход наиболее актуален, если критические точки описывают не ширину наиболее часто встречающихся устройств, а обусловлены дизайном самой страницы.
Отзывчивые макеты
Отзывчивый тип макетов страниц в отличие от адаптивного основывается на принципе «резины», но так же как и он используют медиа запросы для приспособления контента под ширину устройства.
В итоге, отзывчивая страница не «прыгает» по контрольным точкам, а плавно изменяется между ними.
Смешанный
Не стоит отрицать, что существуют и иные решения для создания макетов.
Например адаптация под различные устройства может быть чем-то между адаптивной и отзывчивой версткой страниц. Данная ситуация довольно часто встречается как попытка оптимизации уже существующего сайта под различные типы устройств («mobile last»).
Подходы к созданию веб-сайтов и веб-приложений
Сейчас мы посмотрим на подходы и стратегии разработки веб-сайтов. Это нечто большее, чем способ верстки страницы, так как зачастую включает в себя и решение проблем на уровне пользовательского взаимодействия, реструктуризации страницы или даже адаптации предоставляемого пользователю контента.
Отзывчивый веб-дизайн
Отзывчивый веб-дизайн был описан впервые в статье на A List Apart. Название подхода взято по примеру отзывчивой архитектуры, области архитектурной практики и исследований. Отзывчивая архитектура здания предполагает адаптацию самого строения (формы, цвета) в зависимости от состояния окружающей среды.
В 2011 Маркотте опубликовал одноименную книгу, в которой он собрал в единую технику некоторые давно известные приемы адаптации контента.
Этан не изобрел ничего нового на тот момент, а просто систематизировал знания и предложил решения проблем для старых устройств и браузеров. Но это и было действительно то, что нужно, во время множества ОС, устройств и браузеров.
Подход основывается на резиновых макетах, медиа запросах и отзывчивых («резиновых») медиа-элементах (изображения, видео).
Следовательно отзывчивый макет страницы плюс использование отзывчивых изображений и видео.
Заметим что техника отзывчивого веб-дизайна использует только средства HTML и CSS для решения задачи адаптации контента под различные устройства.
Адаптивный веб-дизайн
% + media-queries + %-media + JavaScript + magic
Прежде чем ознакомиться с такой стратегией в разработке, как адаптивный веб-дизайн, стоит немножечко поговорить о других стратегиях, концепциях и техниках, на которых базируется данный подход. А именно, “сначала мобильные” и “прогрессивное улучшение”.
Прогрессивное улучшение — это стратегия веб-разработки, которая основывается на доступности контента и семантике на самом низком уровне, а остальные же уровни, такие как стилизация (CSS) и дополнительные скрипты (JavaScript), — лишь дополнения, которые делают жизнь проще. Стратегия была представлена в 2003 году на знаменитой конференции SXSW Стивеном Чампионом. В отличие от концепции постепенной деградации, когда разработчики ориентируются только на современные браузеры и “урезают” возможности для более старых, прогрессивное улучшение идет с обратной стороны, делая контент доступным для наибольшего количества устройств и браузеров. Так как эта проблема в наше время стоит довольно серьезно, данная стратегия даже была названа Top #1 трендом в веб-дизайне на 2012-й год.
В уже далеком 2011-ом Люк Вроблевски с помощью «A Book Apart» выпустил книгу под названием «Mobile First», которая, как и многие книги этого издателя, быстро стала бестселлером. Несложно догадаться, что книга освящает стратегию, которая предполагает, что вся разработка от планирования бизнес-целей, UX и веб-дизайна до последней строчки кода будет вестись начиная от самой компактной «мобильной версии» до настольных компьютеров, приставок или телевизоров.
Адаптивный веб-дизайн как подход был описан в одноименной книге Аарона Густафсона. Подход берет лучшее из идей «сначала мобильные» и прогрессивного улучшения и дополняет их. В простом изложении данная стратегия предполагает использование чистого HTML как базиса и дальнейших улучшений и фич за счет использования слоев CSS и JavaScript. Если для какого-то определенного браузера или устройства доступна какая-то новая фича, то ее можно использовать только после проверки на ее доступность, сохраняя обратную совместимость с не поддерживающими устройствами (например, тач-события).
«Чистый HTML работает везде.»
— Кто-то на какой-то конференции
В последнее время довольно занятным является спор об адаптации предоставляемого контента как такового под различные устройства и их возможности. Несомненно, имеет место существовать предположение, что если я захожу на сайт с какого-нибудь древнего телефона, то, скорее всего, все, что я хочу отыскать — это адрес и телефонный номер организации, если со смарт тв — то почитать новости или посмотреть видео-ролики, что еще более вероятно. Данную гибкость в предоставляемом пользователю контенте в некоторой мере также можно отнести к стратегии адаптивного веб-дизайна. Но не стоит забывать, что пользователи — это городские сумасшедшие с соседнего подъезда и зачастую нельзя предугадать ситуацию, в которой находится пользователь в данный момент времени, основываясь на устройстве, наборе его характеристик и поддерживаемых фич, или даже скорости соединения.
Стоит также отметить, что адаптивный веб-дизайн — это стратегия разработки веб-сайтов и веб-приложений, в то время, когда отзывчивый веб-дизайн является техникой адаптации макета под различные устройства; зачастую, составной частью адаптивного веб-дизайна.
И в заключение
«Вы мне это прекратите!»
— Братья Стругацкие, «Понедельник начинается в субботу» (1965)
Ничего нового придумано не было. Прогрессивное улучшение как подход существовал с 2002. Резиновые макеты и медиа-запросы еще старше (первый черновик был опубликован еще в апреле 2001-го!). Проблема оптимизации под различные устройства и платформы встала наиболее остро с развитием смартфонов (и возможности открывать обычные веб-страницы на различного рода устройствах), а в последствии и планшетных компьютеров и других устройств, таких как Smart TV или игровых консолей. Но ускорение развития и разработки веб-стандартов, а так же систематизация подходов к веб-разработке позволило ее в некотором смысле решить.
В наше время довольно остро стоит вопрос с терминологией и ее пониманием в сообществе веб-разработчиков. Такая тенденция появилась неспроста и наблюдается не только на пост-советском пространстве, но и во всем мире (проверить достаточно просто — запросить в Google «adaptive vs. responsive web design» и посмотреть разнообразие в понимании терминологии в различных постах).
Еще одним ярким примером такого недопонимания является недавний пост русского дизайнера Ильи Бирмана.
Материалы для дальнейшего чтения
- 3 articles that discuss the differences between “responsive” and “adaptive” web design
- What’s the difference between adaptive and responsive web design?
- Responsive Web Design
- Резиновый дизайн, респонсив и адаптив
© 2013 Frontender Magazine
В чем отличия отзывчивой от адаптивной верстки?
Я верстаю резиновые макеты, использую @media(max-width: ***px) <> и называю это адаптивной версткой. Прав ли я и каковы отличия между отзывчивой и адаптивной версткой, если это не одно и тоже? Хотя читал что есть отличия, но все так расписано, что ничего не понятно.
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 27 дек 2012 в 14:13
2,868 12 12 золотых знаков 57 57 серебряных знаков 103 103 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Данный вопрос на мой взгляд неплохо освещен в статье: Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? на хабре. В конце статьи есть два предложения, которые описывают всю суть:
Отзывчивый веб-дизайн является частью адаптивного. Отзывчивый веб-дизайн = «резиновый» макет, в то время как адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение.
Отслеживать
ответ дан 27 дек 2012 в 14:21
Pavel Azanov Pavel Azanov
6,734 17 17 серебряных знаков 31 31 бронзовый знак
Т.е. отзывчивый — это те самые простые резиновые макеты. Табличную верстку прошлых годов тоже можно назвать отзывчивой?
27 дек 2012 в 14:25
да, в случае с отзывчивым речь идет лишь о резиновых макетах. с табличной версткой думаю стоит осторожнее, отчасти да, но тем не менее подход несколько другой, и значительно менее гибкий.
27 дек 2012 в 14:31
Резиновый дизайн не означает отзывчивый. И табличная верстка уж точно не отзывчивая. В отзывчивой верстке у вас может меняться лейаут (из трехколоночного в одноколоночный или двухколоночный — в зависимости от ширины экрана), а в резиновой верстке просто растягиваются колонки и зачастую с соххранением общего лейаута.
27 дек 2012 в 14:32
@iKuzko, хорошо, тогда если это отзывчивый, то что такое адаптивный. До вашего комментария я был уверен, что это адаптивный)
27 дек 2012 в 14:34
адаптивный дизайн это далеко не только верстка. суть в том, чтобы предоставить пользователю наиболее удобный и функциональный интерфейс на любом устройстве, не смотря на ограничения такового (размер экрана, другой метод ввода)
Отзывчивый и адаптивный дизайн сайта
Интернет-пользователи просматривают сайты на разных устройствах с экранами различных размеров. Размеры экранов постоянно меняются, поэтому важно чтобы сайт адаптировался к любому из них. Существует два основных подхода для создания сайтов, легко адаптирующихся для разных типов устройств:
Responsive Design (RWD) — отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;
Adaptive Design (AWD) — адаптивный дизайн, или динамический показ — проектирование сайта с условиями, которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины.
- Содержание:
- 1. Приемы отзывчивого дизайна
- 2. Настройка области просмотра с помощью мета-тега viewport
- 3. Универсальные шаблоны
- 4. Адаптивный дизайн
- 5. В чём разница между отзывчивым и адаптивным веб-дизайном
- 6. Полезные сервисы и инструменты
1. Приемы отзывчивого дизайна
Философия отзывчивого веб-дизайна заключается в том, что сайт был удобным для просмотра с любого устройства, независимо от размера экрана. Фраза отзывчивый дизайн была придумана Ethan Marcotte в 2011 году. Главная особенность отзывчивого веб-дизайна — за счёт подвижной (fluid) сетки макет автоматически реагирует на изменение размеров экрана, раздуваясь или сужаясь, как воздушный шар.
Отзывчивый дизайн (англ. Responsive Web Design) объединяет в себе три методики — гибкий макет на основе сетки, гибкие изображения и медиазапросы.
Гибкость макета базируется на использовании относительных единиц измерения вместо фиксированных пиксельных значений, что позволяет регулировать ширину в соответствии с доступным пространством.
Гибкость текстового содержимого достигается путем вычисления размеров шрифта относительно размера шрифта в браузерах по умолчанию 16px , например для фиксированного размера font-size: 42px относительный размер равен 42px / 16px = 2.625em .
Проблема гибких изображений решается с помощью правила img для всех картинок на сайте. Это правило гарантирует, что изображения никогда не будут шире, чем их контейнеры и никогда не превысят своих истинных размеров на больших экранах.
Медиазапросы изменяют стили на основании характеристик устройства, связанных с отображением контента, включая тип, ширину, высоту, ориентацию и разрешение экрана. С помощью медиазапросов создается отзывчивый дизайн, в котором к каждому размеру экрана применяются подходящие стили.
Дополнительные приёмы отзывчивого дизайна
Масштабируемая векторная графика — используйте svg-изображения, которые масштабируются до любого размера без потери качества и хорошо выглядят на дисплеях Retina.
Карточные интерфейсы — используйте так называемые карточные интерфейсы — прямоугольные фигуры с закруглёнными углами, которые представляют собой контейнеры для контента. Такие блоки являются самодостаточными единицами интерфейса и их легко перемещать по макету.
Оставьте только самое необходимое — хороший приём, особенно для отзывчивого дизайна. Создавайте отзывчивые и дружелюбные минималистические интерфейсы, которые приобретают всё большую популярность в настоящее время.
Расставьте приоритеты и правильно скройте контент — используйте скрытые элементы управления, особенно для устройств с небольшими экранами. Всплывающие окна, табы, off-canvas меню и другие подобные приёмы помогут уменьшить количество элементов на странице. Освободив пространство от лишних элементов, вы сделаете интерфейс удобным и дружелюбным для пользователя.
Создайте большое кликабельное пространство для кнопок — чем больше активная область кнопки, тем легче пользователю взаимодействовать с ней.
Добавьте интерактивности в свои интерфейсы — в ответ на действие пользователя создайте ответное действие — анимацию, которая будет работать при наведении на элемент на десктопных устройствах и при прикосновении к элементу на мобильных устройствах.
2. Настройка области просмотра с помощью мета-тега viewport
Чтобы мобильные браузеры для операционных систем Android и iOS не изменяли автоматически размер страниц сайта, используется специальный тег с атрибутом name=»viewport» . В данном теге допускается устанавливать определенное значение для параметров width и initial-scale :
— initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1;
— width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.
В данном примере содержимое в окне браузера будет в 2 раза больше по сравнению с физическим размером.
Также тег можно использовать для контроля над тем, насколько пользователи могут увеличивать и уменьшать ширину страницы:
Данный код позволит увеличивать ширину страницы до величины, равной 3-х кратной ширине экрана устройства и уменьшать её до половины ширины экрана устройства.
Лишить пользователей возможности масштабирования можно с помощью атрибута user-scalable :
3. Универсальные шаблоны
Большая часть макетов, используемых для создания отзывчивого веб-дизайна, относятся к одной из пяти категорий шаблонов, определенных Люком Вроблевски:
Mostly Fluid (Наиболее резиновый),
Column Drop (Столбцы друг под другом),
Layout Shifter (Двигающийся макет),
Tiny Tweaks (Крошечные изменения),
Off Canvas (Вне экрана).
В некоторых случаях на странице может использоваться сочетание шаблонов, например Column Drop и Off Canvas.
3.1. Mostly Fluid
Популярный макет, состоит главным образом из резиновой сетки. На экранах большой или средней ширины ее размер обычно остается неизменным, на больших экранах регулируются только поля. На небольших экранах резиновая сетка вызывает перерасчет макета для основного контента, а столбцы размещаются друг под другом. Достоинством шаблона является то, что в нем необходима только одна контрольная точка между небольшими экранами и экранами большого размера.
3.2. Column Drop
Столбцы размещаются один за одним по вертикали, если ширина окна не может отобразить весь контент. В результате столбцы будут располагаться вертикально друг под другом. Выбор контрольных точек для этого шаблона макета зависит от контента и определяется для каждого варианта дизайна отдельно.
3.3. Layout Shifter
Наиболее отзывчивый шаблон, так как в нем предусмотрено наличие нескольких контрольных точек для экранов различной ширины. Основным отличием этого макета является то, что вместо перерасчета дерева отрисовки и размещения столбцов друг под другом перемещается контент. Из-за значительных различий между основными контрольными точками, поддержка этого макета является более сложной задачей, кроме того, вероятно, придется менять не только общий макет контента, но и его элементы.
3.4. Tiny Tweaks
Шаблон вносит небольшие изменения в макет, например, регулирует размер шрифта, меняет размер изображений или перемещает контент. Он хорошо работает на макетах, состоящих из одного столбца, например, одностраничные сайты и статьи с большим количеством текста.
3.5. Off Canvas
Контент, который используется редко, например, элементы навигации или меню приложения, размещаются за пределами экрана, и показываются только тогда, когда это позволяет сделать размер экрана. На небольших экранах контент открывается одним щелчком.
4. Адаптивный дизайн
В отличие от отзывчивого дизайна, адаптивный дизайн (Adaptive Web Design) ориентируется на размеры устройств. Он использует несколько статичных макетов для разных типов устройств (мобильные устройства, планшеты, настольные компьютеры), базируясь на контрольных (переломных) точках. То есть макеты загружаются при определенных размерах окна браузера устройства, а переходы между макетами происходят скачкообразно, а не плавно.
Обычно адаптивные макеты имеют шесть вариантов макетов в зависимости от ширины экрана:
320
480
760
960
1200
1600.
В адаптивных макетах главную роль играет функциональность, то есть при создании дизайна учитываются особенности устройств, например, сенсорное управление для мобильных устройств или большие пространства для настольных мониторов.
Основные приёмы адаптивного дизайна
Придерживайтесь последовательности — любой сайт должен создать доверительные отношения с пользователем, чтобы он чувствовал себя комфортно при навигации и взаимодействии с ним. Последовательный дизайн подразумевает, что при переходе на другую страницу сайта у пользователя не возникло чувства, что он попал на другой сайт. Уделяйте внимание мелким деталям, выстраивайте визуальную иерархию, важные элементы выделяйте жирным начертанием. Используйте последовательную цветовую схему по всему сайту, повторно используйте одни и те же элементы для различных ситуаций, например, один и тот же дизайн всплывающих уведомлений.
Используйте сетку — структура из 12-ти колонок является более предпочтительной для управления шириной колонок и отступами между ними.
5. В чём разница между отзывчивым и адаптивным веб-дизайном
Для создания отзывчивых макетов используются медиазапросы и относительные размеры элементов сетки, заданные с помощью % . В адаптивном дизайне серверные скрипты сначала определяют тип устройства, с помощью которого пользователь пытается получить доступ к сайту (настольный ПК, телефон или планшет), затем загружает именно ту версию страницы, которая наиболее оптимизирована для него. Для элементов сетки задаются фиксированные px размеры.
Поэтому основное отличие между этими приёмами — отзывчивый дизайн — один макет для всех устройств, адаптивный дизайн — один макет для каждого вида устройства.
6. Полезные сервисы и инструменты
Android SDK Android-эмулятор для Windows, Linux и Mac OS X. iOS-симулятор доступен только для пользователей Mac OS X и является частью пакета Xcode (его можно бесплатно скачать из Mac App Store).
Adaptive Images PHP-скрипт, работающий на любом веб-сайте, определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.
Mydevice.io Таблицы соответствия физических размеров устройств css-значениям высоты и ширины, а также значение pixel-ratio для мобильных устройств.
Mediaqueri.es Коллекция веб-сайтов, использующих медиазапросы и отзывчивый веб-дизайн.
Skeleton CSS-фреймворк на основе 12-ти колоночной разметки, максимум 960px. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильными версиями браузеров.
Bootstrap Набор инструментов для разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
«Отзывчивый веб-дизайн» (Responsive Web Design) является частью более широкого понятия, которое называется «Адаптивный веб-дизайн» (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, «резиновый» макет, гибкие изображения и медиазапросы).
С другой стороны, «Адаптивный веб-дизайн» включает в себя гораздо больше, чем просто «резиновый» макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия «Адаптивный веб-дизайн» и «Адаптивный макет» (Adaptive layout), т.к. это совершенно разные вещи.
И, наконец, «Адаптивный макет» означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с «резиновыми» блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.
Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое «Адаптивный макет», поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование «резинового» макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье «Switchy McLayout: An Adaptive Layout Technique» (перевод).
Ссылки
- Responsive Design. I don’t think that word means what you think it means.
- On Adaptive vs. Responsive Web Design
- Responsive & Adaptive Web Design
- Brad Frost on Google+
- HTML
- CSS
- CSS3
- Responsive Web Design
- Отзывчивый веб-дизайн
- Adaptive Web Design
- Адаптивный веб-дизайн
- Progressive enhancement
- Прогрессивное улучшение