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

12.10.2017 60 Марина Петрова

Аудитория мобильного интернета ежегодно растет и на 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 
412x736 px — Iphone 6/7 Plus
600x1024 px — Samsung Galaxy Tab

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

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

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

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

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


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

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

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

Подпишитесь на полезные материалы