Большинство адаптивных шаблонов в Интернете созданы так, чтобы перераспределять элементы страницы в пределах видимой области просмотра в браузере в зависимости от ширины экрана устройства.  Адаптивные макеты со скрытыми элементами, напротив,  используют пространство за пределами видимой области, скрывая там вторичные элементы до тех пор, пока они не понадобятся пользователю. Джейсон Уивер и я приведем здесь примеры нескольких новых адаптивных шаблонов со скрытыми областями.

Почему за пределами экрана?

В моем обзоре адаптивных макетов я раскрыл несколько распространенных способов настраивания веб-страницы под экраны разных размеров. И в большинстве из этих макетов маленьким экранам доставалась шахта. Она самая… Бесконечно длинный список всех элементов сайта, объединенных в одну колонку.

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

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

Навигация в подвале и колонка за пределами экрана

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

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

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

Взгляните на демо-версию макета с навигацией в подвале и колонкой за пределами экрана, а также посмотрите на него в действии на этом сайте.

Колонка и навигация за пределами экрана

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

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

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

Взгляните на демо-версию макета с колонкой и навигацией за предалми экрана.

Объединенная колонка за пределами экрана

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

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

Взгляните на демо-шаблоном с объединенной колонкой за пределами экрана.

Две колонки за пределами экрана

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

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

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

Взгляните на демо-шаблон с двумя колонками за пределами экрана.

Горизонталь/Вертикаль за пределами экрана

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

• Dress Rush Pitch Deck
• Galaxy Nexus Features
• Starbucks Signature Drink Builder

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

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

Взгляните на демо-шаблон с вертикалью/горизонталью за пределами экрана.

Ajax вертикаль/горизонталь за пределами экрана

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

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

Взгляните на Ajax демо-макет с двумя колонками за пределами экрана.

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

Грядет еще больше

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

Отдельная благодарность Джейсону Уиверу за сборку демо-версий и помощь в их доработке.

Оригинал: http://www.lukew.com/ff/entry.asp?1569

Григорий Коченов
Креативный директор в AGIMA

Отличная статья! Очень полезный и свежий взгляд на адаптивный дизайн. На простых примерах и схемах Люк Вроблевски и Джейсон Уивер показывают массу различных вариантов решений модификации интерфейса. Я лично взял на заметку пару методов и буду применять в текущих проектах :) Так что, спасибо! Однако не все примеры, на мой взгляд, можно легко использовать.

Достаточно опасно в корне менять логику работы. Например, менять горизонтальный скрол на вертикальный — сомнительное решение, особенно если учесть, что часто к логике привязан дизайн. Тот же starbucks (http://www.mystarbuckssignature.com/en-us/#step00) так сделать явно не получится. Так же, мне кажется, в копилку удобных адаптивных ходов можно смело записывать всю идеологию Metro. Как раз скрытые панели, которые частично видно, заголовки, уходящие на соседний экран, — все это вполне можно использовать и видоизменять при необходимости. Принцип останется, а графика может быть совершенно иной, ничем не напоминая интерфейсы windows 8. Так или иначе, очень круто, что (автор) кратко показал, сколько новых решений. Продемонстрировал масштаб этого поистине огромного поля для творчества и экспериментов.