Адаптивний дизайн сайту та основні стратегії його впровадження

41

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

Класичний підхід до створення сайту виглядає приблизно так: блок по розробці, блок з веб-дизайну, блок по верстці і т. д. Однак, в останні кілька років все почало мінятися кардинальним чином: термін «веб-дизайн» поступово згасає, в той час як «адаптивний дизайн» підступно зміцнює свої позиції, поступово здійснюючи зрушення у свідомості фахівців.

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

Поняття адаптивності

«Що таке адаптивний дизайн і до чого він адаптується?» — може запитати людина недосвідчена. Я вам відповім: до виду використовуваного пристрою. Адаптивний дизайн забезпечує гарне сприйняття веб-сторінок на різних гаджетах, підключених до інтернету.

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

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

Стратегія «Mobile First»

Дана стратегія розробки була запропонована ще в 2009-му році Люком Вроблевски — автором книг і статей з веб-дизайну, керівником соціальної мережі Bagcheck, яку всього через 9 місяців після створення придбала компанія Twitter Inc.

Запропонований Люком Вроблевски підхід до розробки отримав назву «Mobile First» («Першим ділом мобільні») з трьох причин:

мобільна середовище дозволяє фокусуватися і позбутися від безладу, що виникає внаслідок «захаращення» великої кількості місця на екрані;

мобільний ринок має тенденцію до розвитку шаленими темпами;

мобільна середовище пов’язана з безліччю можливостей (камера, мультитач-жести, GPS, акселерометр, геолокація).

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

Стратегія «Mobile First» передбачає в якості стартової точки створення структури та контенту мобільної версії, що працює в умовах низької швидкості інтернету, і рух до великих точок переривання з більш швидким з’єднанням, одночасно з поліпшенням та оптимізацією спрощених версій.

Таким чином, забезпечується інноваційна та ефективна робота всіх видів пристроїв. Розробники сайту фокусуються на потребах користувачів, створюють оптимізовані і високошвидкісні сторінки, звертають увагу на важливий контент. До речі, підходом «Mobile First» користується навіть Google.

Контентна стратегія «Content out»

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

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

Наповнення повинно безперервно створюватися і обговорюватися на етапі створення адаптивного дизайну сайту, так і після його завершення! Як сказав відомий дизайнер Cennydd Bowles, «дизайн і контент повинні йти рука об руку». Вони повинні доповнювати один одного.

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

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

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

Приділіть час створення скетчу і прототипу

Вирішення питання, під які дозволу робити адаптивний дизайн, має розпочатися зі створення організованого макета — скетчинга, який надалі буде легко масштабувати.

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

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

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

Сподіваюся, ця стаття була корисна як досвідченим, так і початківцям веб-дизайнерам.

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

P. S.: а ви вже підписалися на оновлення нашого блогу? :)