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

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

Просто сделать так, чтобы ваш дизайн "влез" в маленький экран смартфона - не достаточно. Уделите побольше внимания самой концепции того, что вы хотите показать пользователю на каждом из устройств. Выделите это и откиньте всё лишнее, даже если вам кажется, что пользователь с удовольствием почитал бы новости вашего проекта - помните, что 60-80% людей пришли чтобы посмотреть адрес или телефон.

Респонсивный дизайн - проблема или решение?

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

Расположение картинок

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

Неэффективное представление информации

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

Неправильный взгляд на вещи

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

Респонсив или Адаптивчик?

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

Да прибудет с вами сила! :)