ТОП-5 ошибок мобильной адаптации сайтов

Ошибки мобильной адаптации сайтов
Статьи
Автор: Олег Фролов
«Руководитель проектов команды "Бизнес-Мотор", вебмастер, копирайтер.
Удобство использования сайта с мобильного - залог успешного взаимодействия. Ошибки мобильной адаптации, о которых говорим в этом обзоре, критично сказываются на пользовательском опыте»

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

анализ сайтаМобильная адаптация: отслеживаем пользовательский опыт

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

1. Неудачное использование контейнеров

Основа современной адаптивной вёрстки – это колонная структура, в рамках которой элементы страницы объединяются в ряды (rows) с горизонтально расположенными контейнерами. При сужении экрана до определенного значения эти контейнеры выстраиваются в одну вертикальную колонку, которую и пролистывает вверх/вниз пользователь мобильного устройства.

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

мобильная адаптация - Расположение блоков в зависимости от формата экрана

Решений этой проблемы может быть несколько:

  • скрывать не слишком важные блоки на узких экранах;
  • «прятать» второстепенный, но расположенный выше контент в раскрывающиеся элементы (например, аккордеон);
  • использовать flex-верстку , позволяющую задавать, в каком порядке выстраивать блоки на мобильных устройствах.

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

2. Блоки с прокруткой

Для экономии места на сайтах нередко используются блоки с прокруткой. На десктопах (широких экранах) особой проблемы это не представляет, ведь управление происходит с помощью мыши. Другое дело – мобильные устройства, где пользователь адаптивного сайта пролистывает страницу вверх и вниз, а все блоки выстроены в одну колонку на всю ширину экрана. Результат предсказуем: сайт прокручивается вниз, пока в зону видимости не попадает блок с собственным скроллом, и чтобы продолжить движение юзеру придется пролистать все содержимое этого блока.

 Блок с прокруткой ухудшает пользовательский опыт

Решение этой проблемы на поверхности – на узких экранах использовать прокрутку внутри отдельных блоков на странице не стоит. Вместо этого лучше разворачивать их по клику или показывать в полную высоту.

3. Несворачиваемое меню

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

Посмотрите, как выглядит неудачный вариант меню:

неудобное меню мобильного сайта - ошибки адаптации

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

Намного удобнее выглядит практика, при которой меню на сайте при просмотре с мобильного устройства вызывается по специальной иконке:

Ошибки мобильной адаптации - удобное меню

4. События при наведении курсора

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

5. Мелкий шрифт и маленькие активные элементы

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

анализ сайтаРазмер шрифта — новый фактор ранжирования Яндекс

Яндекс рекомендует шрифт не менее 12px для мобильных версий сайта.

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

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

Выводы

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

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

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

ТОП-5 ошибок мобильной адаптации сайтов: 2 комментария

  1. Константин

    1. Адаптивный дизайн вообще зло, он жрёт много рессурсов и на таких недокомпьютерах как смартфоны это может быть критично… лучше всего здесь использовать flexbox, но всё равно перерисовки при динамеке не избежать.

    2. Динамика вообще зло, если с сайтом нельзя работать без javascript это плохо. Лучше всего реализовать простейший анкор-переход. Например, иконка меню в шапке перекидывает вниз страницы, где есть статичное меню и кнопка «вверх».

    3. Любая динамика это всегда удар по ресурсам, даже в условиях современных технологий. Увы найти компромисса здесь невозможно, только статика, только следование микро-формату. Думаю, здесь очень актуален формат первобытного WAP Интернета.

    4. К сожалению невозможно учесть все аспекты адаптации… тут надо копать глубже, ведь адаптируется не только каркас, но и контент. А в плане 12px, советую попробовать мой одноимённый букмарклет — наглядно показывает проблемыне элементы, взять можно тут: chuvyr.ru/p/bookmarklet.html

Добавить комментарий

Войти с помощью: 

Статьи по теме

Yet Another Conference Yandex 2016
Статьи
Yet Another Conference on Marketing 2016
Ежегодно Яндекс проводит масштабную маркетинг-конференцию, в которой принимают участие ...
Правильный текст на сайте
Статьи
Текст на сайте — исправьте это немедленно!
С текста начинается близкое знакомство пользователя и товара. Правильный текст определя...