Ключевые особенности мобильной версии

Работа над адаптивным дизайном должна быть такой же кропотливой, как и работа над десктоп версией.

Как вы знаете мы много времени проводим в интернете со своих телефонов и в основном большенство услуг видим именно с телефона поэтому без мобильной версии сайт теряет больше 40 процентов потенциальных покупателей.

Давайте посмотрим как выглядит сайт без мобильного дизайна и с ним:

Как вы можете заметить есть принципиальные отличия:

1 В мобильной версии изменяются только стили, а не содержимое.

Весь контент остается тем же и размещается в том же порядке слева направо. То есть если на экране размещены два блока , то в мобильном дизайне блок слева будет размещен первым, а справа вторым.

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

3 Разрешение 750 пикселей по ширине.

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

4 Сайты, оптимизированные для мобильные устройства, занимают более высокие позиции в поисковых выдачах. Гугл и Яндекс не имеют четкого свода правил для мобильной версии, но можно провести тестирование своего сайта. Одним из ключевых параметров является размер шрифта, кегель должен быть на меньше 30 px или 20-25 для незначительных подписей. Сделайте межстрочный интервал больше, чем обычно тогда читать будет удобнее. Сложность в том чтобы разместить на баннере большое количество текста. Для этого требуется сильно увеличить пропорции баннера по вертикале, а шрифт сделать крупным и максимально контрастным фону.

5 Меню должно быть понятным и удобным, в мобильном дизайне всегда размещаете иконку телефона в меню, это увеличит конверсию. В видимом меню должны быть только основные пункты- корзина, если есть , телефон, логотип, часть поиск и гамбургер меню во всех мобильных версиях. Если меню будет прикреплено к верхнему краю во время скрола страниц - это упростит переход на другие страницы. Не размещаете слишком много иконок в видимом меню, максимальное кол-во 4.

6 Не скрывайте тексты которые нужны для продвижения под иконкой плюса или «подробнее» это снизит позицию сайта, все тексты оставьте в раскрытом виде

7 Все значки и кнопки увеличиваются минимум в 2 раза в сравнении с десктоп версией.

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

8 Раскрытые фильтры или сортировки в десктоп версии можно скрыть под одной кнопкой «фильтры». Вы можете посмотреть пример на сайте «связной» в каталоге.

Кроме фильтра можно так же скрыть незначительные блоки. Например если у вас много дополнительной информации в карточке товара, вы можете скрыть ее под кнопкой «Дополнительно», а при клике на кнопку вся информация будет выдвигаться вниз.

9 Гибкая сетка — один из отличительных признаков хорошего адаптивного дизайна. Пять столбцов превращаются в два на мобильных устройствах. Можно увидеть не примере Беханса или Дрибббл.

10 Старайтесь разбивать экраны на простые, чтобы с первого взгляда можно было понять основную мысль.. Если вы будете избегать мелких элементов и мелких отступов, то это будет неизбежно. Используйте горизонтальный скролл, если хотите экономично разместить информацию или блоки. Можете увидеть пример в мобильной версии сайта Trulia.

В заключении:

Google активно тестирует алгоритм выдачи Mobile First. Это означает, что в скором времени поисковики будут воспринимать мобильную версию сайта как «основную».

https://search.google.com/test/mobile-friendly

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