+38 (044) 495-31-30
Украина, г. Киев, ул. Ванды Василевской 7, офис 209

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

Автор: Екатерина Софина

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

Исследования маркетингового агентства Stone Temple дают нам следующие цифры: больше 55% трафика принадлежит заходам со смартфонов, ноутбуков и планшетов. При этом показатель отказов среди мобильных пользователей на 40% превышает соответствующий показатель среди десктопных.

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

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

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

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

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

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

адаптив интернет магазина по продаже кофе

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

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

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

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

— Если в адаптивной верстке есть недостатки, переключиться на обычную не получится.

— Бесплатно, если вы обладаете навыками для подключения и настройки соответствующего бесплатного шаблона.

— За умеренную плату, если доверите эту задачу специалисту. В целом стоимость адаптивной верстки для сайта на 40-100% выше стоимости статичной.

Блоги, визитки, небольшие интернет-магазины, информационные и корпоративные сайты.
(Примеры: Starbucks, Boston Globe)
Динамический показ — Единый URL.

— Повышается скорость загрузки страниц: «лишние» элементы удаляются из кода.

— Гибкость: возможность подстройки под особенности поведения и цели мобильной аудитории.

— Увеличивается нагрузка на сервер: как следствие, дольше загружаются страницы.

— Понадобится система распознавания девайсов, а это дополнительные расходы.

— Для владельцев разных устройств разрабатываются свои варианты верстки.

Высокая: в нее включается создание разных кодов для разных типов устройств и затраты на систему распознавания на сервере. Крупные новостные ресурсы, порталы
(Примеры: CNN, eHow)
Мобильная версия со своим URL — Независимая от основного сайта мобильная версия быстро загружается.

— Можно легко вносить изменения или вернуться к основной версии, если обнаружены баги или сбои.

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

— Удобная навигация и минимум отвлекающей информации для мобильной аудитории.

— Отдельный URL: необходимо настроить редиректы.

— Дублирование контента (или разработка отдельного контента для мобильной версии).

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

— Статистика настраивается на два разных канала.

Включает расходы на разработку мобильного сайта, приобретение доменного имени, оплату хостинга. Если контент будет отличаться от контента основной версии, то и эту статью расходов включаем в смету. Крупные интернет-магазины, почтовые сервисы, информационные порталы, соцсети. Сайты с высокой посещаемостью.
(Примеры: Walmart, Amazon)

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

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

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

  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 type=«email».
    • Для телефонного номера – input type=«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. Посетитель может совершить покупку в один клик.
Мобильная оптимизация делает трафик с мобильных устройств максимально прибыльным для вашего бизнеса. Вы можете настроить мобильную версию своего сайта самостоятельно, если у вас есть соответствующие навыки. Или доверить эту задачу профессионалам веб-студии «Бизнес Сайт» и получить нужный вам результат в короткие сроки.
Только до 19.06.2019 Разработка дизайна сайта и верстка под все разрешения экранов со скидкой 15% – успейте оставить заявку!
Екатерина Софина
Автор Екатерина Софина
Скачайте БЕСПЛАТНО книгу
"Сайт, который приносит
$100 000 чистыми в год"
Скачать
Получите скидку -15%
Заполните эту форму