Вміст МаркетингВідео з маркетингу та продажівМаркетингова інфографікаМобільний та планшетний маркетинг

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

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

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

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

Іншими словами, такі елементи, як зображення, можна налаштувати, а також макет цих елементів. Ось відео, яке пояснює, що таке адаптивний дизайн, а також чому ваша компанія повинна його впровадити. Якщо ви розробляєте новий дизайн сайту або веб-програму, адаптивний веб-дизайн є обов’язковим, а не варіантом, враховуючи, що більше половини всього веб-трафіку надходить із мобільних пристроїв, які мають різну ширину та висоту вікна перегляду.

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

Чуйний дизайн CSS Viewport Queries

Ось приклад таблиці стилів, яка регулює розмір шрифту на основі вікна перегляду за допомогою медіа-запиту:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

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

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

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

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

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

Ваш сайт адаптивний?

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

Для більшої точності наведіть свій Google Chrome браузера на ваш сайт. Виберіть Перегляд> Розробник> Інструменти розробника з меню. Це завантажить купу інструментів на панелі або в новому вікні. Натисніть маленьку піктограму ліворуч від панелі меню Інструментів розробника, яка виглядає як піктограма мобільного телефону та планшета. Ви можете вибрати деякі стандартні пристрої та навіть змінити, чи бажаєте ви переглядати сторінку горизонтально чи вертикально.

  • інструменти розробника chrome, адаптивний планшет
  • Інструменти розробника chrome адаптивний мобільний горизонтальний
  • Інструменти розробника chrome адаптивний мобільний
  • інструменти розробника chrome адаптивний робочий стіл

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

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

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