Що таке адаптивний дизайн? (Пояснювальне відео та інфографіка)

адаптивний веб-дизайн

Пройшло десятиліття адаптивний веб-дизайн (RWD), щоб перейти до мейнстріму відтоді Камерон Адамс вперше представив концепція. Ідея була геніальна - чому ми не можемо розробляти сайти, які адаптуються до області перегляду пристрою, на якому він переглядається?

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

Адаптивний веб-дизайн (RWD) - це підхід до веб-дизайну, спрямований на розробку веб-сайтів, щоб забезпечити оптимальний досвід перегляду - легке читання та навігацію з мінімумом зміни розміру, панорамування та прокрутки - на широкому діапазоні пристроїв (від мобільних телефонів до настільного комп’ютера монітори). Сайт, розроблений з використанням RWD, пристосовує макет до середовища перегляду, використовуючи плавні, пропорційні сітки, гнучкі зображення та медіа-запити CSS3, розширення правила @media.

Вікіпедія

Іншими словами, такі елементи, як зображення, можна регулювати, а також компонування цих елементів. Ось відео, яке пояснює, що таке адаптивний дизайн, а також чому ваша компанія повинна його застосовувати. Нещодавно ми переробили Highbridge веб-сайт, щоб бути чуйним і зараз працює над ним Martech Zone зробити те саме!

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

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

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

Люсінда Дункалф, генеральний директор Monetate

Ось інфографіка від Monetate, яка ілюструє потенційні переваги створення одного адаптивного дизайну для декількох пристроїв:

Чуйний веб-дизайн інфографіки

Якщо ви хочете побачити адаптивний сайт у дії, наведіть свій Google Chrome браузер (я вважаю, що Firefox має ту ж функцію) для Highbridge. Тепер виберіть Перегляд> Розробник> Інструменти розробника з меню. Це завантажить купу інструментів у нижній частині браузера. Клацніть на маленьку піктограму для мобільних пристроїв вкрай ліворуч від панелі меню Інструменти розробника.

responsive-testing-chrome

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

3 Коментарі

  1. 1
  2. 2

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

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.