Seopult Cybermarketing Click.ru Seopult TV Trustlink Webartex.ru UpToLike.ru Blog.Seopult.ru Форум
14 апреля 2017

10 правил оптимизации сайта под мобильные устройства

В апреле 2015 года вышло обновление поискового алгоритма Google под неофициальным названием «Mobilegeddon», а в феврале 2016 Яндекс объявил о работе похожего алгоритма под названием «Владивосток». Их суть похожа — в мобильном поиске предпочтение отдается тем сайтам, которые адаптированы для просмотра на мобильных устройствах. Это означает, что игнорировать мобильную адаптацию больше нельзя.

И дело не только в требованиях поисковых систем. Глобальный мобильный трафик догнал десктопный еще в начале 2014 года. А сегодня уже около 67% трафика в Рунете приходится именно на мобильные устройства. Учитывая потребности наших читателей, мы проводим работу по мобилизации блога. Совсем скоро вы увидите наш обновленный ресурс, который будет очень удобно читать на различных устройствах.

Далее мы расскажем об основных правилах оптимизации сайтов под мобильные устройства.

1. Проанализируйте целевую аудиторию

Прежде чем приступать к мобильной оптимизации, проанализируйте свою целевую аудиторию по следующим направлениям (например, с помощью стандартных отчетов Метрики):

  • демография (пол и возраст);
  • география (из каких регионов больше всего переходов);
  • устройства (какие устройства наиболее популярны среди ваших посетителей — десктопы, мобильные телефоны или планшеты);
  • операционная система (Android, iOS, Windows Phone, Windows 7 и т. д.);
  • поведение на сайте (глубина просмотра, время на сайте, отказы и т. п.).

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

2. Адаптируйте шаблон для просмотра на мобильных устройствах

Есть 3 принципиально разных подхода к мобильной адаптации — все они описаны в документации Google для разработчиков. Каждый из них имеет свои преимущества и недостатки.

Мобильная версия

В этом случае будет 2 сайта: десктопный и мобильный. Версия для мобильных размещается на новом домене (типа m.site.ru).

Преимущества:

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

Недостатки:

  • необходимость полноценного администрирования нового сайта;
  • из-за раздельного обслуживания растут затраты при внесении изменений.

10 правил оптимизации сайта под мобильные устройства
Мобильную версию на отдельном домене имеет магазин trial-sport.ru

Динамический показ

В этом случае дизайн адаптирован для конкретных разрешений экранов. Линии сетки и расположение элементов имеют фиксированные размеры для разных устройств.

Преимущества:

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

Недостаток — возможны проблемы при отображении на устройствах, размеры экранов которых не совпадают с указанными разработчиками.

10 правил оптимизации сайта под мобильные устройства
Сайт decathlon.ru использует один URL с разным набором HTML-кода

Адаптивный дизайн

В этом случае макет сайта точно подгоняется под любой размер дисплея.

Преимущества:

  • корректное отображение на всех устройствах;
  • нет необходимости отдельно вносить изменения в мобильную версию.

Недостатки:

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

10 правил оптимизации сайта под мобильные устройства
Сайт компании Восток-Сервис использует адаптивный дизайн, который подстраивается под любые экраны устройств

Помимо указанных способов адаптации можно использовать плагины для популярных CMS. Например, для WordPress есть WPtouch и WP Mobile Edition. Это дешевое решение, но корректность работы сайтов оставляет желать лучшего. И если для блогов это выход, то для сложных проектов такое решение неприемлемо.

3. Упростите дизайн

Дизайн адаптивной версии сайта должен быть простым и лаконичным. Сегодня популярен так называемый “плоский дизайн”, для которого свойственны минимализм, упрощающий использование. Экспрессия достигается за счет игры цветов, а не градиентов, теней, текстур и сложных интерактивных форм и элементов.

10 правил оптимизации сайта под мобильные устройства
Пример минимализма в дизайне

Также при разработке мобильного сайта стоит забыть о flash-плеерах, виджетах и всплывающих окнах. Любимый многими эффект параллакс тоже стоит оставить в стороне, так как он воспроизводится далеко не на всех мобильных ОС и замедляет прорисовку страниц.

4. Поработайте над улучшением юзабилити

При разработке навигации, прежде всего, думайте о пользователе и его удобстве. Любая страница должна быть доступна в пару шагов — без сложных фильтров и списков. Для совершения звонка в одно нажатие правильно прописывайте формат номера с кодом страны и города +7 495 … . Предусмотрите авторизацию в один клик через соцсети. Одним словом — старайтесь минимизировать любые действия посетителей до цели.

Вместо курсора мышки на смартфоне используется палец, так что все элементы должны быть достаточного размера. Человек не должен увеличивать изображение, чтобы кликнуть по какому-либо элементу. Не используйте шрифты с засечками, завитушками, курсив. Оптимальный размер шрифта — 16 пикселей, высота строки — 1,2 em.

5. Ускорьте загрузку страниц

Ускорение загрузки, с одной стороны, улучшает поведенческие факторы, а с другой, позитивно влияет на ранжирование. Используйте различные сервисы сжатия:

Проверить скорость загрузки страниц и увидеть возможные проблемы можно с помощью сервиса PageSpeed Insights по этой ссылке.

6. Используйте социальные кнопки

Пользователи мобильных активно репостят контент. Не лишайте их такой возможности. Так вы обеспечите себе дополнительный трафик и улучшите социальные сигналы. Добавьте кнопки-ссылки на самые популярные соцсети, но не более 4-5 в видимой части экрана, в противном случае кнопки будут или слишком маленькими, или займут много места.

7. Оптимизируйте контент

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

Следуйте таким правилам:

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

8. Не ограничивайте доступ к контенту

Некоторые дизайнеры, вместо того чтобы адаптировать весь контент для мобильных, частично скрывают его. Обычно это делают по причине сложности шаблона, но это неверный подход. Предлагать «облегченную» версию — это несправедливо по отношению к мобильным пользователям. Работать нужно в направлении упрощения и оптимизации дизайна, а не урезания контента.

9. Оставайтесь в тренде

Отслеживайте актуальные тренды в сфере дизайна и юзабилити и вносите оперативно изменения, чтобы не остаться «позади паровоза». Например, сегодня актуальны такие тренды:

  • модульный дизайн (контент группируется в блоки, которые выстраиваются в одну ленту или несколько лент в зависимости от размера экрана);
  • плоский дизайн (тени, полутени, объем — это все осталось в прошлом);
  • подход mobile first (раньше сайты делали для ПК, а потом в силу необходимости адаптировали для мобильных — сегодня все наоборот).

10. Не забывайте анализировать сайт на мобилопригодность

Проводите периодически проверку сайта на соответствие требованиям поисковиков к мобильной адаптации. В Google это можно сделать по ссылке. Просто вводите адрес страницы и ждете результата проверки. Все обнаруженные ошибки нужно поскорее исправить.

Для проверки мобилопригодности в Яндексе добавьте сайт в Яндекс.Вебмастер, а потом перейдите в раздел «Инструменты» / «Проверка мобильных страниц» и введите адрес сайта. Если есть ошибки, тоже их исправляем.

Если нет времени самостоятельно разбираться с проверкой и ошибками в мобильном отображении сайта, вы можете заказать услугу аудита и получить рекомендации в службе “Персональный менеджер”.

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

Комментарии

Расписание вебинаров и
мастер-классов