Отзывчивый дизайн: лучшие практики и примеры

Что такое отзывчивый веб-дизайн?

Отзывчивый дизайн — это процесс разработки сайта, который адаптируется под устройство посетителя, будь то компьютер, планшет или смартфон. Разработчики используют CSS-медиа-запросы, чтобы установить контрольные точки (breakpoints) для разных экранов, — так пользователи смогут просматривать сайт на любых девайсах без каких-либо ограничений.

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

Почему отзывчивый дизайн — это важно?

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

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

По данным Google Search Central, "в США 94% обладателей смартфонов ищут нужную информацию со своих телефонов. Интересно, что 77% мобильных поисковых запросов производятся дома или на работе — то есть там, где, скорее всего, есть обычный компьютер".

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

Google предлагает бесплатный тест “Mobile-Friendly Test”, который поможет оценить, насколько ваш сайт оптимизирован для смартфонов.

Отзывчивый дизайн: подход

Есть 2 основных фактора, которые должен учитывать дизайнер при разработке отзывчивого сайта:

• Контрольные точки;
• Визуальный контент. 

Контрольные точки

UX-дизайнер должен установить контрольные точки и оптимизировать макеты для нескольких устройств. В большинстве случаев создается 3 версии сайта:

• для смартфона/мобильного телефона;
• для планшета;
• для обычного компьютера. 

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

• смартфон/мобильный телефон — портретная ориентация;
• смартфон/мобильный телефон — альбомная ориентация;
• планшет — портретная ориентация;
• планшет — альбомная ориентация;
• обычный компьютер. 

Визуальный контент

К визуальному контенту относятся изображения, видео и GIF-файлы. Все эти элементы требуют много ресурсов и могут долго загружаться на мобильных устройствах, поэтому их размер необходимо уменьшить — сжать или оптимизировать файлы другим способом.

10 лучших практик отзывчивого дизайна

1) Гибкость.

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

2) Меняйте изображения. 

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

У Mozilla есть отличная статья об отзывчивых изображениях с рекомендациями для дизайнеров и разработчиков.

3) Используйте векторную графику (SVG). 

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

4) Позаботьтесь о контрольных точках. 

У каждой веб-страницы должно быть как минимум 3 контрольные точки (для мобильных устройств, планшетов и компьютеров). Как упоминалось выше, мы рекомендуем использовать 5 точек для максимальной гибкости. Иногда дизайнерам также нужно учесть, как сайт будет работать на устройствах iOS и Android.

5) Подумайте о карточном интерфейсе. 

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

6) Обратитесь к минимализму. 

Вот 3 причины, по которым минимализм можно назвать самым эффективным решением для отзывчивого интерфейса:

• Чем меньше контента, тем меньше беспорядка — в этом случае людям проще читать и воспринимать информацию.
• Проще поддерживать единообразие на различных устройствах и экранах разного размера.
• Веб-страницы с меньшим количеством контента, HTML, CSS и Javascript загружаются быстрее, что делает опыт посетителей приятнее и улучшает SEO.

7) Подход mobile-first (“сначала мобильные”). 

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

Узнайте больше об этом подходе из нашей бесплатной электронной книги "Отзывчивый и адаптивный веб-дизайн", где мы анализируем сайты 10 крупных компаний, включая Facebook и Hulu.

8) Расставляйте приоритеты и скрывайте контент. 

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

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

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

9) Увеличивайте кликабельную область кнопок. 

Закон Фиттса (описан в книге "Лучшие практики дизайна взаимодействия: Книга I") гласит, что кнопки с большой кликабельной областью облегчают взаимодействие пользователя с интерфейсом. Кроме того, дизайнер должен оставить достаточно свободного пространства между ссылками и кнопками, чтобы люди случайно не нажали не туда. 

10) Изучайте конкурентов и лидеров отрасли. 

