Должны ли отзывчивые сайты быть такими длинными на мобильных устройствах?

Источник: Do responsive sites have to be so tall on mobile?
Автор:  Kevin Vigneault.
Перевод: .

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

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

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

Давайте обратимся к примеру.

Целевая страница сайта Nexus от Google представляет собой типичную современную маркетинговую страницу. Ее изящный и безупречный дизайн отвечает всем требованиям отзывчивого сайта. Вы можете «натянуть» эту страницу на экран любого размера, и ее компоновка прекрасным образом впишется в ширину вьюпорта.

Но после того, как эта страница «водрузится» на экран вашего телефона, вам придется изрядно поработать скроллингом чтобы просмотреть ее полностью. На макбуке высота страницы составила 4500 пикселей, что равно примерно шести вертикальным размерам окна браузера. Для сравнения скажу, что на моем телефоне отображение этой страницы обошлось в 6200 пикселей в высоту, которые можно отмерить примерно десятью вертикальными размерами вьюпорта браузера. По сути, ничего в этом плохого нет. И не существует никакого закона, гласящего, что сайты должны создаваться таким образом, чтобы их высота была пропорционально равной на устройствах различных размеров. Но, на мой взгляд, это наблюдение достойно нашего внимания и его нужно рассмотреть поглубже.

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

Опять же повторюсь: никоим образом не считаю, что длина страницы в этом случае сама по себе проблематична. Однако считаю нужным поделиться своими наблюдениями о том, что большинство отзывчивых шаблонов прекрасно справляются со своей задачей, намеренно группируя контент на сравнительно широких дисплеях, но когда дело доходит до мобильных устройств, то это уже становится похожим на «скирдование» содержимого, что может закончиться банальной неразберихой.

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

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

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

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

Посмотрим на это со стороны.

Ничего особенного в представленной мной конструкции, конечно же, нет. Она просто является одним из множества возможных вариантов компоновки, с помощью которой можно достигнуть аналогичного результата, а точнее, сделать для пользователя более очевидной связь между сгруппированным в одной секции контентом, путем его визуального объединения. Если идея использования высоты вьюпорта в качестве критерия для ваших шаблонов заинтересовала вас, то вам следует изучить и другие способы размещения контента, применяемые в подобных случаях.

Выбрать есть из чего, верно? Для любой ситуации можно найти свое решение. Все зависит от контекста вашего дизайна и типа предоставляемой информации.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *