Новость детальная

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

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

(Это H2) Вот это цифры!

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

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

(это H4) Заголовок H4

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

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

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

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

  • 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

sd

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

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

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

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

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

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

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

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

Пользователь, который зашел на ваш сайт со смартфона должен иметь возможность быстро связаться с вами в один клик. Телефонные номера и иконки телефонов — должны быть кликабельны. 

Пользователь, который зашел на ваш сайт со смартфона должен иметь возможность быстро связаться с вами в один клик. Телефонные номера и иконки телефонов — должны быть кликабельны. пример ссылки

  1. Нумерованный список 1
  2. Нумерованный список 2
  3. Нумерованный список 3

 

 

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