Оптимизация сайта под мобильные устройства: на что обращать внимание в дизайне

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

Еще немного интересной статистики:

• 60% пользователей не возвращаются повторно, если мобильная версия оказалась неудобной.
• 80% сайтов, присутствующих в рейтинге Alexa Rank, адаптированы под экраны небольших размеров.
• 57% респондентов не станут рекомендовать друзьям и знакомым сайт с некорректной мобильной версией.

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

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

   Аналогичные тенденции наблюдаем и в рекомендациях Яндекс:

   «Поисковые системы улучшают выдачу результатов поиска для пользователей мобильных устройств (смартфонов, планшетов)».
2. Улучшение конверсии. Статистика исследований неумолима: средняя продолжительность визита на сайт десктопных пользователей составляет 5,05 минуты. В то же время мобильный пользователь проводит на сайте в среднем чуть больше 3 минут. Если сайт будет долго загружаться, часть элементов на нем не будет отображаться, шрифт будет мелким или кнопка заказа окажется некликабельной, посетитель скорее всего уйдет к конкурентам. Дальше мы рассмотрим, на что следует обратить внимание в дизайне, чтобы повысить конверсию среди пользователей мобильных устройств.

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

Чтобы при заходе со смартфона или планшета посетители могли так же удобно просматривать ваш сайт, как и с ПК, есть три варианта действий:

1. Разработать мобильную версию: еще один сайт на поддомене или подкаталоге, который имеет свой собственный URL (в формате m.example.com).
2. Сделать адаптивный дизайн для уже существующего сайта. Один и тот же исходный HTML-код адаптируется под разрешение экрана каждого пользователя. Этот вариант рекомендует использовать Google.
3. Дополнить исходную версию кода вариантами для динамического показа. Сервер идентифицирует устройство, с которого зашел пользователь, и демонстрирует ему соответствующий HTML-код.

На что обратить внимание при оптимизации сайта

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

1. Корректность работы мобильной версии. Кроссбраузерность и кроссплатформенность. Важно проверить, как отображается ваш сайт на различных устройствах. Сделать это можно с помощью сервисов: Quirktools, Turbonet, Browsershots и других.
2. Скорость загрузки. По статистике, каждая секунда загрузки «стоит» 3-7% конверсии. Хорошая скорость загрузки для мобильных устройств – 3 секунды. Проверить скорость своего сайта можно с помощью: PageSpeed Insights, Web Page Performance Test, GTmetrix, Pingdom Website Speed Test.
3. Элементы, которые не отображаются на некоторых устройствах. В борьбе за внимание мобильного пользователя крайне важно не оттолкнуть его такими деталями. Старайтесь избегать анимированных эффектов с использованием Flash, которые не поддерживаются девайсами Apple. Будьте осторожны с виджетами, обязательно тестируйте их перед запуском. К тому же, чем проще дизайн, тем быстрее будут загружаться страницы.
4. Количество полей в форме захвата. Длинная форма захвата снижает конверсию, но особенно заметно это сказывается на мобильной аудитории, поскольку вводить данные с телефона сложнее. Постарайтесь максимально сократить путь клиента от знакомства до заказа. В некоторых случаях достаточно взять номер телефона, а остальную информацию дополучить в телефонном разговоре с менеджером. Если требуется больше информации, разделите ее на блоки и представьте в виде последовательных шагов, где на первом этапе посетитель вводит свое имя и телефон. В этом случае, даже если он бросит заполнение после первого шага, у вас останется его телефонный номер.
5. Контакты. Некоторые сайты «грешат» размещением контактных телефонов в виде картинок. Просто представьте, как человеку, зашедшему с мобильного устройства, придется запоминать цифры и потом самостоятельно вводить их для звонка, особенно, когда он спешит. Номер телефона должен быть представлен в полном варианте и в текстовом формате. Идеальный вариант – кнопка для автоматического набора номера и кнопки для мгновенной связи в мессенджерах (Viber, Telegram, WhatsApp).
6. Удобство активных ссылок и кнопок для touch-скрина. То, на что легко нажать курсором мыши на ПК, далеко не всегда так же удобно для нажатия на сенсорном экране. И это может сыграть против вас в самый неподходящий момент: когда клиент уже принял решение и хочет совершить целевое действие. Если нажать на кнопку или ссылку не получится, он просто закроет сайт и уйдет к конкурентам. Поэтому придерживайтесь параметров кликабельных элементов:
   • минимальный – 26px;
   • средний – 34px;
   • идеальный – 44px.
