Привет!

Mobile-friendly контент как способ увеличение трафика [digital note #7]

Гадашевич АндрейГадашевич Андрей

Использование мобильного интернета растет каждый год. Мобильных пользователей стало больше, чем пользователей ПК.
Если вы не оптимизируете свой контент и сайт в целом, вы упустите большую часть трафика. Подтверждение этому факту — mobile-friendly алгоритм Google 2015 года

В 2015 году Google сообщил о создании mobile-friendly алгоритма, который сразу окрестили “Mobilegeddon”. Большого влияния он не оказал, но сайты, которые не были оптимизированы под мобильные устройства, потеряли трафик.

Google прощупывает почву перед масштабными изменениями. В компании дали понять, что они стремятся обеспечевать мобильных пользователей в первую очередь адаптированными страницами, и со временем это будет играть все большую роль. Да, mobile-friendly контент теперь привлекает трафик в краткосрочной и долгосрочной перспективе, он снизит вам показатель отказов, что увеличит уровень конверсии. В этой статье будут описаны 5 способов оптимизации контента для мобильных устройств.

Mobile-friendly. Коротко о главном

Если вы знакомы с этим понятием, то смело пропускайте этот абзац.

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

Давайте проверим, насколько ваш контент адаптирован. Начнем с тестирования: определим текущее состояние. Для этого существует несколько способов: сервис Google и другие сервисы, которые позволяют узнать, как выглядит ваш сайт на разных устройствах.

Несколько слов об адаптивном дизайне

Наверняка вы о нем слышали. Его используют в качестве синонима к слову mobile-friendly, однако это неправильно. Адаптивный дизайн лишь один из способов разработки mobile-friendly дизайна. Когда меняется размер экрана, контент приспосабливается к нему. Поэтому этот способ наилучший.

Тактики ниже, основаны на предположении, что вы отдадите предпочтение этому варианту.

Ширина должна быть в процентах

Все HTML элементы имеют ширину. Кликнув правой кнопкой мыши на любом элементе веб-страницы и выбрав “Просмотреть код”, справа появится панель, где можно увидеть этот параметр. Он может быть как в процентах, так и пикселях.

Ширина должна быть в процентах

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

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

Использование медиа-запросов для адаптивности

Ключ к адаптивному дизайну - использование медиа-запросов. Вам никогда не было интересно, как некоторые страницы не просто меняют размер на разных устройствах, но и форму? Некоторые разделы становятся шире или уже, элементы двигаются все вместе. Все благодаря использованию медиа-запросов. Вот как они могут выглядеть:

@media screen and (max-width: 1020px) {
  #container, #header, #content, #footer {
    float: none;
    width: auto;
  }
  p { 
    font-size: 2em; 
  }
}


Загрузите свою страницу и уменьшите ее ширину. Если некоторые элементы стало тяжело воспринимать, создайте медиа-запрос.

Опасность всплывающих окон

Многие экспериментировали со всплывающими окнами для сбора email адресов. Обязательно протестируйте модальные окна и вы, но будьте предельно осторожны. Многие инструменты и плагины прекрасно выглядят на экранах компьютеров, но могут все испортить на мобильных устройствах. Случается, что даже закрыть их невозможно. Не удивительно, что пользователи уходят с таких страниц.

Существует три решения проблемы:

  • Избавиться от них. Отключить всплывающие окна для мобильных пользователей.
  • Упростить. Этот вариант заключается в минимизации количества полей и обеспечения возможности легкого закрытия.
  • Используйте всплывающие окна только при кликах посетителя. Суть метода заключается в том, чтобы предложить ценность взамен действию. Посетитель должен будет кликнуть, чтобы получить ее. Вот тогда и появляется окно pop-up. В этом случае, человек будет лояльней.

Минимизация отвлекающих факторов

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

К примеру, обычный sidebar бесполезен на мобильных устройствах. Его, как и навигационное меню, лучше удалить. Как? Используя медиа-запросы. Еще один совет копирайтерам: длинный текст на мобильных устройствах читать неудобно.

Будьте на шаг впереди с Ускорением мобильных страниц (AMP)

Accelerated Mobile Pages это HTML страницы в специальном формате. Google скооперировался с некоторыми крупными брендами для их создания и поддержки. Такие страницы имеют приоритет при поиске мобильными пользователями. Они намного быстрее грузятся. Стоит ли их создавать? С одной стороны можно получить некоторый дополнительный трафик, однако этот вопрос еще недостаточно исследован. Также то, что их поддерживает Google, еще ни о чем не говорит, ведь проект может быть закрыт в любой момент.

Выводы

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