Один из лучших способов оставаться в курсе последних тенденций отзывчивого веб-дизайна — исследование конкурентов и лидеров отрасли. Например, если вы разрабатываете сайт электронной коммерции, посмотрите, как это делают крупные мировые бренды Nike, Asos, H&M и другие. Такие компании тратят миллионы на исследования и тестирование лучших практик, так почему бы не использовать соответствующие разработки в своих интересах.

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

Мы разберем 3 всемирно известных сайта с правильным отзывчивым дизайном.

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

1. The Guardian

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

Давайте начнем анализ The Guardian с самого маленького экрана в соответствии с подходом mobile first:

Смартфон

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

• В верхней части мы видим баннер, который включает все самое необходимое: кнопку входа в систему, поиск и название сайта.
• Прямо под ним расположены наиболее популярные пункты меню (“главная” — иконка дома, "США", "мир" и т.д.) для быстрого доступа. The Guardian скрывает дополнительную навигацию за иконкой гамбургера (в соответствии с принципом постепенного раскрытия информации). 
• Главная статья с интригующим изображением занимает большую часть экрана. Так дизайнер показывает, что это самый важный элемент на странице. 
• Прокрутив страницу вниз, пользователи могут быстро получить доступ к нескольким второстепенным публикациям, что упрощает поиск и дает им ощущение контроля над ситуацией.

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

Планшет

• В планшетной версии над баннером размещено рекламное объявление, что выгодно The Guardian с точки зрения бизнеса.
• Сам баннер остается прежним, но в нем нашлось место для дополнительных элементов (пункт "вакансии" и выбор страны), иконок с подписями и подзаголовка под логотипом. 
• Гамбургер-меню осталось, но в навигации появилось больше видимых категорий, чем в мобильной версии.
• Самое существенное отличие заключается в том, что на планшете отображается больше статей, а количество колонок увеличивается с 1 до 4. Креативное применение карточного интерфейса позволяет дизайнерам расставить статьи в приоритетном порядке — для создания иерархии используются карточки разных размеров.

Десктоп

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

Все версии сайта состоят из одних и тех же компонентов — карточек, имеют схожую навигацию и брендинг. Единственное существенное различие — количество статей на экране.

2. Smashing Magazine

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

Смартфон

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

Планшет

Контент остается прежним, но кнопка меню исчезает, и теперь мы видим все навигационные ссылки. Под ними появляются категории контента для быстрого доступа к соответствующим материалам. Справа размещается боковая панель с полем поиска, формой подписки на рассылку и рекламой продуктов Smashing Magazine, что делает дизайн более эффективным для достижения бизнес-целей.

Десктоп

Десктопная версия сайта Smashing Magazine практически идентична планшетной, но основная навигация и категории контента здесь смещены влево.

Единственное, что остается неизменным на всех устройствах, — это контент. Поскольку блог Smashing Magazine чрезвычайно популярен, компания хочет, чтобы контент играл главную роль вне зависимости от того, какое устройство использует посетитель.

3. Lookout

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

Компьютер и планшет

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

Бренд Lookout стремится привлечь больше потенциальных клиентов, поэтому использует яркие зеленые CTA-кнопки для нескольких лид-магнитов. 

Смартфон

• Основная навигация скрыта за стандартной иконкой гамбургера, при этом кнопка входа в систему, CTA и иконка поиска — видимы и доступны для пользователей.
• Lookout придерживается той же дизайн-стратегии в мобильной версии сайта: мы видим заметные, яркие CTA-кнопки для лид-магнитов.

Каждый из 3 рассмотренных сайтов — отличный пример единообразного дизайна и четкой визуальной иерархии на всех устройствах: от компьютера до мобильного телефона.

Заключение

Отзывчивый веб-дизайн перестал быть чем-то, о чем дизайнер “может подумать”. Сегодня вы просто обязаны сделать его неотъемлемой частью вашего рабочего процесса.

Основной принцип — уделять особое внимание мобильной версии, а не десктопной: используйте подход mobile-first или метод прогрессивного раскрытия.