Кейс: мы перешли на адаптивный дизайн и вот результат

Денис Имшенецкий

CEO конструктора сайтов для бизнеса Nethouse

Расскажите друзьям
Виктория Кравченко

С каждым годом посетители все чаще заходят в интернет и осуществляют покупки с мобильных устройств. С них, согласно данным «Яндекс.Метрики» от весны 2016 года, в России совершается 29% всех визитов на сайты, и эта цифра постоянно растет.

Денис Имшенецкий, CEO платформы для создания сайтов Nethouse, рассказывает, какой способ оптимизации сайта под смартфоны и планшеты подойдет вам.

Оптимизировать сайт? Давно пора

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


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


Способ 1. Адаптивный дизайн


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


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

  • сайт всегда подстраивается под текущее разрешение экрана — при смене ориентации на мобильном устройстве или при уменьшении окна браузера на десктопе;

  • не нужно настраивать редиректы;

  • сайт лучше ранжируется в мобильной выдаче;

  • простота в управлении сайтом, так как контент автоматически подстраивается под различные устройства;

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


Недостатки:

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


Способ 2. Мобильная версия


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


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

  • так же, как и адаптивная верстка, мобильная версия лучше ранжируется в мобильной выдаче;

  • возможность размещать на сайте только тот функционал и контент, который необходим для смартфонов и планшетов;

  • меню, навигацию и другие элементы дизайна можно полностью подстроить под нужды мобильных пользователей;

  • основную (для компьютеров) и мобильную версии можно изменять независимо друг от друга;

  • быстрое время загрузки.


Недостатки:

  • необходимость тратить ресурсы на поддержку и управление двумя ресурсами одновременно, следить за актуальностью информации на обоих;

  • при размещении контента необходимо для начала адаптировать его еще и под мобильные устройства, а затем опубликовать дважды: на основной и мобильной версии;

  • необходимость настройки редиректов;

  • проблема с дублированием контента — одна статья имеет два разных адреса, что негативно влияет на показатель уникальности и эффективность отображения в поисковиках;

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


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


Из нашего опыта...


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


На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.


1. Поисковый трафик


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


01_01 tentnalodky organic all.png


01_02 salon online organic all.png


01_03 stroikomlekt organic all.png


2. Поисковый мобильный трафик


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


02_01 astramed organic smartphone.png


02_02 darju kryma organic smartphone.png


02_03 salon online organic smartphone.png


02_03 tentnalodky organic smartphone.png


3. Поведенческие факторы


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

На графиках ниже представлены изменения статистики по поведенческим факторам в сравнении периодов «до» смены шаблона и «после».


03_01 restbu technology sravnenie.png


03_02 salon online technology sravnenie.png


03_04 stroikomplekt technology sravnenie.png


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


Вывод: переход на адаптивный дизайн позитивно влияет на трафик сайта из поисковых систем и поведенческие факторы.

Отрицательных моментов не обнаружено. Если вы о них знаете, делитесь в комментариях!


В материале использовалась статистика сайтов: https://astramed72.ru, https://crimeabeauty-nn.ru, https://салон-онлайн.рф, http://restbu.ru, https://tmk-stroykomplekt.ru, https://tentnalodku.ru, https://donkupidon.ru.


Материалы по теме:

Инструкция: как проверить продуктовые гипотезы на этапе дизайна

9 секретов UX, украденных у лучших экспертов

Можно ли найти хорошего дизайнера на фриланс-сайтах: личный опыт

«Один мой знакомый пошел за логотипом к Лебедеву. Пришлось продать квартиру»

Как работать с цветом в интерфейсах: советы дизайнера

Выбираем идеальную диаграмму для представления ваших данных. Просто и понятно



Комментарии

  • Alexandr Gushchin 11:50, 13.04.2017
    0
    Доступ к интернету сейчас есть у всех, а первое упоминание об адаптивном дизайне относится еще к 2010 году. Причем поисковики и все, все, все обмусолили эту тему уже со всех сторон. Так в чем смысл данного "кейса"? В возможности потенциальным клиентам нетхаус посмотреть среднюю статистику поискового трафика для сайтов на данной платформе и сделать для себя определенные выводы?
Комментарии могут оставлять только авторизованные пользователи.
Money2020
22 октября 2017
Ещё события