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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Десктоп (настольный компьютер): 1920 пикселей (будут поля слева и справа)

Планшет вертикально: 768 пикселей, Ipad: 1024 пикселя

Мобильные телефоны: 320 пикселей, см.рис.113.

Рис.113. Ширина дизайна сайта для разных устройств

Но, кроме ширины, в дизайне мобильной версии надо еще задать длину, как правило, она равняется длине экрана конкретного устройства. См. рис.114.

Рис.114. Размеры экранов мобильных устройств

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

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

Мобильная версия может полностью отличаться от основного сайта: от общей концепции до наполнения блоков контентом. Мобильная версия – это отдельный сайт, со своим адресом, интерфейсом и зачастую заметно измененной структурой. Это полноценный второй сайт со своей вёрсткой. В ссылке вы обычно видите букву “m” или “mobile”, а далее следует привычный адрес ресурса (например, m.imagika.ru). Среди плюсов – быстрая загрузка и возможность переключаться между версиями. Трудности могут возникнуть с SEO и с отсутствием единого адреса.

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

Адаптивный дизайн – это не другой сайт, а тот же, но свёрстанный так, что открывается нормально на любых экранах. Он по информации не отличается от обычного десктопного сайта. Мобильная же версия может содержать меньше информации, быть лаконичнее. Адаптивный сайт – это единственный сайт, который приспосабливается под размеры экрана. В коде прописано, какие блоки и как показывать на разных устройствах.

Плюсы: один адрес и удобство разработки. Минусы: долгая загрузка и предопределенная судьба пользователя: он не сможет поменять интерфейс, если тот покажется неудобным.

Респонсивный дизайн или RESS (Responsive design + Server side), он же «отзывчивый» дизайн. Сайт тоже один, но в нем заложено несколько независимых шаблонов для разных устройств. Плюсов много – единый адрес, быстрая загрузка, возможность переключиться на десктоп с мобильного устройства. Минусы – дорогая и сложная разработка.

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

Какой метод выбрать – это зависит от проекта, над которым вы работаете. Адаптивный дизайн отлично подойдет для небольших сайтов и интернет-магазинов. Мобильная версия подойдет для тех ресурсов,