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

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

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

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

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

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

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

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

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

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

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

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

Для резиновой верстки 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-фреймворков сложность разработки плавающей сетки может быть сведена к минимуму.

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

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

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