20+1 совет, которые помогут сделать мобильную версию вашего сайта эффективнее
Техническая сторона
1. Проверьте скорость загрузки. Желательно, чтобы страница грузилась менее 1 секунды, максимум 3 секунды.
Как проверять? Вопреки распространенному мнению, Google PageSpeed Insights не измеряет скорость загрузки — вы получите только рекомендации по ее улучшению. Для проверки скорости существуют GTMetrix или Pingdom Tools.
Как повышать? Используйте Accelerated Mobile Pages от Google, например. Он использует в 10 раз меньше данных и грузит страницы до 4-х раз быстрее. Скорость реакции на мобильном устройстве в 5 раз лучше привычной нам, благодаря чему скорость загрузки менее секунды становится вполне реальной.
2. Удостоверьтесь, что файл robots.txt дает поисковым роботам доступ к картинкам, файлам -js и -css. Зайдите в Google Webmaster, выберите сайт и в разделе “Сканирование” выберите “Просмотреть как Googlebot”. После этого нажмите “Получить и отобразить” и сверьте изображения на сайте с теми, которые видит робот. Если картинки совпадают — все в порядке.
3. Бывает, что при переадресации выскакивает ошибка 404 или пользователь попадает в совсем другой раздел. Проверьте переход из полной версии сайта (site.ru) на мобильную на поддомене (m.site.ru) – ссылка должна вести на страницу того же товара/раздела.
4. Чтобы не запутать поисковых роботов и не полететь вниз в выдаче, на главном сайте (в десктопной версии) в хедере поставьте тег alternate. Если робот придет и увидит 2 одинаковых текста на разных источниках, то посчитает их неуникальными. Это грозит проблемой с оптимизацией. Тег alternate убирает конфликт: если его поставить, одна страница будет главной, а другие — ее производными.
5. Для мобильной версии действуют правила SEO: теги, мета-теги, подписи картинок важны. Проверьте их правильное написание (латинский алфавит, до 70 символов), сократите адреса страниц (например, site.ru/ru/razdel/podrazdel/kontent1 можно превратить в site.ru/ru/kontent1) и ссылки в тексте — они будут восприниматься легче.
6. Уменьшайте размер картинок – на маленьком экране разница не заметна, зато скорость загрузки страницы ощутимо повысится. Вполне хватит 800 пикселей по ширине. Кроме того, рекомендуется сжимать картинки, чтобы снизить их вес, сохраняя разрешение. На качестве это отразится, но незначительно — будьте уверены, пользователи ничего не заметят. Зато страница будет грузиться быстрее. Работать с картинками легко — на помощь придут бесплатные онлайн-сервисы http://resizepiconline.com/, http://optimizilla.com/ru/, http://compressjpeg.com/ru/ и аналоги.
Дизайн и юзабилити
7. Выравнивайте контент по левой стороне. Исключение можно сделать для заголовка или подзаголовков — их можно выровнять по центру. Страница или блок должны полностью помещаться на один экран по ширине и высоте. Избегайте скролла прокрутки по горизонтали — бойтесь его, как огня. Но…
8. Задействуйте все пространство экрана — не оставляя пустых полей по сторонам.
9. Используйте локализованный поиск и гео-таргетинг, чтобы точнее отвечать на запросы пользователей — автоматически предлагать доступные способы доставки и заполнять адрес, рассчитывать расстояние и время прибытия, и пр. Особенно актуально это для сфер, где пользователи часто ищут что-то поблизости: рестораны, автомойки и СТО, автозаправки, метро, банки и банкоматы, гостиницы и отели, кинотеатры, салоны красоты, аптеки, круглосуточные заведения (от кафе до супермаркетов).
Зарегистрируйтесь в Google+, чтобы сайт участвовал в органическом поиске или поиске на карте, и при входе на сайт определяйте местонахождение пользователя. У Яндекса и Google есть руководства, как настроить гео-таргетинг.
10. Типографика важна. Подбирая размер и тип шрифта, проверяйте его читабельность на смартфоне. Размещайте текст одной колонкой. Если это лендинг — уместно максимум 2 пункта в ряд (в блоках с преимуществами, например). Но лучше все же размещать их в один ряд вертикально.
Пример оформления блока с преимуществами в шаблоне Flexbe
11. Обязательное требование: размер кнопок — достаточно большой, чтобы любой пользователь их увидел и смог нажать, попав куда надо. В руководстве для разработчиков Android указаны оптимальные размеры кнопок и других кликабельных объектов: 7-10 мм независимо от размера экрана. Учитывайте также, что мобильные запросы отличаются от десктопных, и люди предпочитают не вводить большое количество информации. Поэтому сократите число полей до минимума, но обязательно оставьте на видном месте кнопки для звонка, sms или прямой связи через соцсеть (например, Facebook Messenger).
Такая форма — головная боль для мобильного пользователя
12. Сделайте номера телефонов кликабельными или оформите в виде кнопки “Позвонить”. Зачем? Представьте, что вы нашли СТО и хотите связаться с ним. Нажимаете на номер — приложение перезагружается и… ничего не происходит. Тут варианта 2: или выписывать номер и затем позвонить, или найти другое СТО. Или совсем об этом забыть, если ситуация не критична. Не теряйте клиентов — это одна из самых распространенных ошибок.
13. Расстояние между ссылками сделайте достаточным для того, чтобы переходить по нужной, не промахиваясь. Для постоянно используемых это 7 мм, редко используемых — 5 мм.
14. Лишний контент уберите, упростите или просто скройте (хотя последнее Google не приветствует). Оставьте только то, что помогает покупателям принять решение. Для товара — фотографии, характеристики, цену и отзывы. Если это контентный проект — оставляйте, например, только название статьи и данные о просмотрах и комментариях, плюс дату публикации. Внизу экрана можно закрепить кнопки популярных соцсетей. Так на экране смартфона поместится больше информации.
15. Уберите анимацию. Баннеры и красивая демонстрация товаров снижают скорость загрузки. Кроме того, на небольшом дисплее смартфона анимация смотрится не так эффектно, как на мониторе.
16. Flash уходит в прошлое. Используйте для вставки видео HTML5 — он обеспечивает лучшую скорость загрузки, очень удобен и к тому же потребляет меньше энергии аккумулятора.
17. Уберите всплывающие окна (popup). С января 2017 года Google понижает в выдаче сайты с назойливой межстраничной рекламой и всплывающими окнами. Подробнее об этом можно прочитать здесь.
18. Оставьте возможность смены языка (если необходимо) и перехода на полную версию сайта.
19. “Линии прогресса” и другие подобные фишки оставьте для основной версии сайта. Для мобильной используйте простую навигацию и ее элементы тоже упростите.
В мобильной версии “линия прогресса” не всегда уместна
20. В подвале десктопной версии обычно находится много информации — раздел “О нас”, ссылка на страницу с вакансиями, соглашение о конфиденциальности, разделы с акциями и многое другое. У каждого сайта этот набор свой. В мобильной версии оставляйте внизу только релевантное содержимое: ссылки на акции, контакты, способы оплаты, популярные товары.
21. Используйте глобальную навигацию. Оставляйте ссылки на главные разделы сайта, показывайте цепочку вместе со страницей, на которой находится посетитель. Эти ссылки будут выполнять роль “хлебных крошек” и не дадут заблудиться на сайте.
Подведем черту
Большинство пунктов известны почти всем, но это не мешает им оставаться самыми распространенными ошибками в мобильной версии сайта. Главное — повысить скорость загрузки страницы, этот параметр важен как для ранжирования, так и для пользователей. Используйте современные технологии для мобильной выдачи, обеспечьте людям удобную навигацию и корректное отображение страницы на дисплее — и это повысит отдачу от мобильной версии вашего сайта.