Главные ошибки при создании мобильной версии сайта

Аудитория мобильного интернета ежегодно растет и на 2018 год составляет более 60% жителей страны, это 67 млн человек. Что на 10% больше, чем в 2017 г. С планшетов интернет стабильно использует каждый пятый житель страны.

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

Я собрал для вас самые популярные ошибки, которые допускают web-дизайнеры и front-end разработчики:

1) Не учтены все популярные размеры экранов

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

У каждого сайта своя аудитория и размеры популярных дисплеев могут отличаться. Посомтрите веб-аналитику конкретного сайта, чтобы узнать самые распространенные разрешения. Это можно сделать например в Яндекс Метрике: Стандартные отчеты - Технологии - Разрешение дисплея.

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

360x640 px — Samsung Galaxy S3-7, LG G3-5
320×568 px — iPhone5
768x1024 px — Apple IPad
1024x768 px — Apple IPad
375x667 px — Iphone 6/7/X
414x736 px — Iphone 6/7/8 Plus
600x1024 px — Samsung Galaxy Tab

Проверить, как выглядит ваш сайт на любом экране можно с помощью специальных сервисов, например тут http://quirktools.com/screenfly .

2) Слишком большая "шапка" сайта

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

3) Некорректные отступы от краев сайта

Начнем с того, что отступы должны быть. Для мобильной версии надо обязательно делать отдельную сетку. Отступы от краев, слева и справа советую делать 15-25 px.

4) Плохой шрифт

В нашу эпоху главенствующего контента, важно думать над типографикой. Размер заголовков, текста, названия кнопок, интервалов между строк и т.д. - должны меняться, при изменении размеров экрана. Читабельный текст на самом маленьком экране должен быть не менее 12px.

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

5) Не кликабельный номер телефона

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