Высота сайтов на мобильных

Автор: Kevin Vigneault    Источник: viget.com
27.02.2017
569
0
img

В адаптивном дизайне часто забывают о высоте. На мобильных устройствах страницы бывают довольно длинными. Нужно ли обращать на это внимание?

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

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

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

Лендинг Google Nexus – довольно типичная современная маркетинговая страница. У нее красивый, чистый дизайн и она адаптивная. Можно открыть её на экране любого размера, и она красиво подстроится под ширину экрана.

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

Так в чем проблема?

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

Есть ли альтернатива?

С недавнего времени я начал использовать высоту viewport’а устройства как подсказку, как нужно располагать контент. Цель – решить проблему, о которой я упоминул выше. Контент, который по определенной причине был сгруппирован вместе, на экране любого устройства должен отображаться вместе. Например, альтернативой оригинальному дизайну Nexus может быть что-то такое:

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

Небольшое отступление…

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

ПОХОЖИЕ СТАТЬИ: