Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 69)

2. Размеры и разрешение файла

3. Чем отличается мобильная версия от адаптивной?

4. Что нужно учесть при разработке мобильной версии

1. Правила и особенности дизайна мобильной версии

В последнее время всё больше и больше пользователей просматривают сайты с мобильных устройств: с телефонов и планшетов. Если раньше говорили, что это соотношение примерно 50 на 50%, то по последним данным, просмотров с мобильников больше, чем с десктопных версий (с настольных компьютеров). Процент пользователей сайтов с мобильных устройств стал больше шестидесяти процентов и этот показатель увеличивается. Так что веб-дизайнеру нужно очень хорошо продумать мобильную версию сайта, чтобы не потерять этих 60% посетителей.

Рис.110. Прототип мобильной версии сайта

Первое правило: адаптивность.

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

Второе правило: укрупненный текст, упрощенный дизайн. Надо помнить, что мобильные устройства имеют ряд ограничений:

– маленький размер экрана;

– низкая скорость загрузки, по сравнению с компьютерами;

– сложности при вводе данных;

– некоторый контент не может быть отображен или отображается некорректно.

Всё это надо учесть, создавая мобильную версию. Придется пожертвовать «красотой», упростив дизайн, сколько возможно, а текст сделать крупным и читаемым.

Правило третье: мобильное меню делается отдельно, обычно оно имеет компактный вид и раскрывается как выпадающее лишь в момент нажатия. Обычное меню сайта на мобильных устройствах не используется из-за маленьких размеров текста.

Правило четвертое: все элементы сайта в мобильной версии должны быть хорошо видны пользователю, не должно быть затруднений при взаимодействии с интерфейсом. Кнопка «Купить» или «Заказать» должна иметь укрупнённый размер, чтобы пользователю не пришлось увеличивать экран.

Правило пятое: контент в одной колонке.

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

Правило шестое: убрать с мобильной версии некоторые инструменты.

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

Правило седьмое: сделать активными телефоны и мессенджеры.

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

Для этого на сайте в мобильной версии делают следующие шаги:

– размещают активную кнопку для телефонного звонка сразу с вызовом;

– контактные данные размещаются на первом экране, чтобы пользователь сразу обратил на них внимание;

– телефон компании делают кликабельной ссылкой, которая перенаправляет пользователя в контакты или сразу выполняет вызов;

– делают активными кнопки мессенджеров.

Правило восьмое: сделать кнопку «Поделиться» в соцсетях.

Мобильная версия наилучшим образом подходит для того, чтобы делиться новостями в соцсетях, поэтому на сайте оставляют ссылки на самые популярные ресурсы и кнопку «Поделиться».

Правило девятое: короткие формы обратной связи.