Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Що таке адаптивний веб-дизайн?

Що таке адаптивний веб-дизайн? Сьогодні поява великої кількості різних мобільних пристроїв, за допомогою яких користувачі інтернету заходять на сайти, призвела до того, що при створенні сайтів виникає питання: як можна розробити веб-дизайн сайту так, щоб сайт добре відображався і на мобільних пристроях, і на ПК? Завдання коректного відображення сайтів на пристроях з різною роздільністю екрану ставить перед собою адаптивний веб-дизайн. Що ж це таке?

В основі адаптивного веб-дизайну лежить так званий «гумовий» принцип: розміри елементів дизайну сайту пропорційно змінюються залежно від того, які розміри вікна браузера, в якому проглядається сайт. В адаптивному дизайні сайтів використовується «гумова» верстка, а також «гумові» зображення.

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

Однак тільки лише «гумова» верстка може виявитися недостатньою тепер, коли сайти проглядаються часом на екранах дуже маленьких розмірів. Адже навіть якщо розмір блоків на сторінці можна зменшувати хоч до нуля, то вчинити так само, наприклад, із зображеннями, не вийде.

Тому адаптивний веб-дизайн пропонує застосовувати на сайті «гумові» зображення: при зменшенні розмірів вікна браузера змінюватися будуть не тільки блоки, але також і зображення. Найпростіший спосіб вирішити подібне завдання — це скористатися властивістю зображень у CSS {max-width: 100%}. Якщо застосувати цю властивість до зображення, яке міститься у блоці, то зображення буде змінюватися пропорційно разом зі зміною самого блоку.

Ще один спосіб створення «гумових» зображень полягає в тому, щоб видавати з сервера за запитом браузера зображення потрібного розміру, виходячи з того, якою є поточна роздільність екрану. Є кілька варіацій подібного способу, в яких можуть використовуватися Javascript, PHP. Також можливе застосування для адаптивного веб-дизайну CSS3 Media Queries.

За допомогою набору правил Media Queries в CSS3 можна задати необхідну «поведінку» сайту при його перегляді на різних екранах. Так, наприклад, якщо сайт проглядається на широкоформатному моніторі з великою роздільною здатністю, то в цьому випадку макет може бути найбільш «розгорнутим»: великі зображення, розташовані в горизонтальний ряд, заголовки, описи. Якщо екран менший та вужчий, то макет може змінитися: картинки зменшуються, їхнє взаємне розташування з горизонтального стає вертикальним, заголовки та описи забираються.

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

Теги:
веб-дизайн, верстка сайту, адаптивний веб-дизайн, media queries