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

Рекламний блок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекламний блок



Додати коментар
Ваше Ім'я:   Ваш E-Mail:  


Введіть слово "краса" без кавичок

Відповідь:
© http://kafedam.pp.ua 2014