Словосполучення «Адаптивний дизайн» стало збірним терміном, що позначає забезпечення працездатності сайту на пристроях з низьким дозволом екрану.
Смартфони перевернули мобільний інтернет з ніг на голову, а планшети ще більше підлили масла у вогонь. Враховуючи відбулися зміни, що один і той же сайт повинен однаково добре працювати на маленькому екрані смартфона, середньому по вирішенню екрані планшета і екрані великого дозволу настільного комп’ютера або ноутбука.
А Retina-дисплеї ще сильніше розмили грань між дозволами екранів різних платформ. В ідеалі ваш сайт повинен виглядати і функціонувати так, як ви задумували, на всій різноманітності пристроїв.
Отже, адаптивний дизайн – це процес виготовлення сайту, який працюватиме на самих маленьких дозволах екрану, і на великих, і на всіх, що між ними.
Протягом останніх років веб-індустрією були розроблені прийоми, що застосовуються в цьому процесі. Частина з них зосереджені на пристосуванні звичайного, призначеного для десктопа сайту до більш низьким дозволом.
Інші передбачають побудову сайту для мобільного пристрою з наступним додаванням підтримки великих екранів. Всі ці прийоми можуть бути розділені на дві групи: створення єдиного дизайну сайту, здатного адаптуватися до різних екранів, і створення декількох версій дизайну сайту, відповідних різними дозволами.
Адаптивний або адаптований дизайн?
Адаптивний дизайн працює в середньому більш ефективно, але в деяких випадках (наприклад, дуже складні веб-додатки) серія адаптованих версій дизайну зручніше для користувачів. Мета в обох випадках одна і та ж: змусити сайт працювати якомога краще на будь-якому можливому дозволі.
Більшість дизайнерів в обох підходах використовує медіа-запити (media queries), оскільки вони сверхнадежны. Але тільки до тих пір, поки немає потреби забезпечувати сумісність з Internet Explorer 8.
Для тих, кому доводиться мати справу зі старими версіями IE, Скотт Джел зробив JavaScript-бібліотеки під назвою respond.js.
Якщо раніше веб-дизайнери не зустрічалися з верстальниками до моменту здачі своєї роботи, то тепер розробники повинні працювати разом на всьому протязі процесу створення сайту.
Від аналізу відвідуваності до прийняття рішень про переміщення порцій контенту при зміні орієнтації екрану – дизайнер і верстальник (якщо це не один і той ж людина) в рівній мірі відповідальні за все.
Щоб надихнутися гарними прикладами дизайну, відвідайте галерею mediaqueri.es, в якій кожен сайт представлений чотирма знімками екранів різних типів.
Розробка сайту з адаптованими версіями дизайну
Спочатку, коли необхідність впровадження адаптивного дизайну тільки стала проявлятися, в веб-розробці домінували техніки, пов’язані з створенням різних версій сайту для різних пристроїв.
Це був найбільш простий і очевидний, хоч і передбачав велику кількість рутинної роботи шлях. Найчастіше його обирали ті, хто хотів подружити вже наявний сайт з мобільними пристроями.
Серія адаптованих дизайнів забезпечує максимальний контроль над підсумковим зовнішнім виглядом сайту.
Вам слід створити кілька макетів під найбільш типові дозволу, і сайт віддасть користувачеві найбільший варіант, який тільки може вмістити екран його пристрою. При зміні ширини вікна браузера зроблений таким чином сайт буде змінюватися стрибками.
Дизайн
Робота дизайнера при виготовленні адаптованих версій сайту досить проста. Якщо раніше ви вибирали одне дозвіл і робили макет для нього, то тепер ви повинні зробити те ж саме кілька разів, для різних екранів.
На практиці часто буває простіше спочатку розробити саму маленьку версію, а потім йти по наростаючій.
Якщо, навпаки, почати з великих дозволів, то до того моменту, коли ви підійдете до смартфонів, елементи дизайну вашого можуть перекриватися.
Кількість проектованих дозволів верстальник і дизайнер вибирають, виходячи з призначення сайту і користувальницької бази.
Якщо ваш сайт будуть переглядати в основному з пристроїв з середнім і малим дозволом екрану, зосередьтеся на них. У загальному випадку необхідно спроектувати як мінімум три різних версії: одну для малих екранів смартфонів, іншу – для нетбуків і планшетів, третю – для ноутбуків і десктопів.
В ідеалі не завадить зробити за дві версії для кожного з цих класів пристроїв. Підтримувати більше шести варіантів дизайну одночасно для більшості реальних проектів надто обтяжливо, так що вам варто проявити розумну стриманість.
Верстка
Верстка адаптованих версій сайту теж проста. Ми будемо виходити з того, що ви робите дизайн самі або працюєте з дизайнером з самого початку. Тоді вам слід почати з мобільного варіанту, а коли він буде готовий – розширювати його, використовуючи медіа-запити.
Так можуть виглядати запити для малої, середньої та великої версії сайту:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { … } @media (min-width: 480px) { … }
/* Tablet low and high resolution viewports */ @media (min-width: 768px) { … } @media (min-width: 1024px) { … }
/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { … } @media (min-width: 1440px) { … }
Оскільки ми націлюємося на певні дозволи, перехід між ними буде викликати різкі зміни в розташуванні елементів на сторінці – ті самі перегони, про які ми згадували.
Як я вже говорив, адаптовані версії дизайну корисні лише в тому випадку, коли ми пристосовуємо вже наявний дизайн для роботи з іншими дозволами.
Одночасна підтримка декількох дозволів «з нуля» без особливої необхідності не виправдовує себе.
Проектування і розробка адаптивного дизайну
На сьогоднішній день, адаптивний дизайн є стандартним підходом при розробці нових сайтів. Хоча при адаптивному дизайні розробник має набагато менше контролю над зовнішнім виглядом сайту в порівнянні з попереднім підходом, реалізувати і підтримувати один шаблон набагато легше, ніж цілу серію.
У ньому простіше реалізувати специфічні для кожного конкретного сайту, що є конкурентною перевагою.
Ви також зможете змінювати поведінку сайту та його окремих елементів при такому дозволі, коли дизайн «повзе» або просто починає виглядати не так, як потрібно.
Адаптивний дизайн обов’язково містить у собі гумову сітку. Ще до того, як у веб-дизайні з’явилася адаптивність, вельми популярна була гумова верстка на основі відсотків від ширини екрана.
Для свого часу вона була гарна, але це було до появи смартфонів і планшетів. Тепер гумові дизайни необхідно доповнювати медіа-запитами принаймні на найнижчих і найвищих роздільній здатності, щоб не отримати занадто стиснутий або, навпаки, розповзався сайт.
Дизайн
Якщо правила розробки адаптованого дизайну дуже прості і консервативні, то з адаптивним дизайном все не так легко. Найбільш радикальним і неоднозначно сприймається прийомом адаптивного дизайну є «проектування в браузері» – фактично, поєднання дизайну з версткою.
Оскільки ви повинні взяти до уваги всі можливі дозволи екрану, але (в ідеалі) не приймати за основу жоден з них, ваша робота як дизайнера помітно ускладнюється.
Якщо можливо, постарайтеся в такому випадку знайти якесь середнє дозвіл і вести роботу в ньому, не забуваючи час від часу перевіряти, як добре отриманий результат масштабується вгору і вниз.
Надзвичайно важливо користуватися поточною статистикою користувачів, звичайно, якщо вона є. Якщо статистика показує, що більшість ваших відвідувачів користується мобільними пристроями, зосередьте зусилля на малих екранах.
Підлаштовуйтеся під аудиторію, навіть якщо це змусить вас забути про правила хорошого тону веб-розробки. Зрештою, ваш сайт повинен працювати на користувача, а не на оцінки критиків.
Верстка
Коли фаза проектування завершена, починається сама копітка робота. Як вже було сказано, враховуйте цільову аудиторію сайту з її пристроями.
Коли перший варіант макета буде готова, приступайте до створення медіа-запитів. Замість того щоб записати кілька певних значень ширини екрану, ви повинні вручну змінювати розмір вікна браузера, поки дизайн не почне з’їжджати.
Коли це станеться, зафіксуйте це дозвіл, створіть медіа-запит для нього, зв’яжіть його з відповідною латкою, яка буде лагодити поехавшую верстку, а потім продовжуйте змінювати розмір. Коли всі цільові дозволу вами будуть покриті, переходите до тестування сайту.
Змішані типи дизайну
Деякі сайти, наприклад, WebdesignerDepot, використовують свої власні підходи до адаптивного дизайну. Більшість сайтів потрапляють в одну з двох категорій, про які ми розповіли у нашій статті, але іноді розробники знаходять оригінальні рішення.
WebdesignerDepot має стандартні «точки заломлення» на переходах від великого дозволу до середнього, та від середнього – до малого. Крім того, є й додаткові медіа-запити, які чинять деякі порушення дизайну, що виникають при проміжних значеннях ширини екрана.
Плюс до всього, сайт веде себе як гумовий, але тільки до певного максимального значення ширини вікна браузера. Враховуючи все це, не соромтеся проявляти винахідливість і ламати правила!
Тестування адаптивних і адаптованих сайтів
На жаль, не існує універсального рішення для тестування адаптивних сайтів. Кращим рішенням, як і раніше є ручна перевірка сайту на всіх пристроях, що попалися під руку. Для швидких прикидок бувають корисні різні розширення браузерів, потрібним чином змінюють розмір вікна.
Так, щоб швидко перевірити сайт на малому дозволі, я використовую розширення для браузера Google Chrome, яке називається Ripple Emulator.
Тестування на реальних пристроях набагато більш трудомістко, але воно дає більш точне уявлення про функціональності сайту. Користувальницький інтерфейс, добре виглядає в емуляторі, може виявитися дуже незручним на смартфоні або планшеті.
Висновок
Наша стаття є лише коротким екскурсом в способи створення дизайну веб-сайтів для різних пристроїв. Багато інформації про адаптивне дизайні залишилося за рамками даної публікації.
Оптимізація інтерфейсу, типографіка і шрифти, адаптивні зображення і відео, співвідношення сторін екранів і багато інші теми не були нами відображені.
Втім, джерел інформації з цих питань існує чимало, і багато хто з них більш інформативні. Сподіваюся, що наше пояснення відмінностей між способами адаптації до сайту екранів пристроїв допоможе вам не загубитися в безлічі ідей, що стосуються адаптивного Інтернету.
Співтовариство веб-розробників постійно винаходить нові вирішення питань, з якими ми тільки починаємо зіштовхуватися. Інформації з адаптивного дизайну існує достатньо, але самої концепції ще не вистачає зрілості.
Тому, незважаючи на велику кількість готових інструментів і прийомів, креативність в знаходженні власних рішень послужить вам добру службу.
Якщо у вас є зауваження або підказки для тих з нас, хто тільки починає свій шлях у сучасному веб-дизайні, не забудьте прокоментувати цю статтю.
Переклад статті «Responsive vs adaptive webdesign, which is best for you?» був підготовлений дружною командою проекту Сайтостроение від А до Я.
