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