Адаптивный веб-дизайн направлен на организацию макета таким образом, чтобы вся информация была представлена удобным для пользователя способом на любом устройстве с любым размером экрана.Большинство дизайнеров выбирает макеты,основанные на гибкой сетке, так как их легче подстраивать для различного рода устройств.
Только вам решать какой будет сетка для разработки макета.В этой статье мы собираемся сосредоточиться на гибких сетках для макетов и их применении в адаптивном веб-дизайне.
Что такое адаптивная css-сетка макета сайта?
Прежде чем мы начнем думать о дизайне узнаем значение слова адаптивная css-сетка макета.Лучшее определение мы найдем в Википедии для понятия fluid.
Гибкий(fluid) - значит резиновый,адаптивный,эластичный, плавно изменяющий свой размер под воздействием внешнего воздействия.
Внесу ясность на практическом примере. В веб-дизайне под внешним воздействием подразумевается размер экрана пользовательского устройства, а адаптивным будет наш макет или шаблон сайта.Независимо от размера экрана и устройства, компоненты в адаптивном дизайне будут подстраиваться под пользовательскую среду.
Важность адаптивной css-сетки макета сайта.
В фиксированной верстке мы определяем размеры в пикселях. Из-за этого возникает необходимость подстраивать ширину и высоту в окнах некоторых устройств.Так как адаптивная верстка зависит от размеров родительских объектов, ограниченные корректировки будут выполнятся автоматически для различных устройств и размеров экрана.
Мобильные устройства имеют небольшие размеры и люди предпочитают их использовать для личных нужд. С другой стороны у рабочих мониторов большая высота и ширина с большим рабочим разрешением.Так что мы не можем ориентироваться на маленькие устройства в адаптивном дизайне. Преимущество резиновой верстки в том, что мы можем настраивать max-width и это будет одинаково работать на разных экранах, так как опирается на процентные отношения, а не конкретные значения.
Как работает адаптивная css-сетка макета сайта.
Мы использовали для внутреннего дизайна фиксированную верстку с системой 960 пикселей. Затем макет стал более гибким благодаря использованию различных пиксельных пропорций для разных размеров экранов. Все это называлось фиксированной версткой. Сейчас пришло время создавать дизайны основанные на процентных соотношениях, известных как резиновая или адаптивная верстка.
В резиновой верстке сначала мы определяем максимальный размер макета для дизайна. Сетка страницы делится на несколько специфичных колонок для чистоты и легкости редактирования.Затем мы продумываем дизайн каждого элемента используя пропорциональную(процентную) разметку вместо пиксельной. Таким образом как только устройство или размер экрана изменятся, элементы страницы подстроят свои ширину и высоту в соответствии со спецификой пропорций родительского контейнера.
Перед тем как погрузиться глубже в адаптивную верстку, взглянем на некоторые классные резиновые верстки для получения представления о том, как работают адаптивные макеты.
Системы и генераторы адаптивной css-сетки макета для сайта
Создание резиновой верстки с нуля нелегкая задача и требует времени и усилий. Следовательно будет мудро выбрать существующий CSS фреймворк или генератор разметки как основу для дизайна макета. Далее представлены несколько бесплатных CSS сервисов и генераторов сетки.
В большинство CSS фреймворков встроены продвинутые фишки и они протестированы на многих браузерах. Цель этогой статьи – понимание резиновой сетки от начала до конца. Следовательно будет мудрым сгенерировать адаптивную css-сетку, которая позволит читателю выучить основы адаптивной верстки.
Большинство сеточных css-фреймворков испытаны на многих браузерах и имеют свои фишки.Цель этого урока дать понимание адаптивной css-сетки макета, поэтому я выберу сетку, которая будет наиболее легкой для восприятия.
Я воспользовался сервисом Variable Grid System. И установил следующие размеры
Column width – 60
Number of columns – 12
Gutter width – 20
Затем скачиваем CSS файл.Открываем его в вашем любимом текстовом редакторе и ищем строку 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 подвижных столбцов в нашей сетке.Теперь рассмотрим как столбцы расположены в нашем макете.
Код для всей секции представлен ниже.Вы можете посмотреть скачанные файлы для получения большей информации.
1:
2: <!DOCTYPE html>
3: <html>
4: <head>
5: <meta charset="utf-8">
6: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7: <title>Fluid Grid with Fluid Columns</title>
8: <link type="text/css" rel="stylesheet" href="style.css" />
9: </head>
10: <body>
11: <div id="single-columns" class="container_12">
12: <div class="grid_1"><span>1</span></div>
13: <div class="grid_1"><span>1</span></div>
14: <div class="grid_1"><span>1</span></div>
15: <div class="grid_1"><span>1</span></div>
16: <div class="grid_1"><span>1</span></div>
17: <div class="grid_1"><span>1</span></div>
18: <div class="grid_1"><span>1</span></div>
19: <div class="grid_1"><span>1</span></div>
20: <div class="grid_1"><span>1</span></div>
21: <div class="grid_1"><span>1</span></div>
22: <div class="grid_1"><span>1</span></div>
23: <div class="grid_1"><span>1</span></div>
24: </div>
25:
26: <div id="double-columns" class="container_12">
27: <div class="grid_2"><span>2</span></div>
28: <div class="grid_2"><span>2</span></div>
29: <div class="grid_2"><span>2</span></div>
30: <div class="grid_2"><span>2</span></div>
31: <div class="grid_2"><span>2</span></div>
32: <div class="grid_2"><span>2</span></div>
33:
34: </div>
35: </body>
36: </html>
37:
38:
Каждая часть нашей сетки находится внутри контейнера с классом container_12.Внутри контейнера мы можем использовать класс grid_n для создания подвижных колонок с необходимой шириной.Используя класс grid_1 мы получим в распоряжение 1/12 ширины оригинальной сетки и класс grid_2 даст нам 2/12.
Вы можете загрузить демо и изменить размеры вашего браузера, чтобы посмотреть на естественность подстройки адаптивных столбцов.
Вложенные подвижные колонки.
Когда вы работаете с CSS фреймворком, создавать сетки с адаптивными столбцами просто. Но не все дизайны такие же простые, как предыдущий макет. Нам может понадобиться создавать столбцы и строки внутри других столбцов и строк. Столбцы, содержащиеся внутри других столбцов называются вложенными столбцами. Рассмотрим как мы можем создать вложенные адаптивные столбцы, используя созданный ранее CSS файл.
Представленный макет содержит 2 строки.Первая строка разделена на 2 секции и 6 столбцов и каждая секция разделена снова на 4 секции и 3 столбца.
Также 2 строка разделена на 3 секции и 4 столбца, каждая из 3 секций разделена снова на 3 секции и 4 столбца. Теперь взглянем на код макета.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6: <title>Nested Fluid Columns</title>
7: <link type="text/css" rel="stylesheet" href="style.css" />
8: </head>
9: <body>
10:
11: <div class="container_12">
12: <div class="grid_6">
13: <div class="container_12">
14: <div class="grid_3"><span>3</span></div>
15: <div class="grid_3"><span>3</span></div>
16: <div class="grid_3"><span>3</span></div>
17: <div class="grid_3"><span>3</span></div>
18: </div>
19: </div>
20: <div class="grid_6">
21: <div class="container_12">
22: <div class="grid_3"><span>3</span></div>
23: <div class="grid_3"><span>3</span></div>
24: <div class="grid_3"><span>3</span></div>
25: <div class="grid_3"><span>3</span></div>
26: </div>
27: </div>
28: </div>
29:
30: <div class="container_12">
31: <div class="grid_4">
32: <div class="container_12">
33: <div class="grid_4"><span>4</span></div>
34: <div class="grid_4"><span>4</span></div>
35: <div class="grid_4"><span>4</span></div>
36: </div>
37: </div>
38: <div class="grid_4">
39: <div class="container_12">
40: <div class="grid_4"><span>4</span></div>
41: <div class="grid_4"><span>4</span></div>
42: <div class="grid_4"><span>4</span></div>
43: </div>
44: </div>
45: <div class="grid_4">
46: <div class="container_12">
47: <div class="grid_4"><span>4</span></div>
48: <div class="grid_4"><span>4</span></div>
49: <div class="grid_4"><span>4</span></div>
50: </div>
51: </div>
52: </div>
53: </body>
54: </html>
55:
56:
Сначала мы создаем основные контейнеры и столбцы как в предыдущем абзаце. Внутри столбца нам необходимо создать другой контейнер с классом container_12 для вложенных столбцов.Теперь мы получили другие 12 столбцов внутри основных 6 столбцов. Далее эти 12 столбцов могут быть разделены так, как нам необходимо.Сейчас мы еще углубимся в создание адаптивных столбцов и работу с вложенными.Двигаемся дальше.
Дизайн вне адаптивных css-сеток.
Большинство начинающих дизайнеров думают,что использование отзывчивого CSS фреймворка может сделать дизайн адаптивным. Увы, но адаптивный дизайн не создается так просто.Адаптивные сетки будут подстраиваться к изменениям в окне браузера или размерам экрана.Если вы не спланировали как следует дизайн, пользователи будут иметь проблемы с просмотром контента на маленьких устройствах даже если вы используете адаптивную сетку.
Рассмотрим следующий пример.
Здесь видно как макет подвижной сетки отображается на маленьких экранах.Пока это только столбцы сетки без данных. Но даже в этом случае цифра 1 не отображается правильно. Когда дело дойдет до реального контента, будет полный бардак. При таком сценарии нам необходимо настроить ширину столбцов так, чтобы было удобно пользователям.
Вы можете использовать CSS media запросы для настройки ширины столбцов для различных размеров экрана.В сценарии, приведенном выше вы можете удвоить ширину столбца и сделать 6 столбцов вместо 12 для лучшей читабельности вашего контента. Итак не следует полностью полагаться на адаптивные сетки в резиновом дизайне.
Тестирование адаптивных css-сеток
Мы закончили с основами адаптивных сеток и можем двигаться дальше к созданию простого примера с jQuery для тестирования адаптивных сеток для различных размеров экрана.Сначала мы создадим макет страницы как показано ниже.
1:
2: <!DOCTYPE html>
3: <html>
4: <head>
5: <meta charset="utf-8">
6: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7: <title>Fluid Grid Tester</title>
8: <script type="text/javascript" src="jquery.min.js" ></script>
9: </head>
10: <body>
11: <div id="device_navigation">
12: <div id='device_panel'>
13: <a href="javascript:void(0);" onclick="changeGrid('desktop');">Desktop</a>
14: <a href="javascript:void(0);" onclick="changeGrid('tab_lan');">Tablet Landscape</a>
15: <a href="javascript:void(0);" onclick="changeGrid('tab_pot');">Tablet Portrait</a>
16: <a href="javascript:void(0);" onclick="changeGrid('mob_lan');">Mobile Landscape</a>
17: <a href="javascript:void(0);" onclick="changeGrid('mob_pot');">Mobile Portrait</a>
18: </div>
19: <div style="clear:both"></div>
20: </div>
21: <div class='main_wrapper'>
22: <iframe class="wrapper" src="media_query.html"></iframe>
23: </div>
24: </body>
25: </html>
26:
27:
Наша тестируемая страница на HTML-макете с jQuery.Элемент с ID device_panel будет содержать навигацию по стандартным устройствам: десктопу, телефонам и планшетам.Один клик по ссылкам задействует функцию changeGrid, в которую передастся тип устройства как параметр.
В нижнем листинге мы имеем дело с IFRAME, который будет использоваться для загрузки нашей адаптивной сетки.Подвижная сетка содержится в файле media_query.html.Теперь взглянем на функцию changeGrid.
1:
2: function changeGrid(device){
3: if(device == "desktop"){
4: $(".wrapper").css("width","960px");
5: }
6: if(device == "tab_lan"){
7: $(".wrapper").css("width","768px");
8: }
9: if(device == "tab_pot"){
10: $(".wrapper").css("width","600px");
11: }
12: if(device == "mob_lan"){
13: $(".wrapper").css("width","480px");
14: }
15: if(device == "mob_pot"){
16: $(".wrapper").css("width","320px");
17: }
18: }
19:
20:
Как видно по названию эта функция будет проверять устройство, переданное как параметр.Затем изменит ширину .wrapper(IFRAME) согласно стандартной для этого устройства.Теперь мы можем увидеть как адаптивные сетки будут работать на маленьких экранах.
Адаптивная сетка, используемая внутри media_query.html файла очень похожа на примеры, которые мы обсуждали выше. Вы можете использовать демофайлы для настройки вашего кода.Вы увидите нечто похожее на тестируемом экране.
В завершение
Адаптивные css-сетки позволяют вам создавать резиновые дизайны, которые динамически изменяют размеры в соответствии с размерами экранов.Сложность их создания может быть упрощена с помощью существующих CSS фреймворков. Но вы не должны слепо полагаться на адаптивные сетки для создания резиновых дизайнов.Настраивайте адаптивные сетки в соответствии с содержанием страницы и дизайном и пытайтесь создать более удобное пространоство для пользователей.Надеюсь вы извлекли что-то полезное из этого урока и я готов выслушать ваши вопросы.
