Адаптивна верстка для сайтів

Чим більш популярними стають мобільні пристрої, тим сильніше відчувається дискомфорт при скролінгу більшості сайтів. Саме тому, починаючи з 2012 року, веб-майстрами стало використовуватися рішення, що робить перегляд ресурсів на екранах з невеликим дозволом більш комфортним, - адаптивна верстка.

Сучасна тенденція

Сьогодні близько п'яти мільярдів людей на Землі використовують мобільні телефони, при цьому третина з них мають смартфони. Тому мобільний трафік набуває все більшого значення для власників сайтів. Ймовірно, таке джерело відвідувачів з часом буде тільки рости.

Пошукові системи оперативно прореагували на таку тенденцію. Великі корпорації "Яндекс" і Google внесли суттєві зміни у свої алгоритми ранжирування сайтів в пошуковій видачі з урахуванням наявності адаптивної верстки та дизайну. Простіше кажучи, веб-ресурси, оптимізовані для мобільних телефонів, смартфонів і планшетів, матимуть деяку перевагу перед своїми конкурентами.

Визначення адаптивної верстки

Адаптивна верстка - метод створення каркаса веб-сторінки, автоматично змінює розташування блоків відповідно до здатністю екрану пристрою, на якому вона проглядається. Тобто при такому підході створюються окремі стилі для самих різних дозволів. Такий ефект досягається особливим написанням CSS-файлів.Раніше проблема вирішувалася трохи інакше. Розробникам доводилося здійснювати набагато більше «рухів», створюючи верстку і дизайн основної версії сайту і те ж саме роблячи для мобільного. Залежно від екрану пристрою, на якому проглядався інтернет-проект з наявною мобільною платформою, запускалася підходяща версія сайту.

Такий підхід багато в чому себе не виправдовував, і більшість веб-майстрів так і не взялися за створення мобільної версії. Тепер на зміну такого порядку прийшла адаптивна верстка. Створюючи каркас сайту за допомогою такої технології, веб-майстер концентрує всі свої зусилля на створенні однієї версії проекту, а відвідувачі можуть з однаковим рівнем комфорту переглядати його як на великому екрані комп'ютера, так і на мобільному телефоні, смартфоні або планшеті.

Гідності адаптивного макета

Які переваги має адаптивна верстка сайтів? Раніше було відзначено, що плюсом є коректне відображення всіх блоків сторінки на будь-якому пристрої. Також позитивним аспектом такого підходу в створенні шаблону можна назвати швидкість реалізації змін. Що це означає?

При наявності у сайту двох платформ внесені до верстку зміни потрібно було спочатку реалізувати в робочій версії, а після - в мобільній. Якщо правки в коді були досить істотними, то процес внесення таких змін міг сильно затягнутися. При адаптивної верстці робота над сайтом ведеться в одному файлі. Зміни, внесені в макет веб-сторінки, будуть однаково скоро відображатися як в робочій версії, так і в мобільній.

Мінусом такого підходу деякі веб-майстри називають складність його реалізації. Але з появою CSS 3 створити шаблон адаптивної верстки стало зовсім просто. Навіть не найдосвідченіші веб-майстри можуть зробити свій сайт зручним для перегляду на мобільних пристроях.

Принципи та особливості адаптивної верстки

Які принципи лежать в основі методу адаптивної верстки у веб-дизайні?

— Використання «гумового» типу макета.

— «Гумові» зображення.

— Використання медіазапросов (media-queries).

— Необхідність думати про мобільні пристрої з самого початку створення верстки.

З цих основоположних принципів такого методу створення шаблону випливають такі особливості адаптивної верстки:

1. Проектування та створення дизайну сайту з урахуванням роботи на всьому спектрі дозволів: від мобільних до широкоформатних дисплеїв.

2. Верстка за допомогою каскадних таблиць стилів з використанням технології медіазапросов, що з'явилася в CSS 3.

3. Програмування на стороні як клієнта, так і сервера для передачі мобільних пристроїв зображення меншого обсягу та дозволи.

Важливий аспект, з урахуванням якого створюється адаптивна верстка, - дозволу матриці популярних електронних пристроїв. Такий підхід у розробці дизайну зробить перегляд веб-сторінок на будь-якому екрані вельми комфортним. Але як дізнатися, які з них варто включати в стилі?

З чого почати верстку адаптивного макета?

Більшість сайтів зроблені так, що на екранах смартфонів і планшетів з'являються смуги прокрутки, які не настільки зручні для серфінгу, а дизайн та верстка багатьох інтернет-проектів просто «пливуть». На сайтах, створених для навчання веб-дизайну, зібрані самі різні дозволи екранів різних пристроїв, під які варто верстати сторінки свого сайту.
Адаптивна верстка, приклади якої можна зустріти досить часто, має масу достоїнств. Що слід пам'ятати при такому підході до створення макета сторінок?

Приступивши до роботи над шаблоном, важливо періодично тестувати, наскільки вдало відображається контент і блоки макету на різних екранах. Для цього деколи досить просто змінити ширину вікна браузера. Файл зі стилями отримує медіазапрос і змінює розташування блоків, вносячи суттєві зміни. Хорошим інструментом для тестування шаблону адаптивної верстки можуть стати сайти, що імітують екрани мобільних пристроїв різних моделей. Такі сервіси дозволять уважно розглянути і оцінити, як виглядає дизайн на дисплеях самих різних мобільних пристроїв.

Хоча технологія такого адаптивного макета не настільки проста, її освоєння принесе плоди вже дуже скоро.