РАЗРАБОТКА ИНТЕРНЕТ-МАГАЗИНА

Мобильная версия или адаптивная верстка — что лучше для интернет-магазина?

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

Зачем интернет-магазину адаптация под мобильные устройства

Если у вас уже есть интернет-магазин, то с помощью веб-аналитики вы убедитесь, что трафик с Mobile существенный. Согласно исследованию Яндекса, с мобильных устройств все чаще совершают покупки:
Проверка счетчиков web-аналитики - KISLOROD
Рост доли покупок с мобильных устройств
Адаптация сайта под мобильный экран положительно сказывается на конверсии за счет:
  • удобства пользователя — при хорошем юзабилити мобильной версии сайта легко нажимать на кнопки, просматривать и заказывать товары;
  • постоянной доступности телефона — увеличивается вероятность спонтанных покупок.
Оптимизировать сайт под мобильные устройства важно и для SEO — алгоритмы поисковых систем учитывают, насколько удобно просматривать сайт со смартфона. Неудобные для пользователей сайты понижаются в выдаче.

А если не адаптировать?

Можно оставить все как есть — сайт будет выглядеть одинаково вне зависимости от размеров экрана, сохранять расположение элементов. При этом будет трудно рассмотреть детали — пользователю придется увеличивать нужный фрагмент.
Это не вариант для интернет-магазинов — нажимать кнопки на таких сайтах неудобно. Клиенты уходят — конверсия, а значит и доходы, снижаются. К тому же уровень поискового трафика на сайт будет существенно ниже, чем если бы интернет-магазин был mobile-frendly.
Не радуют перспективы? Остается сделать мобильный сайт или адаптив. Общее у этих вариантов только то, что сайт будет корректно отображаться на всех устройствах. Нюансы и отличия рассмотрим ниже.
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

Что такое мобильная версия сайта

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

Преимущества мобильной версии:

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

Недостатки мобильной версии:

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

Что такое адаптивная верстка для мобильных устройств

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

Преимущества адаптивной верстки:

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

Недостатки адаптивной верстки

Единственный минус адаптива — привязка к десктопу. И отсутствие в связи с этим возможности преобразовывать интерфейс под потребности мобильных пользователей: могут быть сложности с поиском информации из-за «лишнего» функционала и элементов.
Как правило, эти сложности возникают при работе с подрядчиком, у которого слабая экспертиза в разработке дизайна для мобильных устройств. Если к вопросу подойти с должной экспертизой, подобных проблем не возникнет.
Важный момент: когда-то адаптивные сайты были тяжелыми и долго грузились. Сегодня любые элементы можно сделать красивыми и при этом нетяжелыми. Постоянно растет и качество мобильного интернета.

Адаптивная верстка или мобильная версия — что выбрать?

Рассмотрим две ситуации:

1. Вы только планируете разработать интернет-магазин

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

2. У вас уже есть десктопная версия, но вы не хотите терять мобильный трафик

Как правило, именно в такой ситуации возникает вопрос — адаптивный сайт или мобильная версия?
Если ваш интернет-магазин не адаптирован под смартфоны, значит он сделан достаточно давно. Скорее всего, его дизайн морально устарел и не отвечает современным требованиям пользовательского интерфейса. В этом случае целесообразнее сделать новый сайт с учетом современных трендов в дизайне и UX. Экономный вариант — «переехать» на готовое решение. Делать адаптивную версию старого сайта — авантюра, потеря времени и сомнительная экономия, которая себя не оправдает в долгосрочной перспективе.
Если нет возможности сразу сделать редизайн сайта, а готовое решение не отвечает требованиям и задачам проекта, лучше создать мобильную версию и развивать ее отдельно от десктопной. Это позволит удовлетворять потребности мобильных пользователей до тех пор, пока не появится возможность сделать редизайн десктопной версии. Когда будет готов новый сайт, можно провести A/B тестирование мобильной и адаптивной версии, и понять, какая дает лучшую конверсию.


Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

Выбрали адаптивную верстку? Возьмите на заметку

Важно опираться на базовые правила адаптивности. Сетка из 12 колонок помогает адаптировать сайт под любые мобильные устройства: двенадцать легко делится на два, три, четыре, шесть.
Сетка из двенадцати колонок на адаптиве
Сетка из двенадцати колонок
Нужно создавать минимум три макета — для десктопа, планшета и смартфона, чтобы понимать, как сайт будет отображаться на разных устройствах. После утверждения макетов к проекту подключаются разработчики — они должны позаботиться о том, чтобы сайт плавно перетекал от версии к версии и всегда корректно отображался.
Одна из распространенных ошибок при создании адаптивного сайта — использование растровой графики для иконок, в результате чего изображение может быть размытым на некоторых устройствах. Мы используем векторную графику. Она позволяет добиться четкого отображения на любом экране, даже с высоким разрешением — как на iOS-устройствах (iPhone, MacBook).
Преимущества векторной графики
Преимущества векторной графики

Вывод

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

Рекомендованные статьи

Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: