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

Советы директора по дизайну продуктов Viget Кевина Виньо.

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

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

Рассмотрим типичную маркетинговую страницу — лендинг Google Nexus. У неё ясный и лаконичный адаптивный дизайн, она красиво форматируется на экране любого размера.

Однако на смартфоне вам придётся очень долго добираться до конца страницы, постоянно прокручивая экран. На MacBook длина этой страницы составляет около 4500 пикселей, это в шесть раз превышает высоту видимой области окна браузера.

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

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

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

Однако на телефоне вы сможете просмотреть эти продукты только по одному за раз. И передвигаясь по этой странице, вряд ли поймёте, что они относятся к одной группе. Это, конечно, не конец света, но и не оптимальное восприятие контента.

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

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

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

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

#Интерфейсы