1. Коли Apple говорить, ми слухаємо
2. Apple ставить на High-Res
3. Чому це повністю міняє підхід до роботи
4. Що ви можете зробити?
5. Чистий HTML і CSS веб-елементів
6. SVG
7. А як щодо фотографій?
8. А як щодо вбудованих в HTML зображень?
9. висновок

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

Нагадаємо, дисплей третього iPad (Retina) має дозвіл 2048х1536. Колірна гамма RGB, без PenTile.

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

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

Читайте далі, щоб дізнатися ..

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

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

Hey! Teachers! Leave them kids alone! :)

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

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

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

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

До недавнього часу компанія Apple не мала нічого спільного з підвищенням дозволу екрану.

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

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

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

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

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

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

Візьміть зображення з Інтернету і відкрийте його в Photoshop. Тепер викличте діалогове вікно «Розмір зображення». Бачите що-небудь цікаве?

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

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

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

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

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

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

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

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

Чистий HTML і CSS веб-елементів

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

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

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

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

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

SVG

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

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

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

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

В якості альтернативи годинах CSS-махінацій і, можливо, сотням рядків коду для одного об'єкта (якщо це взагалі можливо з CSS), можна просто експортувати векторний варіант логотипу Starbucks як SVG і вставити його в ваш веб-сайт за пару хвилин!

Живий приклад. Щоб збільшити іспользуйт 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, а також запити засобів масової інформації, які разом збираються вирішувати проблеми відображення контенту в дозволі понад 264ppi. Сподіваюся, в найближчому майбутньому ми побачимо більш надійні варіанти для обслуговування різних вбудованих в HTML зображень і відео в належному форматі.

Матеріал взято з designshack.net і переведений з нашими невеликими правками.