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

Запись опубликована в рубрике Веб-разработка, Советы. Добавьте в закладки постоянную ссылку.
Наши специалисты
всегда готовы ответить
на ваши вопросы

Доля мобильного интернет-трафика растет. Согласно исследованию агентства 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 в ширину.

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

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

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

Наши специалисты
всегда готовы ответить
на ваши вопросы


Спасибо, что читаете наш блог

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

Что скажете?

avatar
  Подписаться  
Уведомление о