Через год 70% коммерческих запросов будут со смартфонов. Как не проиграть битву за них?

Как реализовать новые возможности и не проиграть битву за мобильную аудиторию? 12 простых идей, как подружить сайт со смартфонами ещё сильнее.

Мобильные посетители сегодня — это преобладающая часть аудитории почти на любом сайте в России. Да, речь и о коммерческих сайтах тоже.

Это стало реальностью совсем недавно. И меня поражает та стремительность, с которой это случилось. Люди всё больше сёрфят интернет со смартфонов и всё меньше с компьютеров и ноутбуков. И эта смена происходит всё быстрее.

Судя по данным Яндекс Радара, еще в начале этого года доля десктопного трафика в России была больше, чем мобильного. Сейчас она уже значительно меньше. Все идет к тому, что через 1 год на двух мобильных посетителей будет только один с десктопа, а еще через год это будет три на одного.

Скорее всего вы можете получать больше отдачи от своей мобильной аудитории и одновременно значительно повысить трафик с поиска. Для этого вам нужно сделать ваш сайт ещё лучше и удобнее для мобильных устройств. Об этом и идет речь в этой статье.

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

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

На вновь открытом сайте Иван Иванович, тем не менее, долго не задержится. Нет желания оставаться на нем, если поиск предлагает еще 20 других сайтов-конкурентов, которые наверняка более удобны и понятны. Это решение экономит ресурсы Ивана Ивановича — его время и силы.

Беда этих двух сайтов в том, что их мобильную версию делали не для того, чтобы Ивану Ивановичу было удобнее, а потому, что ее «требовали» Google с Яндексом. Часто бывает так, что чисто технически, сайт «адаптирован» к мобильным устройствам. Но с практической стороны, лучше бы такой «адаптации» вообще не было.

Часто мобильной версии сайта не уделяется достаточно внимания. Её многие по привычке считают как бы «дополнительной функцией». Когда мобильного трафика было мало, это было не критично. Сейчас все поменялось и нужно осознать, что «дополнительной функцией» скоро станет основная (т.е. десктопная) версия, без которой вполне можно будет даже обойтись.

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

Перед генерацией страницы на сервере, можно определять устройство и отправлять более подходящие для смартфонов данные.

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

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

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

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

Такие элементы должны быть достаточно большими, чтобы попасть в них пальцем. Это касается кнопок, форм, чекбоксов, гиперссылок и прочего.

В отличие от десктопов, смартфоны управляются пальцем, а их видимая область в один момент времени более ограничена. Помните об этом для того, чтобы сделать управление максимально простым для мобильных устройств.

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

Также проверьте шрифт. Он должен быть достаточно большим для чтения. Оптимальными должны быть отступы и междустрочные пробелы.

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

Мобильный дизайн должен быть минималистичным и в то же время полноценным.

Часто в мобильной версии дизайна мы вынуждены скрывать второстепенные элементы. Скрывая их, подумайте, действительно ли они нужны? Если нет, то они не нужны и на десктопной версии. Если да, то постарайтесь сохранить их. Например, вы можете придать им другую форму или вынести в отдельный раздел.

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

В крайнем случае имеет смысл сделать кнопку перехода на полную версию сайта.

Иван Иванович видит самодостаточную версию сайта. Он может легко оформить заказ или узнать адрес магазина, если захочет.

Используйте виджет связи WhatsApp для максимального эффекта.

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

Такой эффект достигается простотой: требуется всего клик, чтобы начать общение в привычном интерфейсе WhatsApp. А его широкое распространение делает такой инструмент незаменимым.

Также вы можете и сами сделать ссылку или кнопку, но все-таки я советую попробовать специальные сервисы, где все продумано для достижения максимального результата, такие как Leadball Whatsapper.

Всего за один клик Иван Иванович связывается с менеджером магазина и на всякий случай уточняет, актуальны ли всё еще цены, которые указаны на сайте. Он часто переписывается по WhatsApp со своими внуками и для него это самый удобный и привычный способ коммуникации.

Навигация на мобильных устройствах должна быть удобна и очевидна.

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

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

Это кажется банальностью, но не все задумываются об этом в контексте мобильных устройств.

Иван Иванович без труда изучает сайт, переходя со страницы на страницу. Он приятно удивлен, что ему не приходиться что-то долго искать и разбираться, как тут всё устроено.

Для смартфонов в большей степени чем для десктопов важна краткость подачи информации.

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

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

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

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

Любую информацию, которая нужна Ивану Ивановичу он получает в сжатом и понятном виде. У него нет времени на чтение длинных текстов и на поиск ключевых параметров в описании холодильников.

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

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

