Чуйний веб-дизайн, webreference
Інтернет злетів швидше, ніж будь-хто міг це передбачити і росте як божевільний. За останні кілька років до того ж на сцену увірвалися мобільники. Зростання споживання мобільного Інтернету також випереджає загальне зростання використання Інтернету.
З ростом використання мобільного Інтернету виникає питання про те, як створювати веб-сайти, які підходять для всіх користувачів. Індустрія відповіла на це питання чуйним веб-дизайном.
огляд чуйності
Термін чуйний веб-дизайн сам по собі придумав і в значній мірі розробив Ітан Маркотт. Багато що з того, що розглянуто в цьому уроці було вперше сказано Ітаном в мережі і в його книзі Чуйний веб-дизайн. яку варто прочитати.
Мал. 4.01. Food Sense має гарний дизайн, чуйний при самих різних розмірах вікна. Незалежно від того, наскільки екран великий або маленький, сайт Food Sense підлаштовується під нього, створюючи природний користувальницький досвід.
Чуйний, адаптивний і мобільний
Для деяких термін чуйний може бути не новий, а інші можуть бути краще знайомі з терміном адаптивний або мобільний. Для вас може представляти інтерес, в чому різниця між усіма цими термінами.
Чуйний і адаптивний веб-дизайн тісно пов'язані і часто змінюються один з одним місцями. Чуйний зазвичай означає реакцію швидко і позитивно реагувати на будь-яка зміна, в той час як адаптивний значить легко пристосовуватися до нової мети або ситуації при їх зміні. З чуйним дизайном сайти постійно і плавно змінюються в залежності від різних факторів, таких як ширина вікна, а адаптивні сайти будуються на групах встановлених факторів. Поєднання цих двох ідеально, забезпечуючи ідеальну формулу для функціональних сайтів. Який термін використовувати особливо не має великої різниці.
Мобільний, з іншого боку, як правило, означає створення окремого сайту зазвичай на новому домені виключно для мобільних користувачів. Хоча в цьому іноді є свій сенс, але зазвичай це не є хорошою ідеєю. Мобільні веб-сайти можуть бути надзвичайно легкими, але вони залежать від нового базового коду і поведінки браузера, все це може стати перешкодою як для розробників, так і для користувачів.
В даний час найбільш популярний метод полягає в чуйну веб-дизайні, на користь дизайну, який динамічно адаптується до різних браузерів і пристроїв, змінюючи макет і контент на цьому шляху. Це рішення містить переваги всіх трьох: чуйного, адаптивного і мобільного.
гнучкі макети
Чуйний веб-дизайн розбивається на три основних компоненти, включаючи гнучкі макети, медіа-запити і гнучкий медіа-контент. Перша частина, гнучкі макети - це практика побудови макета сайту з гнучкою сіткою, яка здатна динамічно зменшувати розмір до будь-якої ширини. Гнучкі сітки будуються з використанням відносних одиниць довжини, як правило, відсотків або одиниць em. Ці відносні довжини потім застосовуються, щоб оголосити основні значення властивостей сітки, таких як width. margin або padding.
Формула заснована на взяття цільової ширини елемента і розподілі її на ширину батьківського елемента. Результатом є відносна ширина цільового елемента.
гнучка сітка
Давайте подивимося, як ця формула працює всередині двоколонковому макета. Нижче у нас є батько з класом container, який обертає елементи
Використовуючи формулу гнучкою сітки можна взяти все фіксовані одиниці довжини і перетворити їх у відносні одиниці. У цьому прикладі ми скористаємося відсотками, але одиниці em працюватимуть також добре. Зауважте, незалежно від того, наскільки широким стає батьківський container. margin і width для
Демонстрація гнучкою сітки
Одного гнучкого макета саме по собі недостатньо. Часом ширина браузера може бути настільки мала, що навіть пропорційне збільшити вигляд буде створювати занадто вузькі колонки для ефективного відображення контенту. Зокрема, коли макет стає занадто малий або занадто великий, текст може стати нерозбірливим і компоновка може зламатися. В цьому випадку можуть бути використані медіа-запити, які допоможуть залишити краще враження.
Медіа-запити
Медіа-запити були побудовані як розширення типів носіїв, які зазвичай зустрічаються при орієнтації і включення стилів. Медіа-запити надають можливість задавати різні стилі для окремих браузерів і поведінки пристроїв, наприклад, ширини екрану або орієнтації пристрою. Уміння застосувати унікальні стилі відкриває цілий світ можливостей і важелів для чуйного веб-дизайну.
Ініціалізація медіа-запитів
Кожен медіа-запит може включати в себе тип носія, за яким слід одне або кілька виразів. Основні типи носіїв включають в себе all. screen. print. tv і braille. Специфікація HTML5 містить нові типи носіїв, включаючи навіть 3d-glasses. Якщо тип носія не може бути вказано, медіа-запитом за замовчуванням буде screen.
Вираз медіа-запиту, яке слід за типом носія може включати в себе різні мультимедійні функції і значення, які потім вважаються істиною або брехнею. Коли медіа-функція і значення істинні, стилі застосовуються. Якщо медіа-функція і значення помилкові, то стилі ігноруються.
Логічні оператори в медіа-запитах
Логічні оператори в медіа-запитах допомагають побудувати потужні вираження. Існують три різних логічних оператора, доступних для використання в медіа-запитах: and. not і only.
Використання логічного оператора and в медіа-запиті дозволяє додати додаткову умову і переконатися, що браузер або пристрій одночасно виконує а, б, в і т. Д. Кілька окремих медіа-запитів можуть бути розділені коми, діючи як негласний оператор or (або). У наведеному нижче прикладі вибираються всі типи носіїв з шириною між 800 і 1024 пікселів.
Логічний оператор not заперечує запит із зазначенням будь запиту, але тільки одного. У наведеному нижче прикладі вираз застосовується до будь-якого пристрою, у якого немає кольорового екрану. Чорно-білі або монохромні екрани, наприклад, застосовуватися будуть.
Логічний оператор only є новий оператор і не розпізнається браузерами, що використовують алгоритм HTML4, що дозволяє приховати стилі від пристроїв або браузерів, які не підтримують медіа-запити. Вираз нижче вибирає тільки екрани в портретній орієнтації на пристроях, здатними працювати з медіа-запитами.
Опускаємо тип носія
При використанні логічних операторів not і only тип носія може бути відкинутий. У цьому випадку тип носія за замовчуванням приймається all.
Медіа-функції в медіа-запитах
Знання синтаксису медіа-запиту і принципів роботи логічних операторів є прекрасним введенням в медіа-запити, але справжня робота починається з медіа-функцій. Медіа-функції визначають, які атрибути або властивості будуть спрямовані в вираз медіа-запиту.
height і width
Функції height і width базуються на висоті і ширині області візуалізації, вікна браузера, наприклад. Функції device-height і device-width з іншого боку засновані на висоті і ширині вихідного пристрою, яке може бути більше, ніж фактична область візуалізації. Значним цих медіа-функцій може бути будь-яка одиниця довжини, відносна або абсолютна.
В чуйну дизайні найбільш часто використовувані функції включають min-width і max-width. Вони допомагають побудувати чуйні веб-сайти на комп'ютерах і мобільних пристроях однаково, уникаючи плутанини з особливостями пристроїв.
Використання префіксів min і max
Префікси min і max можуть бути використані з багатьма медіа-функціями. Префікс min вказує значення більше або дорівнює, тоді як префікс max вказує значення менше або дорівнює. Використання префіксів min і max дозволяє уникнути конфлікту із загальним синтаксисом HTML, без спеціального задіяння символів <и>.
orientation
Медіа-функція orientation визначає, чи знаходиться пристрій в альбомній (landscape) або портретної (portrait) орієнтації. Режим landscape спрацьовує, коли дисплей ширше, ніж висота, режим portrait спрацьовує, коли висота дисплея більше ширини. Ця медіа-функція грають роль в основному з мобільними пристроями.
aspect-ratio
Функції aspect-ratio і device-aspect-ratio визначають співвідношення ширини до висоти в пікселях цільової області візуалізації або пристрої виведення. Префікси min і max доступні для використання з різними функціями, виявляючи співвідношення вище або нижче того, про який йдеться.
Значення функції складається з двох позитивних цілих чисел, розділених косою рисою. Перше число задає ширину в пікселях, а друге число задає висоту в пікселях.
pixel-ratio
Крім медіа-функції aspect-ratio є також функція pixel-ratio. Вона включає функцію device-pixel-ratio. також з префіксами min і max. Зокрема, ця функція відмінно підходить для визначення пристроїв високої чіткості, в тому числі дисплеїв ретина. Медіа-запит для цього виглядає наступним чином.
resolution
Медіа-функція resolution визначає здатність пристрою виведення у вигляді щільності пікселів, також відомої як число точок на дюйм або DPI. Функція resolution також приймає префікси min і max. Крім того, функція resolution приймає число точок на піксель (1.3dppx), точок на сантиметр (118dpcm) та інші розміри на основі значень дозволу.
Інші медіа-функції
Інші функції включають в себе визначення доступних вихідних квітів з допомогою color. color-index і monochrome. виявлення растрових пристроїв через функцію grid. а також визначення процесу сканування телевізора функцією scan. Ці функції менш поширені, але настільки ж корисні при необхідності.
Підтримка медіа-запитів в браузерах
Respond.js є полегшений милицю, він шукає тільки min / max-width і повинен ідеально підходити там, де використовуються тільки ці медіа-запити. CSS3-MediaQueries.js більш розвинений і важче, і пропонує підтримку більш широкого безлічі більш складних медіа-запитів. Крім того, майте на увазі, що будь-який милицю може мати проблеми з продуктивністю і потенційно сповільнити сайти. Переконайтеся, що будь-який подібний милицю заслуговує зниження продуктивності.
Демонстрація медіа-запитів
Мал. 4.02. Без будь-яких медіа-запитів
Визначення контрольних точок
Крім того, весь цей час виходять нові пристрої і дозволу. Спроба йти в ногу з цими змінами це нескінченний процес.
спочатку мобільні
Віра в мобільні полягає в тому, що користувач мобільного пристрою зазвичай використовує менший екран і не повинен завантажувати стилі для настільного комп'ютера, які перепишуть мобільні стилі пізніше. Це марна трата трафіку. Трафік це цінність для будь-яких користувачів, які шукають реактивний сайт.
Підхід «спочатку мобільні» також враховує в дизайні обмеження мобільного користувача. В недалекому майбутньому більшість інтернет-з'єднань буде зроблено на мобільних пристроях. План полягає в тому, що для цього відповідно і розвивати важливий мобільний досвід.
Контрольні точки медіа-запитів з урахуванням «спочатку мобільні» можуть виглядати наступним чином.
Крім того, завантаження непотрібних ресурсів може бути зупинена за допомогою медіа-запитів. Взагалі кажучи, видалення тіней, градієнтів, трансформації та анімації в мобільних стилях сама по собі непогана ідея. При їх надмірному застосуванні вони викликають важку навантаження і навіть можуть скоротити час роботи батареї.
демонстрація
Додавши медіа-запити до нашого попереднього прикладу, ми перепишемо кілька стилів, щоб макет виглядав краще на екранах менше 420 пікселів в ширину. Переписуючи цей код, ми спочатку додамо мобільні стилі за замовчуванням, потім медіа-запити для настройки екранів з шириною більше 420 пікселів, в такий спосіб:
спочатку мобільні
Зауважте, тут така ж кількість коду, що і раніше. Єдиним винятком є те, що мобільні пристрої вимагають тільки єдиний запис CSS. Інші стилі відкладені і завантажуються тільки на великих екранах і зроблено це без переписування початкових стилів.
Мал. 4.04. Хоча це всього лише демонстрація медіа-запитів, багато мобільні пристрої до сих пір не знають про початкову ширині або масштабування сайту. При цьому вони можуть не перешкоджати медіа-запитами.
Для досягнення найкращих результатів і красиво виглядає сайту рекомендується використовувати значення пристрою за умовчанням шляхом застосування device-height і device-width.
Мал. 4.05. Дозволивши пристроїв дізнатися передбачувану ширину сайту, device-width в даному випадку, це дозволило сайту прийняти правильний розмір і підібрати будь-які точні медіа-запити.
Для управління масштабуванням сайту на мобільному пристрої і наскільки користувачі можуть його масштабувати, застосовуються властивості minimum-scale. maximum-scale. initial-scale і user-scalable.
Мал. 4.06. Використання цілого числа більше 1 буде збільшити сайт більше, ніж масштаб за замовчуванням. Взагалі кажучи, це значення найбільш часто встановлюється в 1.
Взагалі кажучи, ці значення не повинні бути встановлені на те ж значення, що і initial-scale. Це дозволить відключити будь-масштабування, яке може бути виконане натомість застосування значення user-scalable. Установка значення user-scalable в no відключить будь масштабування. В якості альтернативи, встановивши значення user-scalable в yes ми включимо масштабування.
Вимкнення можливості масштабування сайту є поганою ідеєю. Це шкодить доступності і зручності, заважаючи людям з обмеженими можливостями переглядати сайт за бажанням.
Значення target-densitydpi застосовується рідко, але воно надзвичайно корисно, коли необхідний попіксельно контроль.
комбінація значень
Метатег viewport приймає окремі значення поряд з безліччю значень, дозволяючи встановити кілька властивостей за раз. Установка декількох значень вимагає поділу запитом в значенні атрибута content. Одне з рекомендованих значень наведено нижче, в якому використовуються властивості width і initial-scale.
Мал. 4.07. Комбінація width = device-width і initial-scale = 1 забезпечує початковий розмір і необхідну масштабування.
правило @viewport
В даний час в деяких браузерах вже реалізовано правило @viewport. проте підтримка не так повсюдна. Раніше рекомендований метатег viewport буде виглядати наступним правилом в CSS.
Гнучкий медіа-контент
Демонстрація гнучких зображень
Вбудовування гнучкого медіа-контенту
На жаль, властивість max-width не дуже добре працює для всіх випадків медіа-контенту, зокрема, для