Как Fluid Grids используются в адаптивном дизайне
Адаптивный дизайн представляет собой процесс организации макета сайта таким образом, что в зависимости от типа устройства пользователя или размера экрана вся важная информация подстраивается в удобной для него форме. Большинство дизайнеров выбирают макет на основе сетки, так как с ним проще работать на разных типах устройств.
Право выбора остается за вами: использовать для создания макета фиксированную или плавающую сетку (Fluid Grids). В этом статье мы подробно расскажем о плавающей сетке и ее важности в адаптивном дизайне.
Что такое Fluid Grid?
Прежде чем начинать думать о конкретных проектах, важно для начала понять, что такое плавающая сетка. Думаю, наилучшее определение Fluid (жидкости) приведено в Википедии:
Я лишь хочу немного уточнить это определение с практической точки зрения. В веб-дизайне, (плавающей) жидкостью будет наш дизайн или макет, а в качестве приложенного усилия будет выступать изменение размера экрана или устройства пользователя.
Независимо от того, какое устройство использует пользователь или какой размер экрана у этого устройства, компоненты плавающего дизайна перетекают и адаптируются к ним.
Важность Fluid Grid
В адаптивных сетках мы определяем размеры на основе пикселей. Поэтому для некоторых видов устройств нам придется корректировать ширину и высоту вручную.
Поскольку плавающая сетка адаптируется естественно в пределах родительского контейнера, ограничения в зависимости от размеров экрана или устройства нужно будет задать именно для внешних границ контейнера.
Мобильные устройства становятся все меньше, и люди предпочитают использовать в работе именно их. С другой стороны, настольные мониторы становятся все больше и имеют все более высокое разрешение. Так что мы не можем разрабатывать адаптивный дизайн только под небольшие устройства.
Преимуществом Fluid Grid является то, что мы можем установить максимальную ширину, и она все равно будет работать на больших экранах, благодаря расчетам на основе процентов.
Как работает Fluid Grid?
Мы используем для разработки внутреннюю фиксированную сетку с системой в 960 пикселей. Затем адаптивность макета достигается, с помощью использования различных размеров пикселя для различных размеров экрана.
Это все, что касается разработки на основе пикселей. Теперь нам нужно создать конструкцию на основе процентных соотношений. Она и известна под названием Fluid Grid (плавающая сетка).
Для плавающей сетки мы задаем максимальный размер структуры. Построение сетки зависит от количества столбцов, при котором можно свободно разместить на конкретном экране содержание страницы, и с ним можно будет нормально работать.
После этого мы задаем высоту и ширину каждого элемента пропорционально к базовому размеру, а с не помощью фиксированного значения в пикселях. Поэтому, когда размер устройства или экрана изменяется, ширина и высота элемента будет корректироваться пропорционально.
Прежде чем мы перейдем к более глубокому рассмотрению Fluid Grid, давайте взглянем на несколько крутых дизайнов, разработанных на основе плавающей сетки. Это позволит нам лучше понимать, как работают плавающие макеты.
Dusty Cartridge
Palantir.net
Dress Responsively
Системы Fluid Grid и генераторы
Создание плавающей сетки с нуля – это непростая задача, которая потребует много времени и усилий. Поэтому намного мудрее взять за основу для нашего макета существующие CSS Grid Framework или Grid Generator.
Ниже приведен перечень некоторых бесплатных CSS-систем Fluid Grid и генераторов:
- tiny fluid grid;
- Variable Grid System;
- Fluid Grids Calculator;
- Fluid Grid by Bootstrap.
Большинство CSS-фреймворков имеют дополнительные встроенные функции и проверены на совместимость со многими из существующих браузеров. Цель этого статьи раскрыть полностью от и до, что такое Fluid Grids и как они работают.
Потому я предлагаю рассмотреть создание плавающей сетки, на примере которой мы сможем понять базовые принципы построения данных элементов.
Чтобы создать плавающую сетку, которая подойдет под наши требования, я буду использовать Variable Grid System. Перейдите по этой ссылке и установите значения переменных. Я буду использовать следующие значения.
Ширина столбца – 60.
Количество столбцов – 12.
Расстояние между столбцами – 20.
Demo
Затем загружаем плавающую версию файла 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>Каждый набор компонентов содержится внутри элемента класса class container_12. Чтобы создавать плавающие колонки определенной ширины, мы можем использовать внутри контейнера класс grid_n. Если мы используем класс grid_1, то получаем 1/12 ширины исходной сетки, если grid_2 - то 2/12.
Вы можете загрузить демо-версию и, изменив масштаб просмотра в браузере, наглядно увидеть, как действует плавающая сетка.
Вложенные плавающие столбцы
Если вы используете CSS-фреймворк, тогда создание сетки с плавающими столбцами не составит большого труда. Но не все структуры так просты в реализации, как рассмотренный выше пример. Вам, возможно, потребуется создавать столбцы внутри других столбцов и строк.
Столбцы, являющиеся частью родительского столбца, называются вложенными. Давайте рассмотрим, как мы можем создавать вложенные плавающие столбцы с помощью файла CSS, который мы сгенерировали ранее.
Demo
Приведенный выше макет содержит 2 строки. Первая строка разделена на 2 секции по 6 столбцов, и каждая из их этих двух секций в свою очередь делится на 4 секции по 3 столбца.
Аналогично вторая строка разделена на 3 секции по 4 столбца, и каждая из этих 3-х секций снова делится на 3 секции по 4 столбца. Таким образом, вы создаете вложенные столбцы в сетке. Давайте рассмотрим код описанной выше структуры:
<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 столбцов в базовых шести столбцах.
Теперь 12 подстолбцов можно разделить еще, если это необходимо. Это должно дать вам четкое представление, как создавать плавающую сетку и как работать с вложенными столбцами. Давайте двигаться дальше.
Дизайн на основе Fluid Grid
Большинство начинающих дизайнеров думают, что просто использовав адаптивный 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);">Desktop</a>
<a onclick="changeGrid('tab_lan');" href="javascript:void(0);">Tablet Landscape</a>
<a onclick="changeGrid('tab_pot');" href="javascript:void(0);">Tablet Portrait</a>
<a onclick="changeGrid('mob_lan');" href="javascript:void(0);">Mobile Landscape</a>
<a onclick="changeGrid('mob_pot');" href="javascript:void(0);">Mobile Portrait</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. Элемент с ID device_panel будет содержать меню навигации для стандартных устройств: таких как десктопы, мобильные телефоны и планшеты.
После нажатия на ссылку changeGridfunction будет вызываться соответствующая функция, в которой через параметр задается тип используемого устройства.
Внизу страницы располагается тег IFRAME, который будет использоваться для загрузки нашей плавающей сетки. Плавающая сетка содержится в файле 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-фреймворки. Однако чтобы создать идеальный адаптивный дизайн, одной плавающей сетки недостаточно.
Бывают случаи, когда ее нужно дополнительно настроить в соответствии с вашим дизайном, чтобы попытаться обеспечить пользователям возможность удобно просматривать ваш сайт.
Надеюсь, вы узнали из этой статьи что-то новое. Я хотел бы услышать ваши отзывы о ней.