Адаптивний дизайн являє собою процес організації макета сайту таким чином, що в залежності від типу пристрою користувача або розміру екрану вся важлива інформація підлаштовується в зручній для нього формі. Більшість дизайнерів вибирають макет на основі сітки, так як з ним простіше працювати на різних типах пристроїв.
Право вибору залишається за вами: використовувати для створення макета фіксовану або плаваючу сітку (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.
Як бачите, container_12 є основним контейнером. Кожен елемент нашого дизайну повинен розташовуватися всередині цього контейнера, що належить класу container_12.
Тоді різні розміри елементів, що визначаються у відсотковому відношенні до основного контейнера, задаються класами .grid_1. grid_2 ... .grid_n. Плаваюча сітка будується за допомогою стовпців, які називаються плаваючими стовпцями.
Коли змінюється розмір екрану, ширина цих стовпців також буде регулюватися пропорційно батьківського контейнера.
В нашій сітці у нас є 12 плаваючих стовпців. Давайте подивимося, як ці стовпці укладаються в структуру:
Нижче наводиться код для описаної в цьому розділі сітки. Щоб отримати додаткову інформацію, ви можете ознайомитися з матеріалами для скачування за цією статтею:
Кожен набір компонентів міститься всередині елемента класу class container_12. Щоб створювати плаваючі колонки певної ширини, ми можемо використовувати всередині контейнера клас grid_n. Якщо ми використовуємо клас grid_1, то отримуємо 1/12 ширини вихідної сітки, якщо grid_2 - то 2/12.
Вкладені плаваючі стовпчики
Якщо ви використовуєте CSS-фреймворк, тоді створення сітки з плаваючими стовпцями не складе великих труднощів. Але не всі структури так прості в реалізації, як розглянутий вище приклад. Вам, можливо, буде потрібно створювати стовпці всередині інших стовпців і рядків.
Стовпці, які є частиною батьківського стовпця, називаються вкладеними. Давайте розглянемо, як ми можемо створювати вкладені плаваючі стовпчики за допомогою файлу CSS, який ми згенерували раніше.
Наведений вище макет містить 2 рядки. Перший рядок розділена на 2 секції по 6 стовпчиків, і кожна з них цих двох секцій в свою чергу ділиться на 4 секції по 3 стовпці.
Аналогічно другий рядок розділена на 3 секції по 4 шпальти, і кожна з цих 3-х секцій знову ділиться на 3 секції по 4 шпальти. Таким чином, ви створюєте вкладені стовпці в сітці. Давайте розглянемо код описаної вище структури:
Спочатку ми створюємо основний контейнер і ділимо його на стовпці, як ми робили в попередньому розділі. Усередині стовпчика нам потрібно створити ще один контейнер з класом container_12 для вкладених стовпців. Тепер ми отримуємо ще 12 стовпців в базових шести шпальтах.
Тепер 12 подстолбцов можна розділити ще, якщо це необхідно. Це повинно дати вам чітке уявлення, як створювати плаваючу сітку і як працювати з вкладеними стовпцями. Давайте рухатися далі.
Дизайн на основі Fluid Grid
Більшість початківців дизайнерів думають, що просто використавши адаптивний CSS-фреймворк, вони отримають адаптивний дизайн. На жаль, не все так просто. Плаваюча сітка буде адаптуватися до змін розмірів вікна браузера або пристрою.
Розглянемо наступний приклад:
Ось так структура плаваючою сітки, розглянута в попередніх розділах, буде відображатися на маленьких екранах. Всього лише стовпці сітки без відповідних даних. І навіть число 1 не відображається, як треба. Коли справа доходить до реального контенту, починається цілковитий безлад.
У цьому випадку ми повинні відрегулювати ширину стовпців. Це повинно забезпечити користувачам зручність роботи з сайтом.
Щоб відрегулювати ширину стовпців для різних розмірів екрану, ви можете використовувати медіа запити CSS. У наведеному вище сценарії можна подвоїти ширину стовпців і використовувати 6 стовпців замість 12-ти, щоб поліпшити читаність контента. Так що як бачите, адаптивність сайту залежить не тільки від плаваючою сітки.
Тестова плаваюча сітка
Тепер, коли ми завершили розгляд теорії, можна перейти до створення простої демо-версії за допомогою JQuery. Вона допоможе нам перевірити, як наша плаваюча сітка працює на різних екранах. Спочатку ми створимо макет сторінки і меню навігації, як показано нижче.
Демо версія
Після натискання на посилання changeGridfunction буде викликатися відповідна функція, в якій через параметр задається тип використовуваного пристрою.
Внизу сторінки розташовується тег IFRAME, який буде використовуватися для завантаження нашої плаваючою сітки. Плаваюча сітка міститься в файлі media_query.html. Тепер давайте розглянемо функцію changeGrid:
Після виклику функції вона буде перевіряти тип використовуваного пристрою за допомогою переданого параметра. Залежно від цього змінюється ширина .wrapper (IFRAME), підлаштовуючись під стандартну ширину для даного пристрою.
Після цього ми зможемо побачити, як плаваюча сітка працює на невеликих екранах.
Плаваюча сітка, яка використовується всередині файлу media_query.html. буде схожа на ту, що ми розглядали в попередньому розділі. Для настройки кодів ви можете використовувати демо-файли. У вас повинно вийти щось схоже на малюнок наведений нижче.
висновок
Плаваюча сітка дозволяють створювати адаптивні макети, які динамічно підлаштовуються під розміри екрану. Складність розробки плаваючою сітки можна звести до мінімуму, використовуючи готові CSS-фреймворки. Однак щоб створити ідеальний адаптивний дизайн, однією плаваючою сітки недостатньо.
Бувають випадки, коли її потрібно додатково налаштувати відповідно до вашого дизайном, щоб спробувати забезпечити користувачам можливість зручно переглядати ваш сайт.
Сподіваюся, ви дізналися з цієї статті щось нове. Я хотів би почути ваші відгуки про неї.
Переклад статті «How Fluid Grids Work in Responsive Web Design» був підготовлений дружною командою проекту Сайтобудування від А до Я.