Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 31)
7. Дополнительные страницы
Кроме этих страниц, бывает еще много дополнительных страниц на сайте (например, страница «Услуги», «Статьи», «Доставка» и т.д.), все они должны быть выполнены в едином стиле с первой страницей, иметь одинаковую «Шапку» и «Подвал». Их текстовое наполнение должно иметь одинаковую разметку заголовками и подзаголовками на всём сайте.
Во время разработки веб-дизайна дополнительно могут быть сделаны дизайны страниц: «Обучение», «Партнёрам», «Цены» (прайс), «Как оплатить заказ», «Корзина товаров», «Оплата и доставка», «Статьи» и т.д.
Глава 15. Веб-дизайн мобильной версии
В этой главе:
1. Правила и особенности дизайна мобильной версии
2. Размеры и разрешение файла
3. Чем отличается мобильная версия от адаптивной?
4. Что нужно учесть при разработке мобильной версии
1. Правила и особенности дизайна мобильной версии
В последнее время всё больше и больше пользователей просматривают сайты с мобильных устройств: с телефонов и планшетов. Если раньше говорили, что это соотношение примерно 50 на 50%, то по последним данным, просмотров с мобильников больше, чем с десктопных версий (с настольных компьютеров). Процент пользователей сайтов с мобильных устройств стал больше шестидесяти процентов и этот показатель увеличивается. Так что веб-дизайнеру нужно очень хорошо продумать мобильную версию сайта, чтобы не потерять этих 60% посетителей.
Самое главное в дизайне сайта для мобильных телефонов –
Второе правило:
– маленький размер экрана;
– низкая скорость загрузки, по сравнению с компьютерами;
– сложности при вводе данных;
– некоторый контент не может быть отображен или отображается некорректно.
Всё это надо учесть, создавая мобильную версию. Придется пожертвовать «красотой», упростив дизайн, сколько возможно, а текст сделать крупным и читаемым.
Правило третье:
Правило четвертое
Правило пятое:
Чтобы блоки сайта хорошо просматривались пользователями, веб-дизайнеры помещают контент в одну колонку. Текст и изображения располагаются по ширине, делается вертикальный скроллинг и одноколоночная структура.
Правило шестое:
Например, плохо отображаются на мобильной версии различные чаты с онлайн-консультантами, появляющиеся формы для подписки,
Правило седьмое:
Главное целевое действие для мобильных устройств – это получить звонок от клиента.
Для этого на сайте в мобильной версии делают следующие шаги:
– размещают активную кнопку для телефонного звонка сразу с вызовом;
– контактные данные размещаются на первом экране, чтобы пользователь сразу обратил на них внимание;
– телефон компании делают кликабельной ссылкой, которая перенаправляет пользователя в контакты или сразу выполняет вызов;
– делают активными кнопки мессенджеров.
Правило восьмое:
Мобильная версия наилучшим образом подходит для того, чтобы делиться новостями в соцсетях, поэтому на сайте оставляют ссылки на самые популярные ресурсы и кнопку «Поделиться».
Правило девятое:
Максимально простите и укоротите форму обратной связи, так как заполнять длинную форму на мобильном устройстве очень неудобно. Самое лучшее решение – оставить посетителю сайта минимум полей для заполнения в мобильной версии. Упрощение ввода данных увеличивает уровень конверсии сайта, так как пользователю не нужно совершать сложные действия, чтобы получить нужный результат.
Десятое правило:
Часто веб-дизайнеры используют в дизайне сайта пустое пространство (интервалы между элементами дизайна), с помощью которых можно привлечь внимание пользователя к нужной детали. Однако, при перестройке сайта под меньший размер экрана (под мобильную версию), эти пустые интервалы сокращаются. Чтобы сохранить концепцию дизайна, пространство перераспределяют, изменяют расположения блоков и элементов сайта.
Еще несколько советов:
При помощи смартфона сайты можно просматривать не только в портретном, но и в ландшафтном режиме. Для этого нужно просто перевернуть устройство. Однако большинство пользователей все-таки предпочитают держать смартфон вертикально и пролистывать страницы одной рукой.
Для портретной ориентации отлично подходят сайты в один столбец. В этом стиле элементы сайта размещаются последовательно сверху вниз. Хотя выравнивание содержимого по центру является обычным явлением, чередование выравнивания по левому и правому краю может создать визуальный интерес и иллюзию макета из двух столбцов. Кроме того, более мелкие элементы, такие как значки и фотографии, могут быть представлены в виде сетки, в то время как «карусели» изображений могут разнообразить вертикальную прокрутку, так как их нужно будет прокручивать горизонтально.
На сайтах для ПК обычно достаточно места для подробного основного текста, характеристик, фотографий продукта и другого контента. Но поскольку мобильные версии требуют, чтобы информация была представлена как можно более лаконично, дизайнерам следует удалить или сократить весь несущественный контент.
По данным исследований, в 75% случаев пользователи взаимодействуют со смартфоном при помощи большого пальца. Это включает в себя прокрутку, нажатие и ввод текста, при этом остальные пальцы заняты поддержкой задней панели телефона. Учтите также, что во многих случаях пользователи держат свой телефон одной рукой, одновременно занимаясь другими делами. Таким образом, очевидно, что дизайнеры должны уделять этому внимание при создании сайтов для мобильных устройств.
Создание мобильной версии сайта начинается с переработки Главной страницы. Необходимо выбрать самую нужную информацию для мобильной версии и строго следовать канонам:
2. Размеры и разрешение
Сегодня построение «отзывчивых» (
– главное изображение перенести на новую строку;
– уменьшить размер шрифта;
– составить карточки столбцом. См. рис. 112.
Десктоп (настольный компьютер): 1920 пикселей (будут поля слева и справа)
Планшет вертикально: 768 пикселей, Ipad: 1024 пикселя
Мобильные телефоны: 320 пикселей, см.рис.113.