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

adaptive-design

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

Responsive Design (RWD) — отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;

Adaptive Design (AWD) — адаптивный дизайн, или динамический показ — проектирование сайта с условиями, которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины.

1. Приемы отзывчивого дизайна

Философия отзывчивого веб-дизайна заключается в том, что сайт был удобным для просмотра с любого устройства, независимо от размера экрана. Фраза отзывчивый дизайн была придумана Ethan Marcotte в 2011 году. Главная особенность отзывчивого веб-дизайна — за счёт подвижной (fluid) сетки макет автоматически реагирует на изменение размеров экрана, раздуваясь или сужаясь, как воздушный шар.

Отзывчивый дизайн (англ. Responsive Web Design) объединяет в себе три методики — гибкий макет на основе сетки, гибкие изображения и медиазапросы.

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

Гибкость текстового содержимого достигается путем вычисления размеров шрифта относительно размера шрифта в браузерах по умолчанию 16px, например для фиксированного размера font-size: 42px относительный размер равен 42px / 16px = 2.625em.

Проблема гибких изображений решается с помощью правила img {width: 100%; max-width: 100%;} для всех картинок на сайте. Это правило гарантирует, что изображения никогда не будут шире, чем их контейнеры и никогда не превысят своих истинных размеров на больших экранах.

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

responsive-design
Рис. 1. Отзывчивый дизайн

Дополнительные приёмы отзывчивого дизайна

Масштабируемая векторная графика — используйте svg-изображения, которые масштабируются до любого размера без потери качества и хорошо выглядят на дисплеях Retina.

Карточные интерфейсы — используйте так называемые карточные интерфейсы — прямоугольные фигуры с закруглёнными углами, которые представляют собой контейнеры для контента. Такие блоки являются самодостаточными единицами интерфейса и их легко перемещать по макету.

ui-card
Рис. 2. Pinterest, макет на основе карт

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

minimalist interfaces
Рис. 3. Hotellook, минимализм в веб-дизайне

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

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

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

2. Настройка области просмотра с помощью мета-тега viewport

Чтобы мобильные браузеры для операционных систем Android и iOS не изменяли автоматически размер страниц сайта, используется специальный тег <meta> с атрибутом name="viewport". В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1">

initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1;

width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.

<meta name="viewport" content="initial-scale=2.0, width=device-width">

В данном примере содержимое в окне браузера будет в 2 раза больше по сравнению с физическим размером.

Также тег <meta> можно использовать для контроля над тем, насколько пользователи могут увеличивать и уменьшать ширину страницы:

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5">

Данный код позволит увеличивать ширину страницы до величины, равной 3-х кратной ширине экрана устройства и уменьшать её до половины ширины экрана устройства.

Лишить пользователей возможности масштабирования можно с помощью атрибута user-scalable:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

3. Универсальные шаблоны

Большая часть макетов, используемых для создания отзывчивого веб-дизайна, относятся к одной из пяти категорий шаблонов, определенных Люком Вроблевски:
Mostly Fluid (Наиболее резиновый),
Column Drop (Столбцы друг под другом),
Layout Shifter (Двигающийся макет),
Tiny Tweaks (Крошечные изменения),
Off Canvas (Вне экрана).
В некоторых случаях на странице может использоваться сочетание шаблонов, например Column Drop и Off Canvas.

3.1. Mostly Fluid

Популярный макет,  состоит главным образом из резиновой сетки. На экранах большой или средней ширины ее размер обычно остается неизменным, на больших экранах регулируются только поля. На небольших экранах резиновая сетка вызывает перерасчет макета для основного контента, а столбцы размещаются друг под другом. Достоинством шаблона является то, что в нем необходима только одна контрольная точка между небольшими экранами и экранами большого размера.
md-patterns1

3.2. Column Drop

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

3.3. Layout Shifter

Наиболее отзывчивый шаблон, так как в нем предусмотрено наличие нескольких контрольных точек для экранов различной ширины. Основным отличием этого макета является то, что вместо перерасчета дерева отрисовки и размещения столбцов друг под другом перемещается контент. Из-за значительных различий между основными контрольными точками, поддержка этого макета является более сложной задачей, кроме того, вероятно, придется менять не только общий макет контента, но и его элементы.
md-patterns3

3.4. Tiny Tweaks

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

3.5. Off Canvas

Контент, который используется редко, например, элементы навигации или меню приложения, размещаются за пределами экрана, и показываются только тогда, когда это позволяет сделать размер экрана. На небольших экранах контент открывается одним щелчком.
md-patterns7

4. Адаптивный дизайн

В отличие от отзывчивого дизайна, адаптивный дизайн (Adaptive Web Design) ориентируется на размеры устройств. Он использует несколько статичных макетов для разных типов устройств (мобильные устройства, планшеты, настольные компьютеры), базируясь на контрольных (переломных) точках. То есть макеты загружаются при определенных размерах окна браузера устройства, а переходы между макетами происходят скачкообразно, а не плавно.

