Оптимизация интернет-магазинов под смартфоны уже давно не тренд, а необходимость. В 2019 году доля покупок с мобильных устройств составляла 36%. В 2020 году она сравнялась с объемом заказов через десктоп и продолжает расти.
Адаптивный дизайн помогает правильно отобразить ресурс на различных устройствах, самостоятельно подстраивается под размеры и ориентацию экрана.
👉 Преимущества адаптивной версии:
- страницы сайта корректно отображаются;
- разработка и поддержка дешевле, чем создание мобильной версии;
- нет дублирования контента;
- сайт простой в реализации и управлении.
👉 Минусы:
- не всем пользователям нужна одинаковая информация на смартфоне и компьютере;
- некачественный адаптив (огромные иконки, съезжающие элементы) приводит к отказам;
- компьютер и смартфон загружают одинаковый объем информации, но мощный десктоп с Wi-Fi-подключением загрузит контент быстрее, чем средний смартфон через мобильные сети.
Мобильная версия дублирует основной сайт, но имеет свою верстку. Обычно размещается на поддомене вида «https://m.site.com» или «https://mobile.site.com».
👉 Преимущества мобильной версии:
- мобильная версия более гибкая, вы можете публиковать контент, предназначенный только для мобильных пользователей;
- можно убрать неприоритетные для мобильного отображения функции и элементы;
- сайт быстро загружается.
👉 Минусы:
- так как мобильная версия дубль десктопной, поисковые системы видят два сайта с одинаковым контентом. В целом это негативно сказывается на ресурсе. Избежать этого можно лишь с помощью правильного использования атрибутов rel=”alternate” и rel=”canonical”;
- содержать и отслеживать нужно два сайта, а это дополнительные затраты. Изменения в случае необходимости придется вносить в оба ресурса;
- с планшетов основная версия будет слишком большой, а мобильная – слишком маленькой.
Какой из вариантов выбрать?
Каждый проект индивидуален. Но мы все чаще видим: интернет-магазины переходят на адаптивный дизайн, так как этот вариант имеет современный и удобный вид, и в долгосрочной перспективе требует меньше финансовых и временных затрат. Google рекомендует использование адаптивной версии, а мобильная версия постепенно уходит в прошлое.
Советы по оптимизации сайта под мобильные устройства
Рассмотрим основные моменты, на которые стоит обратить внимание владельцам интернет-магазинов.
1. Полное описание продукции
Пользователь должен видеть одну и ту же информацию: как на мобильном устройстве, так и на десктопе. Если где-то ее не хватает, это может привести к отказу от покупки.
2. Отсутствие горизонтальной прокрутки
Контент на сайте должен умещаться на экране по горизонтали. Если его не удается разместить полностью, подойдет горизонтальный свайп. Например, при расположении серии фотографий:
3. Продуманная навигация
Важный момент как для пользователя, так и для поисковика. Удобное меню позволит пользователю перейти с любой страницы на нужный раздел или категорию. Он быстро найдет нужный товар. Поисковая система сможет понять, какую роль играет та или иная страница на вашем сайте. Как правило, в видимой области сайта ссылки размещают на основные разделы, а в меню-гамбургере на второстепенные.
4. Адаптация контента к размеру экрана
Текст и изображения должны быть вписаны в экран, чтобы пользователь мог видеть контент без напряжения, и в то же время имел возможность изменить масштаб по своему усмотрению.
5. Расположение интерактивных элементов
Интерактивные элементы (шрифты, кнопки и так далее) не должны располагаться слишком близко друг к другу. Убедитесь, что они удобны и имеют свободное пространство вокруг. Так вы избежите перекрытий и случайных нажатий.
6. Отсутствие flash-элементов, плагинов Silverlight
Эти элементы могут не поддерживаться на мобильных устройствах, поэтому мы не рекомендуем их использовать.
7. Качественные изображения
В офлайн-магазин человек может прийти, детально изучить товар, а потом принять решение о покупке. В интернет-магазине такой возможности нет. Покупатель полагается только на описание товара и визуальный контент. Поэтому используйте фотографии высокого качества и не забудьте о детальных снимках.
Сразу стоит позаботиться и об оптимизации изображений. Оптимальный вес около 300 КБ, разрешение до 1000 пикселей по каждой стороне. Форматы: JPEG для любых изображений и преимущественно для фотографий, PNG для иллюстраций, GIF для анимаций, WebP для сжатия изображений с минимальными потерями качества.
8. Скорость загрузки
По данным PageSpeed Insights приемлемая скорость загрузки сайта для мобильных устройств начинается от 50 мс. Сервис удобен тем, что отображает не только текущие показатели, но также дает советы по оптимизации ресурса и экономии времени.
Еще в январе 2018 Google анонсировал новый алгоритм ранжирования, созданный специально для мобильного поиска Speed Update. Он учитывает скорость загрузки страниц мобильных устройств.
9. Простые формы заполнения данных
Не заставляйте пользователя заполнять огромные формы. Важно, чтобы они были легкими и без большого количества полей. Предлагайте сохранить введенные данные, разбивайте формы на несколько этапов, используйте выпадающие списки с вариантами заполнения, маски полей, определение клавиатуры.
10. Наличие поиска на сайте
Поиск один из важнейших элементов для пользователя, который ищет продукт через мобильное устройство. Применяйте автозаполнение, предлагайте поиск в разделах, настройте историю запросов.
11. Кликабельные ссылки и иконки
Если у вас есть иконки мессенджеров, дайте возможность переходить по ним. Номера телефонов тоже должны быть кликабельными. Это же касается и всех ссылок.
Pinta IT
Как насчет мобильного приложения?
Разработка мобильного приложения требует дополнительных финансовых и временных вложений. Приложение создается под каждую из платформ iOS и Android, а также нуждается в обновлениях и продвижении отдельно для App Store и Google Play Маркет.
Однако, если посмотреть на крупные бренды, например, Ozon, Wildberries, DNS, Леруа Мерлен, мы увидим, что у всех есть как адаптивный дизайн сайта, так и мобильные приложения. Преимущество такого подхода в том, что пользователь сам выбирает наиболее удобный вариант.
