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

Доля мобильного интернет-трафика растет. Согласно исследованию агентства We Are Social и платформы Hootsuite, в мире этот показатель уже перевалил за 50 %. В России цифры чуть меньше, но не адаптировав сайт для разных устройств, вы все равно рискуете упустить 20-30 % потенциальных клиентов.

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

Доступность контента и функционала

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

Самое сложное в разработке — корректно разместить весь контент на небольшом экране мобильного телефона или смартфона. Чтобы добиться этого, нужно продумать два нюанса.

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

2. В каких мобильных браузерах предположительно пользователи будут просматривать сайт. Рекомендуем использовать последние версии, чтобы повысить безопасность и функциональность взаимодействия с ресурсами.

Посмотрите на сайт VC в мобильной и десктопной версиях.

Из мобильной версии исчезло большинство блоков, осталось только самое главное — основной контент, меню, блок хештегов, строка поиска, логотип и кнопка «Войти».

Принципы Mobile First и «прогрессивное улучшение»

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

Принцип «изящной деградации»

Когда нужно адаптировать существующий сайт, используют принцип «изящной деградации» — постепенное упрощение сайта:

• скрываются декоративные элементы;

• трансформируется порядок выведения контента;

• упрощаются элементы управления.

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

Оптимизация скорости загрузки и взаимодействия

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

• Уменьшить размер файлов или «сжать» их. Особенно актуально для изображений — декоративное оформление, фотографии, иконки.

• Соединить файлы с кодом сайта в один файл — «склеить» файлы стилей, скриптов, изображения.

• Настроить сохранение ресурсов в браузере — кэширование.

• Настроить время сертификации ресурсов.

Проверять скорость загрузки для мобильных устройств удобно инструментом Google PageSpeed Insights. Он не только покажет, насколько сайт быстрый, но и расскажет, как исправить ситуацию.

Просто вбейте адрес в строку и кликните «Анализировать»

Навигация и юзабилити

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

Адаптируем главное меню сайта

Удобную навигацию по сайту обеспечивает адаптивное меню. Реализовать его можно двумя способами:

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

• Пункты меню располагаются горизонтально в одну строку. Если их слишком много, наименее важные скрываются. Просмотреть скрытые пункты можно с помощью горизонтального скроллинга строки меню.

Удобное крупное меню разворачивается по нажатию на узнаваемую иконку

Оформляем контент и элементы управления

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

Размер шрифта не менее важен, так как на сайтах преобладает текстовый контент. Чтобы пользователю было удобно читать и выделять текстовую информацию, лучше сделать основной контент шрифтом в 14-16 px.

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

Облегчаем взаимодействие пользователя с сайтом

Чтобы обеспечить простое взаимодействие пользователя с сайтом:

• Используйте стандартные решения для меню и навигации — расположение, поведение, оформление. Есть библиотеки и фреймворки с коллекцией элементов управления и набором стилей оформления контента: Bootstrap (Twitter), Material Design (Google), BEM Components (Yandex).

• Постарайтесь в мобильной версии сайта сохранить кнопки и переключатели в том же виде, что и в десктопной, насколько это возможно.

• Следите, чтобы элементы управления и контент были логически связаны.

На десктопе пользователь взаимодействует с ресурсами в сети с помощью клавиатуры и мыши. Последняя играет важную роль — позволяет выделять, указывать, нажимать на контент и элементы управления. Визуальное отображение этих действий — курсор. Как быть с носимыми устройствами, в которых нет ни мыши ни курсора? Тут их заменяют пальцы и стилусы. Важно помнить, что событие наведения курсора на объект в мобильных устройствах не работает и заменяется касанием. Кроме того, в мобильной разработке используются стандартные жесты управления: касание, нажатие, удержание, двойное нажатие, перетаскивание, резкое касание, скроллинг, свайпинг, прокрутка с помощью двух пальцев, разведение пальцев в стороны.

Рассмотрим наиболее распространенные жесты:

• Тап – клик в мире мобильных устройств. Однократное непродолжительное нажатие на элемент.

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

• Долгое нажатие — аналог правого клика. На большинстве мобильных платформ долгим нажатием вызывается контекстное меню или дополнительные действия, связанные с объектом.

• Стягивание и растягивание используются для увеличения/уменьшения изображений, приближения/отдаления карт, увеличения/уменьшения веб страниц.

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

Чтобы сделать навигацию по странице интуитивно-понятной и удобной, избегайте горизонтальной прокрутки. Чтобы пользователю было удобно листать страницу по-вертикали, с левой и правой стороны должно быть свободное место — поля размером 15-30 px в ширину.

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

Всплывающие окна, подсказки — скрытые элементы, которые появляются после каких-то действий на странице: касание, нажатие и пр. — должно быть удобно скрывать. Это можно обеспечить с помощью кнопки или по нажатию на область, за пределами «всплывшего» элемента.

Полезные ссылки

• Проверить доступность сайта в браузерах: Can I Use

• Проверка оптимизации для мобильных: инструмент Google

• Основы разработки по принципу Mobile First: в статье A List Apart

• Для дизайна под мобильные устройства: Material Design, Библиотека BEM Components, оф. сайт Bootstrap