Верстка – це створення структури і елементів оформлення web-сторінки. Написанням коду веб-сторінки займається верстальник або front-end розробник. Він використовує графічну програму для нарізки макетів, редактор коду, додаткові програми для пришвидшення процесу.
Що таке верстка
Код верстки є скелетом сторінки сайту, пишеться на мові розмітки html. Складається з логічно розбитих на елементи частин сторінки – тегів. Кожен з них відповідає за свою область: меню, підвал сайту, медіа, форми, карти, пошук по сайту, час. У них є атрибути, з їх допомогою ідентифікуються окремо взяті елементи. За оформлення відповідають каскадні таблиці стилів, а динамічні ефекти – джаваскрипт.
Якісно зроблена верстка однаково відображається на всіх браузерах. Результат визначається проведенням ряду тестів. Здатність працювати на більш, ніж одній апаратній платформі, називається кросплатформеність. Існує кілька підходів реалізації верстки, використовуються різні фреймворки.
Для створення сторінок за сучасними стандартами застосовуються різні методи адаптивної верстки. Це забезпечує коректне відображення елементів на всіх типах екранів.
Види макетів
Стандарти постійно удосконалюються, і, як наслідок, змінюються способи розробки макетів. На даний момент існує 3 основних виду сторінок:
- статична;
- гумова;
- адаптивна.
Статичні макети, що являють собою сторінки, які не здатні змінювати своє оформлення. Їх дизайн не змінюється, а розміри елементів мають чітке значення.
Адаптивна верстка має на увазі, що елементи сайту будуть підлаштовуватися під розмір екрану пристрою. При зміні ширини документа відбувається перебудова блоків, одні частини замінюються іншими, деякі елементи пропадають. Ідея адаптивності прийшла на зміну мобільних версій сайту, що живуть на окремих піддоменах. Головним принципом створення адаптивності є розробка дизайну під три екрани: комп’ютера, планшета, смартфона.
При створенні гумової верстки також враховуються зміни розмірів екрану і всі елементи підлаштовуються. Головною відмінністю від адаптивної є те, що верстка розширюється або звужується під екран на кожному моменті змін.
Перевірити, який з принципів використовується, можна наступним чином. Якщо при розтягуванні вікна браузера сторінка розтягується разом з ним – значить, це гумова верстка. Коли сторінка сайту змінюється тільки в декількох положеннях – значить, це адаптивна.
Розміри для адаптивної верстки
Для створення адаптивних макетів використовуються відносні одиниці вимірювань замість стандартного статичного px. Найпоширеніші:
- em;
- rem;
- %.
В адаптивній верстці html em використовується для того, щоб задавати розміри шрифтів і відступів. За промовчанням 1 em дорівнює 16 пикселів. Відповідно, щоб задати шрифт для параграфа p розміром 32 пікселя, необхідно вказати наступні:
p {
font-size: 2em;
}
Особливістю використання одиниці є те, що 1em дорівнює розміру шрифту свого елемента. Тобто 1em приймає різні значення в різних ділянках коду. Наприклад, в блоці, де розмір шрифту дорівнює 2em (32px), margin у 1em буде дорівнювати 32 пикселів. Але там, де шрифт дорівнює 1em (16px), padding в 1em буде дорівнювати стандартним 16 пикселів.
Rem – кореневий em, який визначається в тегу <html>. 1 root-em, на відміну від 1em, дорівнює числу при будь-яких обставин. Значення змінюється лише тоді, коли зміни задаються примусово.
Відсотки, як правило, використовуються для встановлення ширини блоків або зображень. Незалежно від розмірів екрану він буде відповідати вказаним значенням, наприклад, 80 %.
Медиазапросы
В CSS включена підтримка різних технічних параметрів пристроїв. Визначається смартфон з маленьким екраном, вказується стильове властивість під його значення. Медиазапросы виявляють відмінності орієнтації: портретна і альбомна. Широко застосовуються для створення адаптивної верстки. Макет підлаштовуватися під зазначений дозвіл екрану, змінюється структура документа у відповідності з кодом.
Визначаються типи пристроїв:
- пристрої braille і принтери embossed для сліпих;
- звичайні принтери print;
- екран монітора screen;
- мовні синтезатори speech;
- телевізори tv.
У значенні імені запитів зазначаються кілька умов. Наприклад, виводити вміст тільки для екранів моніторів і тільки максимальною шириною 600 px. Це виглядає так:
@media screen and (max-width: 600px) { код виводу }.
Адаптивний дизайн будується на використанні медиазапросов. Створюється верстка для екранів, у яких мінімальна ширина 1200 пікселів, тіло коду поміщається в @media screen and (max-width: 1200 px) { }. Далі створюється блок для планшетів @media screen and (min-width: 700px) { } і мобільних пристроїв @media screen and (max-width: 699px) { }.
Mobile First
За останніми показниками, з мобільних пристроїв і планшетів в інтернет заходять набагато частіше, ніж з комп’ютерів. Відповідно, мобільний трафік стає більш значущим для веб-сайтів. В силу таких особливостей, як маленький розмір екрана, користувачі гаджетів воліють сайти з перших рядків пошукової видачі, вони витрачають менше часу на пошук інформації.
Підхід Mobile First передбачає відображення самого важливого вмісту легкий і оптимізований веб-сайт, відмова від завантаження інших ресурсів.
Адаптивна верстка сайту за цією методологією передбачає початкове створення сторінки для маленьких екранів і подальше додавання елементів так, як того вимагає дизайн сторінки для великого монітора. Незважаючи на прозорість підходу, замовники і виконавці докладають великі зусилля, щоб повністю переглянути звичний метод розробки сайту.
Bootstrap
Один з популярних фреймворків, який дав просту відповідь на питання, як зробити адаптивну верстку, – це Twitter Bootstrap. З допомогою 12-колонковою сітки бутстрап створюються сайти, які відразу за замовчуванням правильно відображаються на екранах мобільних пристроїв. В якості основних інструментів використовуються:
- наперед задана ширина колонок, якими можна визначити ширину елементів;
- фіксовані і гумові компоненти документа;
- вбудовані шрифти і класи для них;
- засоби оформлення таблиць;
- класи оформлення меню, панелі інструментів.
Динамічні ефекти написані на jQuery, для опису зовнішнього вигляду використовується препроцесор SASS, функціонал вбудовані популярні веб-шрифти. Сайти, розроблені на останній версії bootstrap, не відображаються коректно у рідко використовуваних версій браузерів, таких як IE8, IE9 і iOS 6. Примітно, що в якості розмірів шрифтів деяких елементів використовуються кореневі em. На офіційному сайті є докладні мануали англійською і російською мовою, приклади адаптивної верстки, способи використання вбудованих компонентів.
Foundation
Foundation – потужний фреймворк, один з головних конкурентів Twitter Bootstrap. Підтримує будь-які розміри сіток, має ряд переваг, яких не вистачає в Bootstrap.
Компоненти відрізняються великим набором різних анімаційних ефектів, які можуть настроюватися. Для управління стилями використовується препроцесор SASS. У списку базових шаблонах містяться слайдери, панелі навігації, іконки Social Media.
Розміри задаються значеннями, наведеними в таблиці.
|
small |
0 |
|
smedium |
420px |
|
medium |
640px |
|
large |
1024px |
|
xlarge |
1200 px |
|
xxlarge |
1440px |
Grid Layout
Ще одна система, яка заслуговує уваги, – це Grid Layout. Являє собою набір пересічних вертикальних і горизонтальних ліній. Вони утворюють стовпці та рядки. Елементи розташовуються в сітку, їх розміри вказуються у відповідності з рядками і таблицями. Є можливість використовувати фіксовані розміри, такі як px, і гнучкі – відсотки, rem і em.
Спочатку grid контейнер потрібно оголосити.
display: grid
Для завдання ширини рядків використовується властивість grid-template-columns, а стовпців – grid-template-rows. Розміри можуть бути вказані в одному властивості grid-template-columns. Ширина вимірюється в одиницях fr, які являють собою частку доступного простору в контейнері. Передбачається можливість використання fx і px в одному властивості. Наприклад, grid-template-columns: 500px 1fr 2fr.
Висновок
Повна практика адаптивної верстки від А до Я включає в себе використання максимальної кількості способів. Щоб розібрати з нуля, що таке верстка під всі пристрої, потрібно вручну використовувати медиазапросы, прораховувати розміри зображень і шрифтів. Після отримання відповідних навичок можна починати використовувати фреймворки.
