Сучасний веб-дизайн: що потрібно знати?

Як адаптувати дизайн під різні пристрої, щоб він залишався зручним для користувача? Нумо розберімося.

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

Життя було простіший, коли веб-дизайнерам доводилося думати тільки про десктопні версії сайту. Для більшості моніторів і дисплеїв було дуже легко створювати дизайн, адже один розмір підходив майже під всі пристрої. А потім настав підйом мобільного інтернету. З його розквітом однією з важливих тем для обговорення став вибір між створенням адаптивного (adaptive web design) та респонсів дизайну (responsive web design), який буде змінюватися під різні стандарти.

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

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

Найактуальніші теми для обговорення зараз — це респонсів і адаптивний веб-дизайн. Застосовуючи обидва методи, легше дотримати рекомендації Google, щоб сайт був доступний на мобільній версії, мав хороший UX і виконання, але кожен підхід має свої плюси та мінуси.

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

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

Вам варто подумати про вибір адаптивного дизайну лише, якщо:

• Сайт повинен по-різному працювати на всіх пристроях.
• Ви дійсно можете створити різні версії сайту для кожного з пристроїв.
• Ви можете створювати адаптивні шаблони.
• Ваш користувач отримує інформацію на багатьох пристроях (якщо ж аналітика показує, що 70 % користувачів заходять на сайт з одного пристрою, адаптивний UI не вартий вашого часу).

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

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

Респонсів дизайн — це майбутнє інтернету тому, що:

1. Він більш зручний для ваших користувачів. У нього немає ніяких встановлених меж розміру екрану, як в адаптивного дизайну. Поки респонсів дизайн гарантує гарну роботу на будь-якому розмірі екрану, адаптивний дизайн буде працювати тільки на тій кількості екранів, під які зроблені макети.
2. Він швидше завантажується. Адаптивний сайт повинен завантажити всі можливі макети, в той час як респонсів повинен завантажити тільки один, який працює на всіх платформах.
3. Він націлений на вимоги майбутнього. Оскільки він не обмежений заданими розмірами екрану, ваша сторінка буде завантажуватися і добре виглядати на наступному телефоні Samsung або iPhone (не кажучи про планшети та розумні годинники), незалежно від розмірів екрану. Так що, ласкаво просимо у світ, де потрібно зовсім невелике зусилля, щоб всі версії для ваших iPad, iPhone, Android існували всередині одного файлу. Ви зможете побачити зміни в режимі реального часу, як тільки скоректуєте розміри.