7. Разборчивый шрифт, понятный текстовый контент. Вряд ли человек, зашедший с мобильного устройства, будет вчитываться или увеличивать текст, чтобы задействовать ваши триггеры, узнать преимущества или внять призывам к действию. Убедитесь, что текстовый контент в мобильной версии соответствует оптимальным нормам:
   • Минимальный размер шрифта – не менее 16 px.
   • Наличие межстрочных интервалов, которые делают текст читабельным на любом экране. Минимально – 1px.
   • Отступы от боковых краев экрана: min 15 px.
   • Шрифты – без засечек (Roboto, Futura, Helvetica, Apercu и другие). Не более трех шрифтов на страницу, гармонирующих между собой.
   • Текст следует разбить на колонки с длиной строки 70-80 символов (8-10 слов) и установить для них контрольные точки. Пример кода дает в рекомендациях разработчикам Google.
8. Автозаполнение полей. Вводить с мобильных девайсов информацию крайне неудобно, особенно если клиент спешит. В этому случае повысить конверсию и удержать клиента помогут автозаполнения. Просто добавьте в строки соответствующий код:
   • Для адреса электронной почты – input ENGINE=«email».
   • Для телефонного номера – input ENGINE=«tel».
   • Физический адрес – input type=«text».
   • Почтовый индекс или карточные реквизиты – input type=«text» pattern=»\d*».
   • День в календаре – input type=«date».
9. Удобный дизайн. Все, что сложно воспринимается с небольшого экрана мобильных девайсов, будет отталкивать посетителя. От таких элементов следует избавится, даже если в десктопной версии они прекрасно выполняют свою роль. Исследования показывают, что 57% респодентов не будут рекомендовать сайт, если версия для мобильных устройств не удобная или выглядит дешево.
   • Делайте акцент на фото: высокая детализация изображений, белый фон, раскрытие на весь экран при просмотре.
   • Структурированность. Объединяйте похожие товары или контент в рубрики и категории.
   • Текстовый контент. Его можно оставить таким же, как в основной версии, но сократить. Или создавать отдельный контент, если у мобильной версии сайта собственный адрес и для продвижения нужен уникальный текст.
   • Крупные и контрастные кнопки целевого действия. Их должно быть легко и удобно нажимать с сенсорных экранов.
10. Отсутствие навязчивой рекламы. Более 70% мобильных пользователей считают неприемлемой рекламу на своих устройствах. Со стороны поисковой системы Google уже поступило предупреждение о том, что сайты, на которых реклама затрудняет доступ к контенту, будут терять позиции в мобильной выдаче. Главным образом речь идет о всплывающих окнах, межстраничной рекламе и крупных баннерах, размер которых превышает 20% экрана. Оптимально размещать на сайте не более одного рекламного объявления, которое не блокирует доступ к основному контенту.

Чек-лист для проверки мобильной оптимизации интернет-магазина

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

1. Все элементы на сайте правильно отображаются, ссылки и кнопки кликабельны.
2. Информация читабельна, корректно отображается в вертикальном и горизонтальном положении экрана.
3. На страницах отсутствуют «тяжелые» файлы (видео, аудио, изображение), которые замедляют загрузку.
4. Нет Flash-анимированных элементов.
5. Нет навязчивой рекламы, перекрывающей контент.
6. Телефонный номер для связи легко копируется или активируется нажатием в звонок.
7. Нет необходимости в горизонтальной прокрутке независимо от диагонали экрана устройства.
8. Форма для заказа товара краткая, присутствует автозаполнение.
9. Навигация позволяет быстро перейти к нужной категории и найти конкретный товар.
10. Посетитель может совершить покупку в один клик.