Обычно адаптивные макеты имеют шесть вариантов макетов в зависимости от ширины экрана:
320
480
760
960
1200
1600.

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

Основные приёмы адаптивного дизайна

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

Используйте сетку — структура из 12-ти колонок является более предпочтительной для управления шириной колонок и отступами между ними.

5. В чём разница между отзывчивым и адаптивным веб-дизайном

responsive-adaptive-design
Рис. 4. Отзывчивый и адаптивный дизайн на разных устройствах

Для создания отзывчивых макетов используются медиазапросы и относительные размеры элементов сетки, заданные с помощью %. В адаптивном дизайне серверные скрипты сначала определяют тип устройства, с помощью которого пользователь пытается получить доступ к сайту (настольный ПК, телефон или планшет), затем загружает именно ту версию страницы, которая наиболее оптимизирована для него. Для элементов сетки задаются фиксированные 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.

  • Создание Сайтов

    Изучал этот вопрос. Пробовал. Пришел к такому выводу, что это очередное европейское извращение над сайтами. На один сайт, как минимум три дизайна нужно. Для малого бизнеса — это вообще не приемлемо — дорого. Отдать за три сайта, а по сути за один, это какие деньги надо отвалить?

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

    Даже Артемий Лебедев писал на эту тему статью, что нормальные устройства уже продуманы под просмотр обычных сайтов. Лично я делаю сайты для ип не более 960px шириной. Такой сайт нормально смотрится на ноутах, компах и планшетах. Волне приемлемо на больших мониторах, чтобы купить товар или услугу. Можно делать и 1024px — тоже будет нормально. На планшете есть функция увеличения, если текст будет мелким.

    Конечно, я не против, чтобы делали такие сайты, кому это нравится и кому это действительно надо. Но делать это потому что так стало модно, понты, без этого, типа никуда — это глупо. Да, я могу делать такие сайты, но принципиально не делаю, по вполне понятным причинам — это извращение над изначальным дизайном сайта, это дорого для клиента, это не стоит того.

    Если клиенты — это пользователи смартфонов, то делать сайт изначально под данное разрешение. Я видел такие сайты. Конечно на обычном компе там смотрится не ахти, но такой сайт увидят единицы, все остальные увидят его в своем формате и купят то з чем они туда пришли.

    • Модно-не модно, тем не менее поисковые системы выше ранжируют сайты, адаптированные под мобильные устройства и если вы хотите иметь успешный бизнес, этот факт игнорировать нельзя. Для обычных сайтов не обязательно делать три дизайна, достаточно воспользоваться приемами адаптивного дизайна, выявить контрольные точки, в которых контент обрезается или появляется полоса прокрутки и добавить стили для этих размеров в медиазапрос. Обычно достаточно опустить сайдбар под основной контент и немного поколдовать над шапкой и футером. Для сложных проектов, таких как букинг.ком, делается мобильная версия сайта (мобильное приложение).
      Гаджет с большим экраном не всегда под рукой, а смартфон — да. Мобильная версия дизайна отличается в первую очередь тем, что не содержит лишней, второстепенной информации, и такие блоки могут убираться из верстки с помощью display: none;.
      Современным людям приходится обрабатывать большой поток информации, они постоянно куда-то спешат и поэтому большинство не хотят много читать, даже информацию о товаре/услуге. Идеальный сайт в этом плане должен выглядеть как детская азбука — слово-картинка, а всю информацию можно узнать по телефону от оператора.
      Насчёт делать сайты изначально под небольшие экраны — создатель методики адаптивного дизайна именно об этом и говорит. сначала делается функциональный дизайн для мобильных пользователей, а потом в него добавляется много разных штук, чтобы на больших экранах он не выглядел бедно.

      • Создание Сайтов

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

        Спорить не буду. Если база клиентов, действительно требует создание адаптивного сайта, и от этого зависит успех продаж, конечно лучше сделать адаптивный сайт. По крайней мере, владелец сайта отдает деньги не зря за один сайт как за три. Но если на сайт приходят 1-2 клиента из 100, с мобилы, есть ли смысл ради этого заморачиваться, изгаляться над сайтом и выбрасывать якобы второстепенное.

        У людей извращенное понимание вещей и я уже не раз в этом убеждался. Одни думают, что если создать одностраничный сайт, можно много денег заработать. Откуда такой бред? Так и с адаптивным сайтом. Если сделал адаптивный сайт, деньга попрет. Что за бред. Да и вообще, что можно увидеть в телефоне, какой сайт, учитывая что у человека пальцы как сосиски.

        • С поисковыми системами все проще — они диктуют нам свои условия, поэтому бороться с этим бесполезно.
          Бутстрап не обязательно использовать, медиазапросы можно и без него составлять.

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

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

          • Создание Сайтов

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

            Успешный сайт как раз тот сайт, над которым постоянно ведется работа по корректировке всего, что не так. Это постоянный процесс. Аудиторию предсказать не сложно. Если это школьники, студенты, там будут только мобильные устройств. Если клиенты — это люди за 50 лет, там будут пользователи ПК. и тд.

            Я считаю, что у меня на сегодня самые крутые учебники по адаптивному вебдизайну, которые я купил. Но вот не нашел я нужным, применять это в практике для клиентов. Заморочек там предостаточно с изображения, видео и даже в некоторых случаях с текстом. А повыкидывать все блоки оставить логотип и кнопку купить — это не адаптивный дизайн.

            То что происходит в Европе, нас абсолютно не должно касаться. У нас другое мировосприятие, у них другое. Они там уже с жиру бесятся и не знают какие еще придумать извращения. У них там вообще такие понятия, зачем мне переходить на сайт, дайте мне всю нужную информацию на устройство. Зажрались люди. Пальцем не хотят пошевелить.

          • Kirill Dolmatov

            Нашли проблему. Если не можете изначально проектировать сайт так, чтобы он корректно отображался на мобильных устройствах, то не надо весь тренд под плинтус загонять.
            В зависимости от сегмента, со смартфонов/планшетов заходит от 10% до 40% пользователей. Не слишком ли жирно игнорировать такой поток? Заказчик может и не понимать этого, но разработчик обязан.
            И повторюсь — нет никаких проблем верстать адаптивные сайты, причем практически без потери качества. А те минимальные потери которые появляются, связаны лишь с мобильными устройствами. На десктопах все полностью функционально.

          • Создание Сайтов

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

          • Создание Сайтов

            И про блоки адсендса не забудь — с телефон они должны адекватно просматриваться.

  • Создание Сайтов

    Вчера смотрел новую версию кабинета на яндекс вебмастере. Есть там фишка для проверки сайта для мобильных устройств. Проверил. Выдает: у вас нет тега для просмотра изображений на мобильных устройствах. Оказывается вся проблема в теге 🙂
    Тоже ребята заболели болезнью про адаптивные сайты. Я не перестану говорить, что проблема о нормальном просмотре сайта на том или ином устройстве, должна проблема не разработчиков сайтов, а проблема разработчиков устройств. Пусть у них болит голова а не у нас.

    Солидарен с А. Лебедевым по этому поводу. Вот его мнение на счет адаптивных сайтов: http://www.artlebedev.ru/kovodstvo/sections/177/ Солидарен на все 100%.
    Специально отслеживаю посетителей с мобильных устройств через вебвизор и вижу, что у всех у них мой сайт просматривается отлично. Если кому то что-то покажется мелковатым, эта область на устройствах легко увеличивается движением пальца.

    • Адаптивность не обязательно синоним мобильной версии сайта. Я пишу урок по верстке сайта, покажу на примере основные приёмы.

    • Alexandr Zolotuhin

      А вот мнение Лебедева 2 года спустя.

      http://www.artlebedev.ru/kovodstvo/sections/182/

      • Создание Сайтов

        и ничего он противоречивого не сказал спустя 2 года

  • Создание Сайтов

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

    Каким образом можно вот такой информативный сайт, сделать удобным для телефона с экраном в 3Х5. Это сто процентов будет неудобный сайт. Да и вообще, если я на ноуте кручу прокрутку, чтобы дойти конца страницы, то сколько же надо будет телефонисту крутить прокрутку, чтобы увидеть конец статьи? И каким шрифтом надо будет прописать текст для него и обучающий код? Это однозназно не реально. К тому же, на многих подобных сайтах и блогах, стоят блоки адсендса. Куда их впихнуть для любителей комфортного просматривания контента с телефона?

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

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

    • Как комментировал один пользователь, изучать веб-технологии с помощью мобильных устройств — извращение. Я с ним согласна, максимум — читать текст. Для этого можно сделать простое приложение по типу книги, естественно, ни о каких живых примерах речи не будет.
      Те, кто заинтересован в удержании клиентов любым способом, сделает мобильное приложение. Но мне кажется несколько странным и неудобным осуществлять покупку с мобильного, находясь в транспорте, максимум, чем можно заняться по дороге — лайкать фотки и читать комменты в соцсетях.
      Так что да, скорее это дань моде, но адаптивность сайта в разумных пределах вещь нужная.

  • john smith

    «Адаптивность не обязательно синоним мобильной версии сайта. Я пишу урок по верстке сайта, покажу на примере основные приёмы.» Елена, очень прошу, напиши ссылку на урок по верстке сайта, в котором описываются основные приемы. Пожалуйста.

  • Елена

    «1. Приемы отзывчивого дизайна
    …. Главная особенностьЮ отзывчивого веб-дизайна …» — опечатка в слове особенностЬ