⬆️ Победители в номинации Search Innovation
Google Partner

HD веб-дизайн. Эволюционируй или…

Автор:
Оптимизатор
Рецензент: Олег Гаврилюк
Руководитель оптимизаторов
5,00 1 оценка
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):

А как насчет встроенных в 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 и переведен с нашими небольшими правками.

Do something to stop this war! Russians are killing our children and civilians!