Главная / Блог / Адаптивный дизайн или мобильная версия сайта

Адаптивный дизайн или мобильная версия сайта

Что выбрать, адаптивный дизайн или мобильную версию сайта?
516
08-08-2017 10:00

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


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

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

Адаптивный дизайн - это “резиновый” шаблон сайта, который позволяет пропорционально “растягиваться” для отображения на различных устройствах. Этот способ реализуется с помощью единого HTML-кода, а за адаптивность под разные гаджеты отвечает CSS. Сам сайт доступен для всех устройств по одному и тому же URL-адресу. Элементы ресурса (изображения, текст, видео и т.д.) будут автоматически меняться под нужные гаджеты.

 
Самый волнующий вопрос: Что выбрать, адаптивный дизайн или мобильную версию сайта?

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

Плюсы адаптивного дизайна

Универсальная разработка.

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

Простота разработки и поддержки.

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

Один стиль сайта.

С какого бы устройства не зашел пользователь к вам на сайт, он всегда будет видеть привычный ему интерфейс и знать, что после 5 новостей про политику, всегда будут идти 5 про спорт, даже если на смартфоне показывается только одна (все остальные ниже).

Функционал и “фишки” сайта.

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

Охват устройств.

Адаптивная версия сайта будет показываться на всех устройствах пользователей: на десктопе, на таблете, на лэптопе, на смартфоне и даже на TV.

Минусы адаптивного дизайна

Универсальная разработка.

У ваших пользователей разные потребности. А это значит, что у клиентов со смартфоном в руках, могут быть иные цели, нежели у юзера, который “сидит” на вашем сайте с помощью своего домашнего компьютера. К тому же, это вполне может быть один человек, только в различные промежутки времени в зависимости от его потребностей! Сейчас ваш клиент читает новости из блога на десктопе, а через 2 часа хочет позвонить в ваш офис.

Простота разработки и поддержки.

Представьте ситуацию, когда после работ над сайтом, у пользователя смартфона “съехала” кнопка “Заказать”. Она не показывается в принципе! Так ли легко вам будет исправить ситуацию? Вы об этом можете и не узнать, продолжив терять заказы всего из-за одной кнопки.

Один стиль сайта.

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

Функционал и “фишки” сайта.

Источник: Think With Google

Чем сложнее сайт, тем больше он “весит”. Сколькими клиентами и потенциальными заказами вы готовы пожертвовать ради “фишки”? Это как минимум 30% клиентов, если страница загружается дольше 1 секунды! Обязательно проверьте за сколько загружается ваш сайт!

Охват устройств.

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

По данным информации Statista на 2016 количество пользователей мобильных устройств по всему миру составило, на минуточку, более чем 2 700 000 000!

Мобильная версия сайта

Мобильная версия сайта - это отдельная версия сайта, которая создается специально для мобильных устройств с собственным дизайном и функционалом. Такой подход помогает оставить только самое необходимое от основного сайта и быть максимально релевантно для пользователей смартфонов или планшетов.
 
На основании отчета TNS Web Index Россия,12+ Q1 Q1 201 6г.

Плюсы мобильной версии сайта

Собственный дизайн.

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

Быстрая скорость загрузки.

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

Удобство для пользователей.

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

Возможность выбора.

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

Минусы мобильной версии сайта

Собственный дизайн.

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

Быстрая скорость загрузки.

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

Удобство для пользователей.

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

Возможность выбора.

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

Заключение

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


Яндекс наглядно демонстрирует, как должен быть адаптирован сайт под мобильные устройства

На самом деле есть еще и третий вариант. В ближайшее время мы его обязательно подробно разберем. Напоследок, рекомендуем прочитать краткий обзор от Яндекс “Как важно быть мобильным”.