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

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

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

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

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

Відео: Адаптивна верстка # 4 | Адаптивне меню.

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

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

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

Переваги адаптивного макета

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


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

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

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

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

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

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

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

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

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

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

Відео: Створення адаптивного сайту | Урок # 2 - Верстка

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

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

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

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

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

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

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