5 актуальных макетов отзывчивого дизайна, на которые стоит обратить внимание

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

1. В основном гибкий

«Гибкий» шаблон предложенный Люком, подразумевает динамичную перестройку содержимого внутри статичного родительского блока, а не в рамках окна браузера. Такие родительские блоки, содержащие в себе другие элементы, обычно применяют CSS-свойство max-width для ограничения максимальной ширины, позволяя при этом адаптироваться к более узким экранам. По данным Google, для этого шаблона требуется только одна точка останова, назначенная родительскому элементу, в то время как вложенные элементы автоматически адаптируются при изменении его размера. Этот вариант макета отлично подходит для сайтов с разнообразными страницами, таких как платформы для маркетинга, интернет-магазины, новостные порталы, где присутствует множество типов контента.

2. Выпадение столбцов

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

3. Сдвиг макета

В отличие от шаблона перетаскивания столбцов, «сдвиг макета» Люка использует множество точек останова.

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

4. Маленькие изменения

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

5. За пределами холста

Шаблон Люка «за пределами холста» предусматривает скрытие второстепенного контента за пределами видимой области до тех пор, пока он не потребуется. Вместо того, чтобы размещать контент вертикально в небольших окнах просмотра, этот шаблон размещает их рядом с помощью триггера (обычно JavaScript), который «перемещает» соседние панели в область просмотра и из нее. Это настоящая находка не только для навигации, но и для блогов, которым необходимо акцентировать внимание на больших объемах текста и буквально отодвинуть все второстепенное в сторону.

Заключение

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