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

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

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

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

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

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

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

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

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

Десятое правило: правильно расположить блоки мобильной версии.

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

Рис.111. Дизайн мобильной версии, несколько экранов

Еще несколько советов:

оптимизируйте мобильный сайт под портретную ориентацию.

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

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

Сверните вторичный контент.

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

Пользователю должно быть удобно взаимодействовать с сайтом при помощи большого пальца.

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

С чего начинать:

Создание мобильной версии сайта начинается с переработки Главной страницы. Необходимо выбрать самую нужную информацию для мобильной версии и строго следовать канонам: один призыв к действию, минимальный набор текста и изображений. То есть все смысловое содержание должно направлять посетителя на выполнение определенного действия. Мобильный сайт должен помогать пользователю совершить лёгкую и быструю покупку товара или заказа услуги.

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

Сегодня построение «отзывчивых» (респонсивных) макетов сайта уже не основывается на контрольных точках (breakpoints) с фиксированной шириной. Вместо этого современные макеты должны нормально работать на устройствах практически любого размера. Отзывчивый дизайн предполагает нормальное открытие сайта на любых устройствах.

При создании мобильной версии алгоритм действий веб-дизайнера будет такой:

– главное изображение перенести на новую строку;

– уменьшить размер шрифта;

– составить карточки столбцом. См. рис. 112.

Рис.112. Переделка десктопной версии в мобильную

Итак, размеры файлов под разные устройства по ширине: