От автора: в адаптивном дизайне часто забывают про высоту. Страницы на мобильных устройствах могут быть очень длинными. Нужно с этим что-то делать? При проектировании адаптивных сайтов мы, как правило, основной упор делаем на хорошее форматирование контента на всех доступных экранах. И это правильно, так как горизонтальная прокрутка совсем не user-friendly, поэтому задается ограничение дизайна на ширину вьюпорта браузера.
На маленьких экранах первое, что приходит в голову, это перенос всего в одну колонку. Пока контент не выходит за отведенную ширину, вы и не подумаете о высоте страницы. В итоге я заметил у себя и в других в дизайнах, что мобильные страницы становятся довольно длинными. Этой статьей я хочу хотя бы просто донести до вас, что нужно помнить о высоте вьюпорта браузера при проектировании адаптивных сайтов.
Разберем пример
Лендинг Google Nexus – пример довольно типичной, современной страницы маркетинга. Хороший, чистый дизайн и адаптивность. Сайт можно открыть на экране любого размера, и он прекрасно отформатируется по ширине экрана.
Однако если сайт открыть на своем мобильном устройстве, вы увидите, что прокручивать его придется довольно долго. На моем macbook страница была 4 500 пикселей в высоту, что примерно в 6 раз больше высоты окна браузера. Для сравнения на моем телефоне страница была 6 200 пикселей в высоту, что примерно в 10 раз больше высоты вьюпорта. Это не плохо, нет такого правила в дизайне, чтобы сайты имели одинаковую высоту на всех устройствах. Однако я думаю, что это интересное наблюдение, в котором стоит разобраться.
Так в чем проблема?
Еще раз, я не считаю, что общая длина страницы сама по себе является проблемой. Я отметил, что во множестве адаптивных дизайнов целенаправленная группировка контента легко обнаруживается на больших экранах. Когда же на маленьких экранах контент перебрасывается в одну колонку, все начинает путаться. Например, на странице Nexus второй раздел группирует три аппаратные функции. На больших экранах три блока расположены рядом, а сам раздел обычно равен высоте вьюпорта. На мобильных устройствах за один раз виден только один блок. Во время прокрутки вниз вы уже не можете быть уверены, что эти три блока как-то сгруппированы. Не конец света, но и не оптимально.
Есть другие способы?
Не так давно я использовал высоту вьюпорта устройства в качестве приблизительного руководства того, как нужно позиционировать контент. Цель в том, чтобы решить проблему, о которой я говорил выше. Нужно, чтобы сгруппированный контент можно было просматривать, не перелистывая экран, на всех устройствах. В примере с Nexus альтернативный дизайн может выглядеть так.
Сильно уменьшив размер заголовка и превью фотографий, мы смогли уместить весь контент из этого раздела в рамках одного вьюпорта. Это всего лишь небольшое улучшение, но я обнаружил, что при таком подходе за макетом легче следить при прокрутке на мобильных устройствах.
Вернемся чуть-чуть назад…
В показанном мной дизайне нет ничего необычного. Это лишь один из множества возможных макетов, достигающих одной цели. А цель заключается в том, чтобы дать понять, что в определенной секции контент сгруппирован. Если вы будете учитывать высоту вьюпорта в своих мобильных макетах, вам следует изучить все способы позиционирования контента. В зависимости от контекста дизайна и типа контента будут лучше подходить те или иные макеты.
Автор: Kevin Vigneault
Источник: //www.viget.com/
Редакция: Команда webformyself.