Многие не знают, когда лучше использовать JPEG а когда PNG. Если вы в их числе — разберитесь с этим. Остальные форматы используются намного реже, например GIF — для анимации или как устаревший аналог PNG. SVG — для вывода векторных рисунков. Если говорить о современных форматах, таких как WebP — то да, за ними будущее, но пока их время еще не пришло.

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

Lazy loading — это еще один способ оптимизировать просмотр изображений. Если коротко, то сайт загружает отдельные изображения только тогда, когда они становятся нужны.

Иван Иванович не ждет когда «догрузятся» все изображения, вспоминая лихие 90-е и его первый Диалап модем. Теперь все картинки появляются за одно мгновение.

Ищите способы оптимизировать браузерные скрипты.

Посмотрите, какие «js» и «css» загружают мобильные пользователи. Возможно, что-то из этого им просто не нужно или это можно оптимизировать.

Несколько мыслей на счет того, какие способы для этого есть:

Благодаря работе программистов сайт стал крайне быстрым. Ивану Ивановичу кажется, что это какое-то волшебство.

Убедитесь, что сервер быстро отдает страницы.

Если это не так, тогда подумайте, как это можно исправить. Несколько мыслей для этого:

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

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

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

Отлично, если подобные ссылки будут иметь вид кнопки с призывом к действию.

Иван Иванович, управляясь также одной рукой, кликает по кнопке с GPS координатой и с легкостью делает закладку в навигаторе. После прогулки он планирует поехать посмотреть холодильник его мечты.

Тестируйте альтернативы email-рассылок для мобильной аудитории.

Эффективность email рассылок постепенно снижается. Альтернативой остаются социальные сети и каналы в мессенджерах, таких, как Telegram. Подписаться на них проще (не нужно вводить адрес, достаточно только клика). И в итоге, процент прочтения ваших отправлений будет выше.

Не думаю, что имеет смысл совсем отказаться от email-рассылок. Однако тестировать альтернативы для мобильной аудитории — разумная мысль.

Ивану Ивановичу показалась классной идея, что он теперь может получать новости о скидках этого магазина в Телеграм. Всего пара кликов, и вот он теперь не просто посетитель сайта, а подписчик!

Мобильное приложение поможет стать ближе к своей аудитории.

Если у вас много мобильного трафика, задумайтесь еще раз, возможно самое время сделать свое мобильное приложение. Это может дать серьезное преимущество в конкурентной борьбе.

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

Вам не придется тратить деньги на рекламу вашего приложения. Просто предлагайте установку на сайте.

В целом, это хороший способ стать еще ближе к своей аудитории. Но данный вопрос нужно спланировать основательно, так как это подойдет не всем.

Ивану Ивановичу показалось мало стать только подписчиком. Он устанавливает себе и мобильное приложение этого магазина. Что оно делает, он так и не понял. Может быть он сможет управлять своим новым холодильником через него?

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

Мобильные пользователи чаще начинают сессию в Интернете с поиска. Это значит, что важность SEO для бизнеса увеличивается с распространением мобильных устройств.

По данным Яндекса в России лидером поиска на мобильных устройствах сегодня является ... Яндекс! Но как они смогли перегнать Google с его Андроидом для меня остается загадкой.

Учитывайте местоположение посетителей и используйте эту информацию.

По информации Google, почти 2/3 пользователей смартфонов чаще покупают у компаний, чьи мобильные сайты подстраивают контент в соответствии с их местоположением.

Используйте Турбо-страницы и AMP предварительно взвесив все «за» и «против».

Альтернативой мобильной версии по прежнему остаются Турбо-страницы Яндекса и AMP от Google. Это отличные инструменты, но есть много «но», например, ограниченный функционал и дизайн.

Перед тем, как их внедрять, рекомендую изучить все «за» и «против». Тут есть над чем подумать, не всё однозначно. В целом, это хорошая идея, если применить ее правильно. И главное — это не отменяет необходимость работы над своей мобильной версией.

Этот выбор уже не имеет смысла. Но если нужно быстро и недорого с чего-то начать, пусть это будет лучше адаптивная верстка.

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

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

Будьте лучше своих конкурентов на мобильных устройствах.

Не забывайте периодически заходить к себе на сайт и на сайты своих конкурентов и сравнивать их мобильные версии с вашей. Не бойтесь копировать у них то, что у них сделано лучше чем у вас. Если трафика хватает, выводите новые гипотезы и делайте сплит-тесты.

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

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