Всем привет! С вами интернет-агентство Информбокс. Сегодня поговорим о создании сайтов, а точнее — об их адаптивных мобильных версиях.
Доля мобильного интернет-трафика растет. Согласно исследованию агентства We Are Social и платформы Hootsuite, в мире этот показатель уже перевалил за 50 %. В России цифры чуть меньше, но не адаптировав сайт для разных устройств, вы все равно рискуете упустить 20-30 % потенциальных клиентов.
Поговорим о том, как сделать сайт удобным и доступным для мобильных пользователей. Вот несколько советов.
Обеспечьте доступность контента и функционала
Проектируя адаптивный сайт или адаптируя существующий, важно обеспечить удобный доступ к контенту с мобильных устройств: мобильного телефона, смартфона, планшета. Контент на таких устройствах должен быть доступен также, как на десктопах.
Самое сложное в разработке — корректно разместить весь контент на небольшом экране мобильного телефона или смартфона. Чтобы добиться этого, нужно продумать два нюанса.
- Что можно скрыть в мобильных устройствах. Как правило, это элементы дизайна, не несущие смысловой и информационной нагрузки.
- В каких мобильных браузерах предположительно пользователи будут просматривать сайт. Рекомендуем использовать последние версии, чтобы повысить безопасность и функциональность взаимодействия с ресурсами.
Посмотрите на сайт 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 в ширину.
Поля форм должны умещаться в один экран без скролла, иметь подсказки и динамически выводимые сообщения. На экранах с маленькой шириной поля форм располагаются в столбик. Это облегчает заполнение форм на сайте.
Всплывающие окна, подсказки — скрытые элементы, которые появляются после каких-то действий на странице: касание, нажатие и пр. — должно быть удобно скрывать. Это можно обеспечить с помощью кнопки или по нажатию на область, за пределами «всплывшего» элемента.
Оригинал этой статьи размещен в нашем блоге.
Читайте также:
3 способа проанализировать конкурентов в Директе
Вредные советы: как побыстрее слить бюджет в Директе. Часть 1
Вредные советы: как побыстрее слить бюджет в Директе. Часть 2
Чтобы видеть в ленте полезные материалы по интернет-маркетингу и контекстной рекламе, подписывайтесь на наш канал.