В чем смысл отзывчивой верстки

Адаптивный и Отзывчивый дизайн: Ключевые различия и преимущества

Меня зовут Александр Шулепов, Я и моя компания занимается разработкой и продвижением сайтов в России и мире более десяти лет. Мы подготовили свежий обзор адаптивный и отзывчивый дизайн. Так же я веду телеграм-канал. Подписывайтесь, там много полезного https://t.me/shulepov_codeee

Адаптивный (adaptive) и отзывчивый (responsive) дизайн — это два понятия, связанных с созданием веб-сайтов и приложений с учетом различных размеров экранов и устройств. Они имеют схожие цели, но есть некоторые различия в подходе и преимущества. Вот ключевые различия и преимущества каждого из них:

Отзывчивый дизайн (Responsive Design)

1. Гибкость внешнего вида: Отзывчивый дизайн использует гибкую сетку и медиазапросы CSS для того, чтобы элементы на веб-сайте адаптировались к разным размерам экранов. Это позволяет создать единый дизайн, который может изменяться плавно от мобильных устройств до настольных компьютеров.
2. Один URL: Сайт с отзывчивым дизайном обычно имеет один URL для всех устройств, что делает его удобным для поисковых систем и улучшает SEO.
3. Экономия времени и ресурсов: Поскольку отзывчивый дизайн использует общий код и контент для всех устройств, разработка и обслуживание такого сайта может быть более экономичным.

Адаптивный дизайн (Adaptive Design)

1. Разные версии для разных устройств: Адаптивный дизайн предусматривает создание разных версий веб-сайта или приложения для разных категорий устройств (например, мобильные, планшеты, настольные ПК). Каждая версия может быть оптимизирована под конкретные требования устройства.
2. Более высокая производительность: Поскольку адаптивный дизайн позволяет оптимизировать каждую версию под конкретное устройство, это может привести к более высокой производительности и улучшению пользовательского опыта.
3. Большая гибкость в дизайне: Адаптивный дизайн предоставляет более широкие возможности для кастомизации и создания уникальных интерфейсов для разных устройств.

Преимущества

1. Лучший пользовательский опыт: Оба подхода направлены на обеспечение удовлетворительного пользовательского опыта на всех устройствах, что повышает удовлетворенность и уровень вовлеченности пользователей.
2. Увеличение охвата аудитории: Поскольку все больше пользователей используют мобильные устройства, иметь адаптивный или отзывчивый дизайн помогает достичь более широкой аудитории.
3. Улучшенное SEO: Отзывчивый дизайн, который использует один URL, может улучшить показатели в поисковых системах. Адаптивный дизайн также может способствовать улучшению SEO благодаря более высокой производительности.

В итоге выбор между адаптивным и отзывчивым дизайном зависит от конкретных потребностей и целей проекта, а также от ресурсов, доступных для разработки и обслуживания веб-сайта или приложения. Некоторые проекты могут даже комбинировать оба подхода для оптимальных результатов.

«Респонсив? Это как?» Ликбез по верстке в вебе для дизайнеров

Статья написана в первую очередь для дизайнеров, которые хотят быть ближе к команде разработки и понимать ограничения, чтобы учитывать их в своей работе. Погнали!

6.1K показов
2K открытий
5 комментариев

Приветствую коллег дизайнеров, я веб-разработчик с полным стеком и хочу дополнить Вашу неплохую статью:

Начну с того, что можно одновременно использовать все три типа адаптации, на это ограничений нет.

— Адаптивную верстку чаще используют для того, когда на разных устройствах требуется разная HTML разметка. Или, если совсем просто, элементы расположены слишком по-разному и изменить их через CSS не представляется возможным. Либо, если на мобильных устройствах нет каких либо картинок / тяжелых видео, для них создают отдельную версию, чтобы не загружать ненужные элементы

— В отзывчивой верстке, хочется дополнить, как именно она работает для верстальщиков:
Весь сайт разделён на блоки, которые мы позиционируем между собой. Например, выстраиваем в ряд или строим из них сетку. Соседние блоки можно даже поменять местами с помощью CSS, не изменяя при этом вёрстки. Но для этого они должны быть соседними! Когда в макете блок из одной секции при адаптации перемещается в другую, разработчикам приходится прибегать к адаптации — а это лишние временные затраты!

Лично я, прежде чем начать верстать оцениваю макет на предмет, как он должен вести себя на разных устройствах.
К сожалению, дизайнеры редко делают дизайн для всех типов устройств. Чаще всего это мониторы шириной 1140 или 1920px и телефоны в 320px. Промежуточных вариантов нет, и приходится додумывать их самому (либо требовать от заказчика и дизайнера дополнительные макеты версий для планшетов).

Брейкпоинты можно расставлять как угодно, но хорошим тоном считается, когда весь сайт одновременно адаптируется наждой контрольной точке ОДНОВРЕМЕННО, и это тоже зависит от дизайна.

Отзывчивый и адаптивный дизайн сайта

Интернет-пользователи просматривают сайты на разных устройствах с экранами различных размеров. Размеры экранов постоянно меняются, поэтому важно чтобы сайт адаптировался к любому из них. Существует два основных подхода для создания сайтов, легко адаптирующихся для разных типов устройств:

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.

История одного макета: способы сделать сайт послушным

Вёрстка помогает нам выстраивать содержимое веб-страниц по определённым правилам: например, строго в соответствии с согласованным макетом или в зависимости от пользовательского устройства. Сегодня сайты неплохо умеют подстраивать свой контент и под различные размеры экранов, но так было не всегда.

Существует несколько основных подходов к вёрстке, особенности которых мы рассмотрим в этой статье на простом наглядном примере:

