Готові ви чи ні, а HD веб-дизайн вже на підході…

«Фруктова» компанія штовхає вперед ІТ-індустрію за рахунок збільшення щільності пікселів на екранах iPhone та iPad (а тепер ще й MacBook Pro). Це дуже зручно з точки зору користувача. Ну, а веб-дизайнерам чи розробникам, схоже, прийдеться робити сайти по новому.

А ви готові до HD веб-дизайну? Ви знаєте, як ваш сайт буде виглядати на новому поколінні дисплеїв з високою роздільною здатністю?

Які дії ви можете зробити, щоб підготуватися, якими навичками повинні володіти, щоб ваша робота залишалася актуальною в найближчі роки?

Коли Apple говорить, ми слухаємо

Я не так давно користуюся Мас, як деякі «яблочники-старожили», але достатньо довго, що стати повністю залежним від усіх продуктів Apple.

Я пам’ятаю: коли бачиш логотип Apple, це означає, що продукт є чимось нішевим; це виклик консервативному суспільству, відкрита спроба плисти проти течії користувачів, вихованих в культурі Windows. Завдяки тому, що ці люди не бояться робити щось нове, маленька компанія стала найдорожчою корпорацією на планеті.

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

Apple ставить на High-Res

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

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

Коли iPhone4 вийшов (в середині 2010 року), це був сюрприз — дисплей «Retina» збільшив роздільну здатність до вражаючих 326 пікселів на дюйм (для порівняння: в 27″ iMac вона складає 109ppi). Це не мого не змінити правила гри.

Існували різні думки на той рахунок, що така технологія масштабування вимагатиме великих фінансових вливань і через це не буде розповсюджуватися за доступною ціною. Але Apple це спростувала, збільшивши вдвічі роздільну здатність на третьому iPad (246ppi).

Чому це повністю змінює підхід до роботи

І що з того? Дякуємо за урок історії, але хто взагалі турбується про щільність пікселів в iPad? Насправді (якщо ви веб-дизайнер) — ви, знаєте ви про це або ж ще ні. Проблема очевидна. Прямо тут, на цьому сайті, а також на будь-якому іншому, який ви сьогодні відвідаєте (відвідали).

Захопіть зображення з інтернету та відкрийте його в Photoshop. Тепер відкрийте діалогове вікно «Image size». Бачите щось цікаве?

Веб-дизайнери завжди мали невелику перевагу над дизайнерами в поліграфії. Вони могли працювати з більш низькою роздільною здатністю.

Чому це перевага, а не недолік? Через велику роздільну здатність PSD може сповільнити ваш комп’ютер; стокові зображення у високій роздільній здатності коштують значно дорожче; такі зображення завантажуються майже вічність (через інтернет); список можна продовжувати.

Проблема зрозуміла. Однак якісні зображення мають щільність 72ppi, а у нового iPad вона складає 264ppi!

Подумайте про те, що це означає. Apple інтегрує Retina у всю лінійку продукції iOS: iPod Touch, iPhone та iPad. Це значить, що мільйони людей з екранами високої чіткості кожен день проглядають в інтернеті зображення, котрі не будуть правильно відображатися.

Можете не сумніватись, що ці тенденція буде тільки розвиватись й інші виробники будуть гратися в «наздоганялки», поки Apple буде досліджувати нові шляхи, котрі можуть принести ще більшу щільність пікселів в ринок ноутбуків (від перекладача: як ми вже знаємо, це вже відбулося).

Що ви можете зробити?

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

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

Веб-елементи на чистому HTML і CSS

Гарна новина: ми готувалися до цього (в певній мірі) протягом багатьох років, можливо, навіть не підозрюючи про це. Цьому посприяв розвиток CSS3 та HTML5. Сьогодні більшість елементів інтерфейсу користувача відображається в браузері так, що при масштабуванні вони виглядають добре на будь-якому екрані.

Наприклад, ось так виглядає кнопка завантаження при збільшенні на iPhone 4.

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

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

Важливо те, що об’єкти створенні за допомогою HTML5 та JavaScript можна масштабувати аналогічно.

SVG (Scalable Vector Graphics) є ще одним важливим кроком на шляху до незалежності від розрішень. Ця технологія була поряд дуже довго, але тільки недавно отримала крос-браузерну підтримку від ІЕ9.

Коли я думаю про SVG, я думаю про Adobe Illustrator. Ця програма використовується в основному для створення векторної графіки з нескінченним масштабуванням. В свою чергу, SVG приносить цю ж функціональність у веб-графіку.

Майже все, що ви можете створити в Illustrator та інших програмах редагування векторних зображень можна легко експортувати в файл SVG та існувати на сайті в якості об’єкту, що легко масштабується.

Перевага над CSS на перший погляд нечітка, але стає зрозумілою, коли ви працюєте зі складними зображеннями. Легко створювати прості кнопки в CSS, але коли мова йде про малювання, наприклад, логотипу Starbucks, все стає дуже складним. Тобто, значно простіше експортувати таку графіку в SVG, ніж городити сотню рядків коду в CSS.

Живий приклад. Щоб збільшити використовуйте Ctrl + і дивіться, як ідеально масштабується зображення.

А що на рахунок фотографій?

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

На даний момент це означає, що потрібно надавати різні зображення для різних типів пристроїв. Це неприємно. Але, якщо ви не хочете, щоб пристрої без Retina завантажували величезні зображення, а з Retina завантажували неякісні зображення — тоді це ваш єдиний вихід.

Це може реалізувати через спеціальні запити. Ось приклад коду (відображення для третього покоління iPad):

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px)
        and (-webkit-min-device-pixel-ratio: 2){
	div {background: url('biggerphoto.jpg');}
}

А як на рахунок вбудованих в HTML зображень?

Метод, що писаний вище, звичайно хороший і він чудово працює. Але тільки з фоновими зображеннями CSS. А що робити, якщо ви хочете вставляти зображення за допомогою HTML? Крім того, це важливо для відео. Як можна обслуговувати відео користувачів з екранами високої чіткості?

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

Єдине рішення — звернутися до чогось більш потужного, наприклад, JavaScript. Bdoran.co.uk надають невеликий приклад того, як відстежити iPhone 4 за допомогою JavaScript та PHP.

Це все — великі проблеми для веб-дизайнерів, які намагаються дотримуватись HTML і CSS, але не знайомі з JavaScript та іншими передовими технологіями.

На завершення

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

Наразі, у нас є декілька направлень для дослідження: HTML5, JavaScript, CSS3, SVG, а також запити СМІ, котрі разом збираються вирішувати проблеми відображення контенту на дисплеях Retina. Маю надію, в найближчому майбутньому ми побачимо більш надійні варіанти для обслуговування різних вбудованих в HTML зображень та відео в належному форматі.

Першоджерело — «Ready or Not, Here Comes HD Web Design».