Оптимизация сайта под мобильные устройства: что стоит знать заранее
Более 67 % россиян, совершающих онлайн-покупки, делают это через смартфон. Это устойчивый тренд, и доля mobile-шопинга будет только расти. Так что владельцам бизнеса прежде всего стоит развивать каналы продаж, адаптированные под мобильные устройства. Один из таких каналов — сайт компании.
Сергей Секенов, руководитель группы сопровождения Rookee, подготовил материал об особенностях оптимизации сайта для мобильного формата. Информация будет полезна предпринимателям и маркетологам, которые хотят продвигать свой сайт и используют его в качестве канала продаж.
Зачем оптимизировать сайт под мобильные устройства
Растущая доля онлайн-покупок, совершаемых со смартфона, — далеко не единственный аргумент в пользу адаптации своего сайта для мобильного формата. Есть и другие основания для оптимизации:
- Поисковики теперь mobile-first
В мае этого года Google завершил переход на mobile-first индексацию: это значит, что в первую очередь домены сайтов ранжируются в поиске по мобильной версии сайта. Похожий алгоритм работает и в Яндексе. Соответственно, если мобильная версия плохо читаема или содержит неактуальные данные, позиции сайта в выдаче занижаются.
- Данные анализа Wordstat
Сервис Яндекс Wordstat позволяет посмотреть, сколько пользователей вводило запрос, пользуясь смартфоном, а сколько — со своего персонального компьютера из веб-версии поисковика. Сравнивая данные по одному и тому же запросу по тематике своего бизнеса, можно понять, насколько популярен онлайн-шопинг с мобильных устройств в конкретной нише.
- Трафик на сайте
Сервисы вроде Ahrefs или Semrush помогут понять, какая доля трафика на сайте приходится на мобильные устройства. Стоит отметить, что чем лучше оптимизирован сайт под смартфоны, тем чаще пользователи заходят на мобильную версию.
- Легкий доступ к мобильной аудитории
Оптимизировать сайт под смартфоны гораздо быстрее и дешевле, чем, к примеру, создать собственное мобильное приложение бренда и опубликовать его.
Проверка на мобильную «дружелюбность»
Сперва необходимо проанализировать текущее положение дел: насколько ваш сайт сейчас mobile-friendly, то есть адаптирован для просмотра со смартфонов. Сделать это можно двумя способами, мы рекомендуем использовать оба:
- При помощи сервисов
Провести mobile-friendly тестирование помогут сервисы Яндекс.Вебмастер, Google Search Console, а также расширение Page Speed Insight. Достаточно вставить URL своего сайта, и сервисы автоматически «посмотрят» его мобильные версии с разных устройств, вынесут оценку адаптированности, укажут на недостатки и подскажут, что исправить.
- Вручную
Посмотреть, как выглядит мобильная версия сайта, можно с компьютера в браузере Google Chrome, вызвав «Панель разработчика» клавишей F12. В нижнем левом углу появится раздел «Аналог», а сверху по центру будет возможность выбрать устройство.
Ручная проверка помогает поставить себя на место пользователя, который хочет совершить покупку. Лучше всего пройти типичный сценарий использования сайта от главной страницы до совершения покупки. Задайтесь вопросами: все ли было удобно, видны ли пользователю все необходимые текстовые описания, насколько удобно и интуитивно понятно использование сайта. Если не уверены, повесьте на сайте опрос для пользователей мобильной версии, насколько комфортным был их опыт и можно ли что-то улучшить.
Варианты адаптации сайта под mobile
Сейчас у владельцев сайтов есть несколько жизнеспособных вариантов, как провести оптимизацию под мобильные устройства. Какой вариант выбрать — зависит от контента сайта и имеющегося бюджета.
Адаптивная верстка
Адаптивная верстка позволяет подстраивать страницы сайта из десктопной версии под различные мобильные устройства в зависимости от разрешения и ориентации экрана. В случае со смартфонами, элементы сайта будут «двигаться» вертикально, часть из них придется уменьшить под mobile, что-то — и вовсе убрать. Для создания адаптивной верстки можно использовать CSS-фреймворк (Bootstrap, Responsive Grid System) или CSS3 Media Queries.
Преимущества метода: Адаптивная верстка не требует актуализации информации — изменения, внесенные на десктопную версию сайта, подгружаются автоматически.
Недостатки: Решение может обойтись дорого, поскольку дизайн нужно будет адаптировать для каждого девайса по-отдельности — смартфонов с самым разным разрешением на iOS и Android, планшетов и пр.
Каким сайтам и бизнесам подойдет: Адаптивная верстка отлично подходит сайтам с простой и лаконичной структурой, например, одностраничным лендингам, интернет-магазинам с маленьким ассортиментом, сайтам мероприятий или сайтам-визиткам с перечислением услуг.
Отдельный шаблон на основном домене
При такой оптимизации мобильная версия сайта будет доступна по тому же адресу, что и его десктопная версия. Метод подразумевает написание скрипта, который будет распознавать тип устройства при заходе на сайт и выводить для него подходящий шаблон. Шаблон, как правило, подразумевает сильное упрощение дизайна десктопной версии.
Особенно этот метод хорош для сайтов на WordPress, поскольку в интернете уже есть готовые плагины для адаптации под mobile, например, WordPress Mobile Pack, WP Mobile Detector.
Преимущества метода: Пожалуй, это самый быстрый способ адаптации сайта под мобильные устройства.
Недостатки: Сейчас на рынке представлено огромное количество смартфонов, постоянно выходят новые. Скрипт может ошибочно определять нераспространенные модели устройств и показывать в таком случае полную версию сайта. Также, если вы заботитесь об эстетической составляющей и красоте дизайна, шаблоны могут показаться слишком упрощенной версией без изысков.
Каким сайтам и бизнесам подойдет: Шаблон хорошо работает для сайтов с большим количеством текстового контента: блоги, форумы, информационные сайты. Возможны варианты адаптации сайтов интернет-магазинов при помощи шаблона.
Мобильная версия сайта на поддомене
В этом случае создается отдельная мобильная версия, по сути — самостоятельный сайт. Когда пользователь переходит по ссылке с мобильного устройства, происходит автоматическая переадресация на мобильную версию. Главное — обязательно создавать эту версию на поддомене, а не вложенной папкой. Это большая ошибка, но, тем не менее, все еще довольно распространенная.
Преимущества метода: Дизайн можно детально адаптировать под мобильные устройства, продумать его с точки зрения пользовательского опыта и показателей скорости загрузки.
Недостатки: Довольно трудоемкий вариант с точки зрения реализации: нужно создать поддомен, настроить его, написать скрипт и так далее. После создания мобильной версии работа не заканчивается: актуализировать на ней данные придется каждый раз заново, в отрыве от десктопной версии. Тем не менее, если речь идет о довольно большом сайте со сложной структурой, мобильная версия на поддомене часто оказывается единственным возможным решением.
Каким сайтам и бизнесам подойдет: Крупным интернет-магазинам, сайтам социальных сетей.
