Руководство по разработке адаптивного веб-дизайна с помощью макетов с плавающей сеткой

2016-05-02 0 ∞

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

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

В этой статье мы рассмотрим плавающие сетки и их значение в адаптивном дизайне.

Что такое макеты с плавающей сеткой?

Что такое макеты с плавающей сеткой?

Сначала нужно понять, что такое плавающие сетки. Лучшее определение жидкости дано в Википедии:

Жидкость представляет собой вещество, которое постоянно изменяется (смещается) при приложении к нему усилия.

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

Важность плавающих сеток

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

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

Как работают плавающие сетки

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

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

Перейдем к более глубокому рассмотрению плавающих сеток, чтобы получить представление о том, как работают плавающие макеты.

Dusty Cartridge

Palantir.net

Dress Responsively

Системы и генераторы плавающих сеток

Создать плавающую сетку не так просто, для этого потребуется время и усилия. Поэтому разумно было бы выбрать в качестве основы для дизайна макета CSS-фреймворк сеток или генератор сеток.

Ниже приведен список бесплатных CSS систем и генераторов сеток для резиновой верстки на div:

Variable Grid System;
Fluid Grids Calculator;
Fluid Grid by Bootstrap.

Большинство CSS-фреймворков сеток содержат встроенные интеллектуальные функции и были проверены во многих браузерах. Целью данного руководства является дать вам полное понимание создания адаптивной верстки и резиновой с помощью плавающих сеток.

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

Я использую Variable Grid System, чтобы сгенерировать плавающую сетку в соответствии с установленными требованиями. Перейдите к демо-версии и измените значения переменных. Я буду использовать следующие значения:

Ширина столбца – 60;
Количество столбцов – 12;
Ширина отступа – 20.

После этого скачайте плавающую версию файла CSS. Теперь откройте его в текстовом редакторе по своему усмотрению и найдите строку Grid >> 12 Columns. Приведенный ниже код представляет собой содержимое раздела Grid >> 12 Columns:

.container_12 .grid_1 {
    width:6.333%;
}
.container_12 .grid_2 {
    width:14.667%;
}
.container_12 .grid_3 {
    width:23.0%;
}
.container_12 .grid_4 {
    width:31.333%;
}
.container_12 .grid_5 {
    width:39.667%;
}
.container_12 .grid_6 {
    width:48.0%;
}
.container_12 .grid_7 {
    width:56.333%;
}
.container_12 .grid_8 {
    width:64.667%;
}
.container_12 .grid_9 {
    width:73.0%;
}
.container_12 .grid_10 {
    width:81.333%;
}
.container_12 .grid_11 {
    width:89.667%;
}
.container_12 .grid_12 {
    width:98.0%;
}

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

В нашей сетке есть 12 плавающих столбцов. Рассмотрим, как столбцы располагаются в макете резиновой верстки (пример):

Код для данного раздела приводится ниже. Для получения дополнительной информации вы можете посмотреть загруженные файлы:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Fluid Grid with Fluid Columns
       	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div class="container_12" id="single-columns">
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
</div>
<div class="container_12" id="double-columns">
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
</div>
<pre>

Каждый набор компонентов содержится внутри элемента с классом container_12. Внутри контейнера мы можем использовать для создания плавающего столбца с определенной шириной класс grid_n. С помощью класса grid_1 мы можем получить столбец в 1/12 ширины исходной сетки, с помощью grid_2 - в 2/12.

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

Вложенные плавающие столбцы

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

Посмотреть демо-версию

Приведенный выше макет содержит две строки. Первая строка разделена на две секции из шести столбцов, и каждая из двух секций снова разделена на четыре секции из трех столбцов.

Аналогично вторая строка разделена на три секции из четырех столбцов, и каждая из трех секций также разделена на три секции из четырех столбцов. Таким образом, в сетках создаются вложенные столбцы. Давайте рассмотрим код приведенного выше макета:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Nested Fluid Columns
       	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div class="container_12">
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
</div>
<div class="container_12">
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
</div>
<pre>

Сначала мы создаем основные контейнеры и столбцы, как мы это делали в предыдущем разделе. Внутри столбца нам нужно создать еще один контейнер с классом container_12 для вложенных столбцов. Теперь мы получаем еще 12 столбцов внутри основных шести. Затем двенадцать подстолбцов можно разделять по необходимости.

Конструкция в основе плавающей сетки

Большинство начинающих дизайнеров думает, что использование CSS-фреймворка сделает макет адаптивным. К сожалению, создать резиновую верстку не так просто. Плавающие сетки будут адаптироваться к изменению окна браузера или устройства. Если вы тщательно не спланируете дизайн, у пользователей будут проблемы при просмотре контента на небольших устройствах.

Рассмотрим приведенный ниже экран:

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

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

Тестирование плавающих сеток

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

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Fluid Grid Tester

</pre>
<div id="device_navigation">
<div id="device_panel"><a onclick="changeGrid('desktop');" href="javascript:void(0);">Монитор</a>
 <a onclick="changeGrid('tab_lan');" href="javascript:void(0);">Планшет альбомная ориентация</a>
 <a onclick="changeGrid('tab_pot');" href="javascript:void(0);">Планшет портретная ориентация</a>
 <a onclick="changeGrid('mob_lan');" href="javascript:void(0);">Смартфон альбомная ориентация</a>
 <a onclick="changeGrid('mob_pot');" href="javascript:void(0);">Смартфон портретная ориентация</a></div>
<div style="clear: both;"></div>
</div>
<div class="main_wrapper"><iframe src="media_query.html" height="240" width="320"></iframe></div>
<pre>

Тестовая страница имеет базовый HTML-макет с JQuery. Элемент с ID device_panel будет содержать панель навигации для стандартных устройств: стационарные компьютеры, смартфоны и планшеты. После нажатия на ссылку будет вызываться функция changeGrid с типом устройства в качестве параметра.

В нижней части мы имеем iframe, который будет использоваться для загрузки плавающей сетки резиновой верстки CSS. Она находится в файле media_query.html. Теперь давайте посмотрим на функцию changeGrid:

function changeGrid(device){
               if(device == "desktop"){
                   $(".wrapper").css("width","960px");
               }
               if(device == "tab_lan"){
                   $(".wrapper").css("width","768px");
               }
               if(device == "tab_pot"){
                   $(".wrapper").css("width","600px");
               }
               if(device == "mob_lan"){
                   $(".wrapper").css("width","480px");
               }
               if(device == "mob_pot"){
                   $(".wrapper").css("width","320px");
               }
           }

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

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

Скачать файлы

Заключение

Плавающие сетки позволяют создавать адаптивные макеты и осуществлять резиновую верстку, которые динамически подстраиваются под размеры экрана. С помощью существующих CSS-фреймворков сложность разработки плавающей сетки может быть сведена к минимуму.

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

Вадим Дворниковавтор-переводчик статьи «Fluid Grid Layout Tutorial For Responsive Web Design Creation»