Спробуємо розібратися, які є варіанти розробки дизайну сайту.
10-15 років тому не було такого розмаїття і кількості моніторів. Тому розробляти дизайн для сайтів було просто. Створюєш звичайний статичний дизайн під фіксовану ширину екрану і можеш не сумніватися - більшість користувачів побачить сайт так, як і задумано.
До сих пір можна зіткнутися з декількома версіями того, як розуміють "адаптивний дизайн" різні IT-фахівці. Спробуємо ж розібратися, які є варіанти розробки дизайну сайту.
статичний дизайн
"Статичним" або "статичним" називається сайт, який складається з незмінних HTML-сторінок. Такий сайт має на увазі наявність закріпленої теми з фіксованою шириною і найчастіше містить одну або буквально кілька сторінок. Щоб відобразити такий сайт по центру екрану досить 1000 px. Контент завжди буде вирівнюватися строго по центру.
Також варто врахувати, що оновити статичний сайт може тільки людина, що володіє хорошим досвідом веб-розробки. У ньому немає адмінпанелі, тому всі зміни потрібно робити через вихідний код.
Переваги статичного дизайну:
Недоліки статичного дизайну:
- На мобільному пристрої сайт буде відображатися з горизонтальною смугою прокрутки;
- Широкоформатні монітори відображають статичний дизайн досить убого - варіант не для тих, хто прагне до ефектності.
Статичних сайтів раніше було набагато більше - поява і розвиток CMS сприяло скороченню їх кількості на користь динамічних. Приклади статичних сайтів:
динамічний дизайн
"Адаптивний дизайн - одна з найактуальніших тенденцій в розробці сайтів, що прийшла всерйоз і надовго" - такими заголовками зараз переповнений практично будь-який сайт, присвячений веб-розробці та веб-дизайну. Дізнатися про те, що це таке, не складе труднощів. Однак є деякі тонкощі, які стосуються розуміння і сприйняття такого дизайну. Подивимося на них.
"Гумовий" дизайн
Основна особливість такого дизайну в тому, що ширина колонок задається у відсотках, а не в пікселях. Тому "гумовий" дизайн при будь-якому дозволі монітора розтягується на всю ширину екрану. Зробити такий дизайн, особливо при використанні блочної верстки дещо складніше, ніж фіксований, зате користувач не буде бачити порожніх полів на сторінці. Примітно, що гумовий дизайн спочатку досить широко став використовуватися в рунеті, в той час як на Заході розробники дуже довго зберігали прихильність статичному дизайну.
адаптивний дизайн
Адаптивний дизайн виправданий при створенні масштабних проектів: інформаційних порталів, інтернет-магазинів, форумів, корпоративних сайтів і інших подібних їм ресурсів. Особливо ефектно він виглядає на моніторах з діагоналлю не менше 15,6 ''.
Принцип адаптивності будується на створенні одного URL, який підлаштовує контент під різні формати екранів. приклади:
Подивіться, як змінюється розташування тексту і картинок на різних екранах. Чому це круто? Одна з причин - Google віддає перевагу таким ресурсам в пошуковій видачі. Інша причина - такі сайти легше проектувати і підтримувати, а це спрощує роботу багатьох людей.
"Чуйний" дизайн
Останнім методом, до якого прийшли веб-дизайнери, став "чуйний" дизайн (англ. Responsive design), який протиставили звичайному "адаптивному" дизайну (англ. Adaptive design), хоча до теперішнього часу ці терміни часто плутають і вживають в схожому сенсі. "Чуйний" дизайн поєднує в собі риси адаптивного і "гумового" дизайнів. Він автоматично підлаштовується під будь-яку ширину екрану, як і гумовий. При цьому в процесі підлаштування може змінюватися розташування блоків, розмір картинок. Також можуть з'являтися, зникати або змінюватися деякі елементи. Наприклад, звичайне горизонтальне меню може помінятися на випадає.
Ще більш важливий момент - місця, з яких люди будуть приходити на ваш сайт. Тому дуже важливо враховувати будь-яку швидкість інтернету, адже величезна кількість людей живуть у віддалених районах, де швидкість інтернету навіть не 1 мб / с. Існує дослідження, згідно з яким, 57% користувачів підуть з вашого сайту, якщо він завантажується довше декількох секунд. Не так давно Google почав враховувати швидкість при ранжируванні сайтів. Вона не впливає на позицію сайтів із середньою швидкістю завантаження, але якщо сторінка не завантажується за певний час, то пошуковий алгоритм застосовує до такого сайту штрафні санкції.
Все це змушує нас уважніше поглянути на швидкість інтернету і надати користувачеві можливість завантажити контент досить швидко на самих малих швидкостях. Тобто "чуйний" дизайн - це вже не тільки історія про розміри екранів, але різні сценарії, рішення для яких повинні бути гнучкими і продуманими "від і до".
Сайти, на яких можна подивитися "чуйний" (responsive) дизайн в дії:
Переваги динамічного дизайну:
- Допрацьовувати і оновлювати елементи такого ресурсу можна в будь-який час без необхідності редагування всіх сторінок.
- Розробляти масштабований сайт можна як з нуля, вручну роблячи необхідні скрипти, програмні коди і ін. Так і використовувати CMS.
- Адаптивний дизайн легко видозмінювати, враховуючи не тільки побажання замовника, а й актуальні вимоги галузі, нові можливості програмування, об'єктивні обставини. Всі коригування вносяться через адмінпанель без необхідності правити файли з кодом.
- Можливості веб-дизайнера в роботі з динамічним сайтом обмежені тільки його уявою.
Недоліки динамічного дизайну:
- Щоб створити хороший «гумовий» сайт доводиться неабияк попітніти - це завдання не для ледачих і вимагає певних навичок веб-дизайнера;
- На широкоформатних моніторах занадто довгі рядки текстового контенту нелегкою - потрібно постійно думати, як поліпшити сприйняття інформації користувачем.
До речі, ось тут постаралися наочно показати різницю між видами дизайну. Спробуйте вибрати один з 4-х варіантів і поізменять ширину вікна браузера. Тут adaptive - адаптивний дизайн, liquid - гумовий, responsive - чуйний, а static - статичний.