Размер (высота) мобильной версии сайта часто упускается из виду, в то время как на мобильных устройствах, страницы могут получаться довольно объемными (по длине).

Какие есть способы решения этой проблемы?

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

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

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

Давайте рассмотрим пример

Страница лендинга Google’s Nexus (google.com/nexus/). Этот лендинг имеет приятный, чистый дизайн и создана по требованиям адаптивного дизайна.

Но если открыть ее на экране смартфона, вы заметите, что она занимает довольно много места по высоте.

Итак, в чем проблема?

Изначально, конечно, слишком большая длина сайта в мобильной версии не является серьезной проблемой.

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

К примеру, на той же странице Nexus в обычном ее формате есть группировка элементов, в мобильной же версии ее нет.

Существует ли альтернатива?

Для ориентира группировки элементов можно использовать примерную высоту экрана девайса. Если рассматривать тот же пример с Nexus, то результатом группировки может служить следующий вариант

С помощью сокращения размера заголовков и фотографий эскизов можно уместить все содержимое этого раздела на одном экране без скроллинга.

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