Размер (высота) мобильной версии сайта часто упускается из виду, в то время как на мобильных устройствах, страницы могут получаться довольно объемными (по длине).
Какие есть способы решения этой проблемы?
При проектировании адаптивных сайтов дизайнер чаще всего концентрируется на правильном отображении веб-ресурса на разных устройствах.
Это имеет смысл, учитывая, что горизонтальная прокрутка не удобна ни при отображении сайта на десктопе, ни на экране смартфона.
Самым простым решением является расположение всех элементов в одну колонку для правильного отображения на небольших экранах. В результате, получается сайт с очень большой высотой прокрутки.
Давайте рассмотрим пример
Страница лендинга Google’s Nexus (google.com/nexus/). Этот лендинг имеет приятный, чистый дизайн и создана по требованиям адаптивного дизайна.
Но если открыть ее на экране смартфона, вы заметите, что она занимает довольно много места по высоте.
Итак, в чем проблема?
Изначально, конечно, слишком большая длина сайта в мобильной версии не является серьезной проблемой.
Хотя можно заметить, что во многих адаптивных сайтах, группировка контента существует только в обычной, десктопной версии. В мобильной же – все элементы расположены один под другим, без какой-либо группировки.
К примеру, на той же странице Nexus в обычном ее формате есть группировка элементов, в мобильной же версии ее нет.
Существует ли альтернатива?
Для ориентира группировки элементов можно использовать примерную высоту экрана девайса. Если рассматривать тот же пример с Nexus, то результатом группировки может служить следующий вариант
С помощью сокращения размера заголовков и фотографий эскизов можно уместить все содержимое этого раздела на одном экране без скроллинга.
В показанном примере нет ничего необычного, и способов группировки сходных объектов существует масса. В зависимости от конкретного контента разные способы группировки могут иметь различный эффект. Но, что очевидно, любое упрощение взаимодействия пользователя с сайтом на его смартфоне, в конечном смете, приведет к улучшению UX.
