Почнемо з визначення термінів «адаптивний сайт» і «адаптивний веб-дизайн». Власне, визначення інтуїтивно зрозуміло з самого терміна: «адаптивний», «адаптуватися». Ці слова фактично є синонімами слова «підлаштовуватися».
Для ілюстрування прикладу давайте візьмемо стандартний шаблон Default для DLE. Цей шаблон доступний нам відразу після установки CMS, і він вже адаптивний. Ось так він буде виглядати на великих екранах:
Тепер зайдемо на цей же сайт з мобільного пристрою або просто зменшимо ширину вікна браузера на своєму комп'ютері і побачимо зовсім іншу картину:
Як бачимо, шаблон автоматично підлаштується (адаптувався) під ширину вікна браузера або пристрою. Це дуже зручно для читачів вашого сайту. І, повірте, якщо ваш сайт не адаптується, то якусь частину відвідувачів ви однозначно втратите.
Але і це ще не все. Сьогодні пошукові роботи все активніше використовують критерій адаптивності, як один з критеріїв при ранжируванні і оцінці сайту. Наприклад, Google однозначно заявив, що буде занижувати позиції сайтів, які не є адаптивними. Ну а це значить, що ви можете втратити не тільки частина існуючої аудиторії сайту, але і частина потенційної аудиторії.
Саме тому зробити сайт адаптивним сьогодні вкрай важливо. Як же зробити адаптивний шаблон для DLE. Тут є пара варіантів. Перший варіант - використовувати CSS фреймворк при верстці шаблону, наприклад популярний фреймворк Bootstrap. Цей фреймворк дозволяє верстати спочатку адаптивні шаблони.
Другий варіант передбачає самостійну верстку, тобто верстку без допомоги фреймворків. Тут вам потрібно познайомитися з темою медіа-запитів. Медіа-запити - це основний механізм і спосіб зробити адаптивну верстку. Принцип їх роботи досить простий: той чи інший медіа-запит спрацює рівно для тієї ширини (або, точніше, діапазону ширини) екрана, для якої він написаний. Ну а всередині медізапроса ми пишемо необхідні нам стильові правила, які будуть оформляти той чи інший елемент сайту для відповідної ширини.
Найпростіший приклад. У нас є двоколонковому сайт, який на мобільних пристроях повинен перетворюватися в один стовпчик. Вирішити завдання вкрай просто. Для отримання двох колонок для десктопних пристроїв ми, як завжди, використовуємо властивість float, задаючи обтікання колонок. Ну а на потрібній нам ширині вікна браузера ми просто скинемо float, використовуючи значення none. Приблизно так:
Ну і, звичайно ж, не забувайте про цю рядку коду в шапці вашого сайту (між тегами head):
Цей рядок є ключовою і дозволяє зробити ваш шаблон адаптивним :)
Інші цікаві новини на сайті: