Что такое адаптивный дизайн?

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

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

Как смартфоны спровоцировали бум на адаптивный дизайн

Чтобы дать ответ на этот вопрос, нужно сперва понять общую картину пользования интернетом в мире. Для этого мы используем статистику, предоставленную компанией Hosting Facts:

  • по состоянию на 2019 год в мире 4,1 миллиарда пользователей интернета. Всего год назад, в середине 2018-го, этот показатель составлял 3,9 миллиарда;
  • наибольшее количество интернет-пользователей в мире сосредоточено в Китае. И 98% из них использует для выхода в интернет смартфоны;

Показатели интернет-пользователей в Китае

  • 63,4% всех мировых пользователей интернета входят в него через смартфоны. И эта цифра постоянно увеличивается. Уже сейчас мобильными телефонами (и мобильным интернетом) пользуются даже в тех регионах Африки и Индии, где нет канализаций;
  • к 2021-му году 67,2% всех онлайн-покупок будет производиться с мобильных телефонов – эта цифра равна 2,32 триллиона долларов;

Mobile e-commerce

  • К тому же, согласно отчету AppAnnie, только за второй квартал 2019 года пользователи мобильных устройств потратили на онлайн-покупки через мобильные приложения на 20% больше, чем ровно год назад. Сюда относится не только показатель трат, но и 30,3 млрд установок различных мобильных приложений, а это – рекордный показатель за всё время их существования. 
  • Пользователи Google Play загрузили больше всего приложений, а пользователи AppStore потратили в них на 80% больше денег ($15 млрд vs $8 млрд).

Траты на онлайн-покупки через мобильные приложения

  • На первом месте по использованию среди пользователей остаются игры, развлекательные, музыкальные, фото и видео приложения, на которые пользователи всё чаще оформляют платные подписки.
  • Наибольший доход принесли приложение Tinder и видеосервис Netflix, а больше всего скачиваний было у Facebook и Facebook Messenger.

Топ приложений

  • хотя количество трафика выше на мобильных девайсах, вовлеченность пока больше на ноутбуках и компьютерах (55,9% времени на сайте проводят пользователи десктопных девайсов, а 40,1% пользователи мобильных гаджетов);
  • в 2016-м году e-commerce продажи с мобильных телефонов составляли всего 20,6% всех сеансов. Но уже к 2020-му году их количество возрастет до 45%.

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

Всегда ли нужен адаптивный дизайн

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

  • дополнительные затраты. Вам понадобится создавать приложение или мобильную версию сайта под каждый тип ОС;
  • дополнительные усилия для пользователей. Чтобы пользоваться вашим приложением, пользователю понадобится загрузить его. А пользователи не любят прилагать усилий, если не уверены в своей выгоде;
  • сниженный трафик. Мобильное приложение “отнимает” пользователей у сайта. На самом деле посещаемость может оставаться такой же, как раньше, но из-за разделения трафика на два отдельных ресурса, количество заходов на сайт кажется меньшим;
  • двойная работа по наполнению ресурсов материалами. Поскольку мобильный сайт или приложение – отдельный ресурс, необходимо сделать одну из двух вещей: либо синхронизировать площадки, что требует дополнительных человекочасов, либо делать двойной объем работы по наполнению сайта.

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

Как создавать адаптивный дизайн, увеличивающий прибыль

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

Для этого у нас есть проверенный способ – аудит существующего сайта. Во время проведения аудита, мы изучаем ваш ресурс, определяем его сильные стороны и слабые места, в которых он теряет пользователей. Особый акцент при таком аудите мы делаем на то, как пользователи воспринимают сайт с различных девайсов. Замеряем показатели конверсии, общей аналитики поведения на ресурсе. Это нужно, чтобы сравнить показатели после внедрения адаптивного дизайна.

Затем мы создаем прототип нового варианта сайта и проводим А/Б тестирование на пользователях. Особо обращаем внимание на показатель отказов, переходы в корзину, совершение покупки. Сравниваем оба варианта, чтобы увидеть четкую картинку. По нашему опыту, адаптированный дизайн всегда показывает лучшие результаты, чем были до этого.Результаты с адаптивным дизайном

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

  • Увеличение количества взаимодействий пользователей с вашим ресурсом (уменьшается процент отказов, увеличивается время, проведенное на сайте, показатели просмотра страниц - при условии качественного их наполнения контентом);
  • Увеличение количества продаж именно с мобильных каналов.

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

Как адаптивный дизайн помогает SEO-продвижению в поисковых системах

Если вы вкладываете ресурсы в SEO-продвижение для выдачи сайта в сети Google, вам действительно нужна мобильная версия сайта или адаптивный дизайн. И вот почему: в 2016 году компания Гугл объявила о запуске Mobile-First Indexing – нового подхода к ранжированию и индексации сайтов.

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

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

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

Каждый раз, создавая новый сайт/платформу/приложение, мы создаем и адаптивный дизайн. На сегодняшний день среди таких веб-ресурсов, разработанных нами, есть корпоративные сайты, e-commerce платформы, различные сервисы и системы.  

Примеры наших работ можно посмотреть здесь: 

Оптово-Розничный Магазин Пультов Дистанционного Управления

UX-прототип личного кабинета для сервиса SMS-Fly

Хотите заказать адаптивный дизайн сайта? Обращайтесь.

06.08.2019
Рейтинг: 0 / 5 (0)