Чуйний дизайн (також відомий як "адаптивний" дизайн), де на одній веб-сторінці представлена найкраща версія двох або більше макетів, виготовлених вручну залежно від ширини браузера, є найбільш сильним варіантом для більшості веб-сайтів. Щоб зрозуміти, чому, допомагає переглянути всі варіанти, доступні веб-дизайнерам:
Виправлені макети
Фіксована ширина сторінки, де ширина вмісту однакова, незалежно від ширини веб-переглядача, пропонує рівномірний вигляд на всіх пристроях і може вимагати менше кодування, мислення та обслуговування, ніж більш гнучкі конструкції.
Деякі вважають, що макети фіксованої ширини - це пережитки минулої епохи, коли люди прагнули досконалості пікселів та рівномірного вигляду у всіх браузерах. Енді Кларк, автор веб-дизайну в твердому стилі, вважає, що такий спосіб мислення мертвий:
"Раніше було звичайною практикою боротися зі створенням веб-сайту, який виглядав би і працював однаково у всіх браузерах - незалежно від їх можливостей. Для цього потрібно було робити компроміси та уникати використання технологій, не підтримуваних усіма браузерами.
Це твердо зварене?
Не кинь себе, милі щоки. Це не спосіб розвивати наше ремесло або будувати кращу мережу. Таке старомодне мислення стримує нас. Це змушує нас виправдовуватися за те, що не робити те, що ми знаємо, що це правильно. Найгірше, що ми можемо зробити, як нинішні зберігачі Інтернету, - це дозволити що-небудь обмежити те, що можливо ".
- Енді Кларк, веб-дизайн із твердим стилем , p6 [PDF-версія доступна тут ]
Хоча деякі розглядають нерухомий макет як висоту лінощів, конструкції з фіксованою шириною все ще вибираються дуже розумними дизайнерськими командами з плином або адаптацією. Наприклад, Apple в даний час обслуговує таку версію iMacs, як і для iPad та iPhone. Чому компанія, відповідальна за те, щоб масове перегляд веб-сторінок у масі не оптимізувала свій веб-сайт для мобільних пристроїв?
Тому що він не вважає, що потрібно.
Замість того, щоб адаптувати свій веб-сайт для маленьких екранів, Apple створила апаратне та програмне забезпечення для зручного користування широкими веб-сайтами на цих екранах. Apple вважає, що «оптимізований для мобільних пристроїв» досвід найкраще забезпечується в нативній програмі, а не у вікні браузера. Ось чому він пропонує свої додаток Apple Store замість обслуговування веб-магазину, оптимізованого для мобільних пристроїв. І тому він заохочує видавців пропонувати додатки для журналів через спеціалізовані веб-сайти. Поточна філософія веб-дизайну Apple зрозуміла: один макет, щоб керувати ними, працює добре. Для всього іншого є додаток для цього.
Тільки з цієї причини дехто стверджує, що виправлені плани залишаються актуальними як ніколи; вони би сказали, що текучі та адаптивні макети - це просто зупинка прогалин, поки ми чекаємо, коли програмне забезпечення для мобільних браузерів покращиться, а HTML та JavaScript розвиватимуться та спокушати розробників подалі від магазинів додатків, що продаються.
На мою думку, однак, прокручувати по Інтернету за допомогою тривалого натискання та перетягування на будь-який проміжок часу на мобільному пристрої зовсім не цікаво, навіть на iPhone. Якщо ви вважаєте, що найкращим веб-досвідом є той, який робить читання, публікацію та взаємодію з веб-сайтами задоволенням замість клопоту, незалежно від пристрою, яким ви користуєтесь, вам доведеться в якийсь момент поступитися вмістом, який обслуговує вміст, адаптований до кожного відвідувач варто розглянути.
Макет рідини
Макет з рідиною, де ширина сторінки протікає для заповнення екрана (часто до максимальної накладеної ширини), обіцяє кращий досвід роботи на різних платформах, надаючи вміст на ширині, більш підходящій для області перегляду.
На практиці макет рідини викликає більше проблем, ніж вони вирішують, як зазначив Камерон Молл у цій програмі:
"... конструкції з рідиною вирішують кожну проблему з компонуванням так само, як комп'ютери роблять офіси безпаперовими, тобто їх немає".
- Камерон Молл, "Чи повинні всі сайти бути рідкими?", Вересень 2006 року
Коли ви приймаєте текучий макет, ви відмовитеся від управління своїм дизайном і приймаєте, що текст буде перегортатися, зображення переповнюватимуться, довжина рядків буде непередбачувано змінюватися, текст, зображення та елементи навігації можуть стискатися разом на невеликі ширини, а стовпці стрибатимуть і плаватимуть навколо, щоб напутити вас.
Рідка розкладка, можна сказати, також ледачий варіант. Це дробовий підхід до адаптивного веб-дизайну. Замість того, щоб забезпечити індивідуальний досвід з трьома-чотирма ретельно розглянутими конструкціями фіксованої ширини, ви пропонуєте непередбачуваний досвід у надії, що він може працювати на великих та малих екранах, і, сподіваємось, підключіть усі прогалини, які ви до кінця не врахували по середині.
Це не робить макети рідини непотрібними. Є способи змусити їх працювати. 456 Беріа Санкт блогу, наприклад, приймає макет рідини до заданої ширини, після чого вона використовує фіксовану один для чого - небудь більшого. А при дуже невеликій ширині бічна панель відпадає, щоб використовувати єдиний стовпець, що полегшує читання на маленьких екранах. Але це вже не текуча схема. Це щось краще. Це чуйна конструкція.
Чуйні макети
«Чуйний» або «адаптивний» макет - де на одній веб-сторінці представлена одна версія двох або більше складених макетів залежно від ширини веб-переглядача відвідувача - є ключовою частиною прогресивного вдосконалення, яке має на меті зробити веб-сайт найкращим виглядом це може кожен відвідувач.
Вибір адаптивного макета - це "відмінне обслуговування клієнтів", за словами Аарона Густафсона, автора адаптивного веб-дизайну. Якщо ми добре розробимо наші сайти, за його словами, відвідувачам слід надати ідеально продуманий досвід, не розуміючи, що ми їх метушимо:
"Як веб-дизайнери та розробники, ми повинні прагнути бути настільки ж хорошими у своїй роботі, як і уважний, ненав’язливий офіціант, але це не просте завдання. Так само як офіціант не має уявлення, чи потребуватиме клієнт, який заходить через двері, буде часто Заправки або мало, ми не можемо знати потреби конкретного користувача, коли вони приходять на наш сайт. Натомість ми повинні вирішити, щоб задовольнити ці потреби. Якщо ми справді хороші, ми можемо це зробити, навіть якщо наші клієнти навіть не усвідомлюють, що ми враховуючи для них особливі міркування. На щастя, з прогресивним вдосконаленням користувача та орієнтованого на зміст підходу (на відміну від витонченої деградації, найновіший підхід браузера), це легко досягти ".
- Аарон Густафсон, адаптивний веб-дизайн, p12 [PDF-версія тут доступна ]
Усвідомлення того, що наша робота веб-дизайнерів полягає в тому, щоб адаптуватися до наших відвідувачів, а не змушувати їх пристосовуватися до нас - як, напевно, Apple вважає, - це досить недавня розробка веб-дизайну. На мій погляд, це відродження сортів: ми закінчили вибирати вишні за добрі звички з років дизайну друку. Тепер ми повинні викинути кайдани, накладені роботою в заздалегідь заданому просторі на друкованій сторінці.
Де колись ми ставились до браузера як до фіксованого полотна, тепер ми приймаємо, що жодного визначеного полотна не існує взагалі, і це стає все зрозумілішим завдяки величезній суміші розмірів екрана, яку ви, без сумніву, починаєте бачити у статистиці відвідувачів. . Замість того, щоб кожен новий пристрій розцінювати як унікальний "розмір сторінки" для націлювання (а потім потрібно згуртовувати війська, коли з'явиться новий пристрій), ми можемо дотримуватися більше надійних домовленостей.
Ми можемо думати про групи - "великі", "середні" та "маленькі" - замість того, щоб думати про конкретні телефони та планшети, тоді розробляємо сайти, щоб найкраще виглядати в цих групах. Які б нові пристрої не виходили, вони впишуться в ту чи іншу смугу, і - навіть якщо вони знаходяться на межі між двома смугами - ми все ще маємо більше контролю над досвідом, ніж якби ми використовували фіксований або текучий макет.
У чуйному веб-дизайні Етан Маркот пропонує цей заклик до зброї:
"Нас потрібно відпустити.
Замість того, щоб створювати роз'єднані конструкції, пристосовані до певного пристрою чи браузера, ми повинні розглядати їх як грані того ж досвіду. Іншими словами, ми можемо створити сайти, які не тільки є більш гнучкими, але і можуть адаптуватися до засобів масової інформації, які їх надають.
Словом, нам потрібно практикувати
чуйний веб-дизайн. Ми можемо охопити гнучкість, притаманну Інтернету, не здаючись контролю, який ми вимагаємо як дизайнери. Все завдяки впровадженню в нашій роботі технологій, заснованих на стандартах, і внесення невеликих змін у нашу філософію до дизайну в Інтернеті ".
- Етан Маркот, чуйний веб-дизайн, p8 [PDF-версія тут доступна ]
Але які гурти ви використовуєте? Ethan Marcotte рекомендує наступні три в розділі " Чуйний веб-дизайн". (Щоб дізнатися, що вони роблять, і зрозуміти застереження, ви можете захопити книгу. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Існує також ряд фреймворків CSS, розроблених для сприяння створенню адаптивних веб-сайтів, у тому числі " Менш рамок" Джоні Корпі .
Замість використання довільних точок прориву, можливо, краще дозволити дизайну вашого сайту диктувати смуги. Зменшіть ширину екрана веб-переглядача і, коли дизайн буде порушений, ця ширина повинна бути однією з «точок прориву». Продовжуйте зменшувати ширину та додавати точки точки перерви за допомогою запитів на мультимедійні CSS, поки ваш дизайн не буде добре виглядати на всіх ширинах. Таким чином, ваш дизайн буде добре виглядати на всіх пристроях, а не лише в кількох розмірах екрана, в який ви намагалися пробити його. Якщо ви користуєтеся Chrome, увімкнення Інструментів для розробників (Перегляд> Розробник> Інструменти для розробників) та зменшення ширини веб-переглядача дає корисне зчитування поточної ширини у верхньому правому куті, яке ви можете використовувати для визначення місця, де мають бути точки прориву.
Ще один популярний підхід, який слід врахувати, - це чуйний дизайн Mobile First , де ваш основний аркуш стилів обробляє стилі для найменших пристроїв, а медіа-запити стосуються більшої ширини екрану, а не навпаки. Це може призвести до більш швидкої роботи на мобільних пристроях, особливо якщо ви використовуєте безліч фонових зображень CSS. (Ви будете конструювати точки перерви так само - просто починайте з мінімальної ширини веб-переглядача і працюйте вгору. І не забудьте протестувати на стільки фактичних пристроїв, наскільки ви можете дістати свої руки - подумайте про відвідування відкритого пристрою Лабораторія .)
Коротше кажучи, коли це зроблено добре, адаптивний дизайн - це радість спостерігати і переживати як веб-дизайнеру, так і користувачеві комунального саду. Візьмемо, наприклад, сайт японської фірми Information Architects :
На iPhone
На iPad
На iMac
Так само, як передбачив Аарон Густафсон, ви навіть не знаєте, що вас обслуговують, поки ви не побачите дизайни на одній сторінці.
Досвід навряд чи може бути приємнішим у кожному випадку; вам не потрібно думати і не спілкуватися зі сторінкою, щоб почати читати вміст, витрачайте час на роздуми, чому це виглядає дивно на екрані, або збільшуйте масштаб, щоб побачити елементи навігації, перш ніж ви можете натиснути їх, тому що хтось уже вирішив ці проблеми для ти. І що тому адаптивний дизайн майже завжди перевершує інші варіанти.