Структура представленной разметки страницы очень простая: сверху располагается шапка, ниже — основное содержимое страницы, которое включает в себя контейнер для карточек и сами карточки.

Для демонстрации подходов к вёрстке мы будем вносить изменения только в CSS, в то время как представленная выше HTML-разметка будет оставаться неизменной.

А теперь давайте вернёмся к обсуждению самих подходов.

Фиксированная вёрстка

Самым простым и не требующим больших усилий решением можно считать фиксированную вёрстку. Фиксированной она называется потому, что содержимое страницы, свёрстанной таким образом, никак не подстраивается под размер экрана и отображается на всех устройствах одинаково.

Для фиксированной вёрстки ширина контейнера, в котором находится весь контент, указывается в абсолютных величинах (например, px ). Помимо ширины контейнера не лишним будет указать внешние отступы, чтобы контент отображался всегда по центру экрана.

Стили, указанные после отступа, нужны для формирования сетки контента, которая будет иметь три колонки одинаковой ширины и отступы в 24px между колонками и строками. Сетка задаётся с помощью CSS Grid Layout, и если вы ещё не знакомы с возможностями этого способа раскладки, рекомендую ознакомиться с данной статьёй.

.container

Этого уже будет достаточно, чтобы добиться ожидаемого отображения веб-сайта на обычном экране компьютера.

Однако, такая вёрстка совершенно не подходит для отображения на мобильных устройствах: из-за фиксированной ширины контейнера пользователю придётся приближать страницу и скроллить её влево-вправо, чтобы иметь возможность прочитать имеющийся на ней текст.

Отзывчивая вёрстка

В таком случае мы могли бы сделать наш интерфейс чуть более дружелюбным, если бы стали использовать отзывчивую (или резиновую) вёрстку. Её особенность состоит в том, что для задания параметров используются не абсолютные, а относительные величины (например, % ), благодаря чему содержимое страницы может подстраиваться под ширину экрана.

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

Ещё мы добавим внутренний отступ, чтобы на маленьком экране карточки не прилипали к его краям. Именно из-за этих внутренних отступов в 16px слева и справа ограничения по максимальной ширине увеличиваются с 900px до 932px .

.container

Вот как поведёт себя резиновая вёрстка на средних и маленьких экранах. На планшете она отображается так же хорошо, как и на экране компьютера, но на мобильных устройствах ситуация только ухудшилась: карточки стали настолько узкими, что прочитать текст на них практически невозможно.

Адаптивная вёрстка

С ростом популярности смартфонов появилась и стала распространённой адаптивная вёрстка, которая позволила изменять стили контейнера в зависимости от ширины экрана. Этот подход может помочь нам избежать проблем, с которыми мы столкнулись выше, когда использовали резиновую вёрстку на маленьком экране.

С помощью медиа-запросов мы можем изменять сетку, по которой будет выстраиваться контент. Изначально стили указываются для минимальных размеров экрана (такой подход называется mobile-first), и если ширина экрана достигает какого-либо брейкпоинта, первоначальные стили заменяются новыми. Существует множество систем величин брейкпоинтов, но мы воспользуемся значениями, представленными здесь.

В нашем примере мы будем изменять максимальную ширину контейнера и сетку для расположения карточек: на маленьких экранах (шириной меньше 480px ) колонка будет одна, на экранах средней величины (от 480px до 768px ) — две, а на больших (шириной больше 768px ) — три. Максимально возможная ширина контейнера по-прежнему 932px , она будет установлена на экранах, ширина которых равна этому значению или больше него.

.container < max-width: 300px; padding: 0 16px; margin: 24px auto; display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; >@media screen and (min-width: 480px) < .container < max-width: 480px; grid-template-columns: repeat(2, 1fr); >> @media screen and (min-width: 768px) < .container < max-width: 768px; grid-template-columns: repeat(3, 1fr); >> @media screen and (min-width: 932px) < .container < max-width: 932px; >>

Отзывчиво-адаптивная вёрстка

Последним и самым современным подходом к вёрстке веб-сайтов является отзывчиво-адаптивная вёрстка, которая сочетает в себе положительные свойства двух рассмотренных выше подходов. Такая вёрстка подойдёт в том случае, когда приоритетная задача состоит в том, чтобы занять максимум от имеющегося пространства: например, если контент представлен не карточками, а изображениями, и нам не нужны поля слева и справа от контейнера.

При таком подходе вёрстка между брейкпоинтами ведёт себя абсолютно «резиново», но на брейкпоинтах могут меняться какие-то важные свойства отображения (в нашем случае — свойства сетки). Используя данный подход, вы можете быть уверены, что на экране абсолютно любого размера ваше приложение будет отображаться как нужно и им будет удобно пользоваться.

.container < width: 100%; max-width: 932px; padding: 0 16px; margin: 24px auto; display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; >@media screen and (min-width: 480px) < .container < grid-template-columns: repeat(2, 1fr); >> @media screen and (min-width: 768px) < .container < grid-template-columns: repeat(3, 1fr); >>

Последний рассмотренный подход к вёрстке считается самым надёжным и безопасным решением, однако, выбор типа вёрстки должен производиться индивидуально в зависимости от задач и структуры конкретного веб-приложения.

Код всех рассмотренных примеров вы можете посмотреть в песочнице.

В этой статье мы рассмотрели типы вёрстки, отличающиеся поведением на экранах разных размеров, но это лишь один взгляд на вёрстку. Существуют также иные подходы к выделению её типов, например, в зависимости от используемых HTML-тегов, но об этом мы поговорим уже в следующих статьях.

• вёрстка
• верстка
• адаптивность
• адаптивная вёрстка
• резиновая вёрстка
• фиксированная вёрстка

• Блог компании АО «ГНИВЦ»
• Веб-разработка
• CSS
• HTML