14.02.2017 в 8:57 |

2 0


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

Поки зупиню свою увагу на iPhone.

На Айфонах текст сторінок автоматично зменшується. З-за цього не завжди можна розглянути, що ж написано на сторінці. Якщо ми згадаємо media queries, про який я писала в попередньому пості, то він може стиснути зображення до 1000 рх і менше. Але на Айфоне 4 ширина браузера становить не більше 320 рх. У цьому сматрфоне використовується віртуальне вікно, яке відрізняється збільшеними розмірами, відмінними від фактичних розмірів. Так ми можемо переглядати сторінки, які потрібно переглядати тільки на ПК.

Спочатку вікно пристосовується до масштабу, щоб можна було переглянути нормальну читану версію сторінки. Щоб збільшити певну область вікна, потрібно розтягнути її або натиснути 2 рази. Якщо ширина вікна Айфона більше 980 рх, то такі сторінки можна з легкістю переглядати і на ПК.

Існує спеціальний тег, який працює тільки для мобільних пристроїв. Це тег viewport. Якщо ви додасте його в область head, то можна зробити наш мобільний дизайн адаптивним. Якщо ми хочемо, щоб ширина вікна відповідала ширині браузера, то ми використовуємо два значення між тегами viewport. Це мінімальний масштаб і максимальний масштаб: initial-scale і maximum-scale.

Ви можете максимально точно задавати ширину вікна, якщо будете користуватися тегами width і width=device-widht.

Плюси і мінуси адаптивного дизайну для мобільних пристроїв

Спочатку зупинюся на плюсах адаптивного дизайну.

  • Зручна і швидка розробка. Вся конструкція вашого сайту буде автоматично варіювати навколо налаштувань вашого браузера. Більш того, ви можете взяти за основу неадаптівний дизайн і трішки його підправити. Підтримувати такий продукт досить просто.
  • Окремий єдиний url. Це зручно в першу чергу для користувачів, яким не доведеться запам’ятовувати адресу вашого сайту. Такий сайт буде простіше просунути в пошуку.

Більше серед плюсів адаптивного дизайну мені виділити нічого. Зупинимося на мінуси.

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

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

Це все, що я хотіла вам розповісти про розроблення адаптивного дизайну для мобільних пристроїв. Задавайте питання в коментарях. Постараюся відповісти всім!