Больше 87% покупок, согласно статистике, сегодня делают с мобильных устройств. И этот процент будет только расти. Поэтому настройка каналов продаж (в частности сайта компании) так, чтобы они были адаптированы под телефон, обязательна для бизнеса.
Для чего оптимизировать сайты?
Товары всё чаще покупают с мобильных устройств. Но это только один из поводов настраивать сайт под формат смартфонов. Перечислим другие преимущества адаптации:
- Ранжирование по мобильной версии. С мая 2023 Google пользуется принципом mobile-first индексация. Другими словами, на результаты в выдаче теперь влияет версия для смартфонов. Если она неудобна для посетителей или содержит ложную информацию, позиции сайта будут занижены. Кстати, таким же образом работает Яндекс.
- Улучшение статистики в Wordstat. Этот сервис поможет посмотреть, какой процент людей вводил запрос, по которому попал на ваш сайт, с мобильной версии. Если вы увидите, что ваша целевая аудитория часто пользуется смартфонами — адаптация будет очень полезна.
- Повышение процента трафика, который приходится на смартфоны. Чем качественнее мобильная версия, тем выше этот показатель. Измерить его можно с помощью Semrush или Ahrefs.
- Возможность простого контакта с аудиторией, которая пользуется смартфонами. Адаптация сайта дешевле и проще разработки мобильного приложения.
Как проверить уровень адаптации сайта
Перед оптимизацией ресурса для смартфона важно проверить, как обстоят дела сейчас. Для этого подойдёт два метода, которые мы предлагаем комбинировать:
Сервисы
Для тестирования сервисов на адаптированность для смартфонов подойдут следующие программы:
На выбранном портале попросят указать свой URL. С его помощью вы увидите, как сайт выглядит на мобильных устройствах, оцените, насколько mobile-friendly ваш ресурс и что следует подкорректировать, чтоб добиться наилучшего показателя.
Вручную
Через браузер Google Chrome можно самостоятельно проверить с компьютера, насколько хорошо ваш сайт выглядит с мобильного устройства. Чтобы сделать это, потребуется нажать клавишу F12, а затем в левом нижнем углу появившейся панели разработчика выбрать раздел «Аналог». В нём можно будет указать устройство.
Такая методика поможет посмотреть на свой проект глазами покупателя. Рекомендуется самому пройти тот путь, который должен пройти ваш клиент перед покупкой. Вы сможете сами оценить, насколько удобно быть пользоваться страницами, всё ли понятно и хорошо видно. Если вам важна обратная связь от пользователей мобильной версии, разместите на сайте опрос или форму обратной связи.
Способы адаптации сайта под смартфоны
Адаптировать портал для смартфона сегодня можно несколькими способами. На то, какой метод выбрать, повлияет ваш бюджет и особенности бизнеса.
Адаптивная верстка
Эта опция поможет подстроить веб-страницы под разные смартфоны в соответствии с размерами экрана и типом ориентации. При этом одни элементы вёрстки уменьшатся, а другие — и вовсе исчезнут. Части сайта будут перемещаться вертикально. Такую вёрстку можно сделать с помощью CSS (например, Bootstrap) или CSS3 (Media Queries).
Плюсы: Не придётся перепроверять все данные. Когда вы будете редактировать версию сайта для компьютеров, мобильная будет обновляться сама по себе.
Минусы: Это достаточно дорого. Адаптация понадобится под планшеты, iPhone и смартфоны на Андроид с разным разрешением экрана.
Кому подходит: Адаптивная вёрстка подойдёт несложным сайтам. К ним относятся лендинги, сайты-визитки, небольшие онлайн-магазины и страницы мероприятий.
Отдельный шаблон на главном домене
Адрес десктопной и мобильной версий будут совпадать. Особенность метода заключается в разработке скрипта, который будет считывать тип устройства каждого пользователя и загружать контент, основываясь на нём. При этом дизайн интерфейса будет сильно упрощён.
Метод хорошо подходит для порталов на WordPress. Для него уже разработали готовые скрипты — WP Mobile Pack, WP Mobile Detector.
Плюсы: Адаптировать страницы таким методом можно быстро.
Недостатки: Высокий шанс ошибочного определения устройства. На рынке часто появляются новые модели, которые скрипт может попросту не распознать. Кроме того, мобильная версия, сделанная через такой скрипт, может показаться слишком простой. Это минус для тех, кому важна эстетика.
Кому подойдёт: Тем, на чьих страницах много текста — владельцам информационных блогов и сайтов. Иногда такой метод используют владельцы интернет-магазинов.
Мобильная версия, созданная на поддомене
В этом случае мобильная версия может выглядеть как отдельный самостоятельный портал. На него пользователь попадает, если заходит с мобильного устройства. Самое важное — создать эту версию именно на поддомене. К сожалению, многие до сих пор ошибаются и создают версию для смартфонов во вложенной папке.
Плюсы: Портал можно продумать так, чтобы страницы загружались быстро, а пользователям было идеально удобно им пользоваться.
Минусы: Сделать такой портал трудно. Нужно сделать поддомен, с нуля написать скрипт и совершить много других действий. Если вы актуализируете данные на десктопном сайте, обязательно нужно обновлять их на мобильной версии вручную. Однако такой сайт может стать единственным решением для сайтов со сложной структурой, на которых много страниц.