Новый iPad: Правила создания ретина-контента

Новому iPad — новые правила создания мультимедийного контента

Рецептами создания контента для нового iPad c высоким разрешением экрана поделился Ксавьер Фэкон (Xavier Facon) главный инженер нью-йоркской технологической компании Crisp Media, специализирующейся на создании мультимедийной рекламы.

Для дизайнеров и создателей контента под устройства с высоким разрешением экрана, ретина-дисплей источник и радости и горечи одновременно. Например, разрешение экрана нового iPad составляет 2048х1536 пикселей. В итоге на миниатюрном дисплее располагается на миллион пикселей больше, чем на экране HD-телевизора.

Возможности нового устройства ошеломляющи, но для получения соответствующего контента потребуется доступ к 4G-сети, которым располагает далеко не каждый пользователь. Дизайнерам частенько задают вопросы о том, с чего начать разработку контента для нового устройства и о чем ни в коем случае не следует забывать. Оказывается, при публикации контента или разработке рекламы для дисплеев с высоким разрешением достаточно следовать пяти достаточно простым правилам.

Правило первое. Если хотите донести контент до множества устройств, начинайте с iPad

Исторически сложилось так, что сначала контент делают для компьютеров, потом для смартфонов и только в третью очередь вспоминают о планшетах. В конечном итоге, вашей задачей является донесение своей разработки для всех типоразмеров экрана. Начните сразу с того экрана, разрешение которого максимально и с наиболее интерактивной платформы.

Начните с iPad, устройства, интерактивные преимущества которого очевидны и выражаются не только в его гигантском экранном разрешении, но и в наборе функций. И лишь затем портируйте свой контент на устройства, с экранами попроще, компьютеры, телевизоры, смартфоны и другие планшеты. Таким образом, вы сможете быть уверены в том, что ваш контент использует возможности экранов каждого из устройств «на полную катушку».

Правило второе. Используйте веб-шрифты

Использование веб-шрифтов избавляет вас от необходимости предварительной обработки их в формате изображения. Загрузите шрифт и осуществляйте рендеринг текста в браузере при помощи функции @font-face. Таким образом, вы используете максимум преимуществ экрана с высоким разрешением.

Чтобы придать шрифту неповторимые черты, поработайте с масками и ретушированием. К картинке, вызывающей в вашем тексте нежелательные артефакты, примените технологии сжатия. Если текст будет отделен от изображений и вы станете применять веб-шрифты, ваш контент всегда будет четким и легко читаемым.

Правило третье. Используйте CSS вместо PNG

Технологии HTML5 и CSS3 позволяют оптимизировать контент для экрана с высоким разрешением таким образом, чтобы не создавать излишней нагрузки на канал передачи данных. Используйте методы прогрессивного улучшения. Это позволит вашему контенту достойно выглядеть даже в тех браузерах, которые не поддерживают функцию полностью.

Используйте преимущества цветовой гаммы, скругленных углов, градиентов и размытия. Таким образом вы сможете создавать базовые графические элементы. Не применяйте PNG для создания геометрических элементов вашего контента, то есть кнопок, линий, углов и таблиц. Они не будут четкими или же станут занимать слишком большой объем памяти, а следовательно и драгоценного трафика.

Правило четвертое. Используйте CSS Media Selector для того, чтобы размер изображений был корректен

Когда вы работаете над фотографиями и графическими элементами, которые предстоит портировать на различные устройства, старайтесь позиционировать картинки по размеру холста или окна браузера. Некоторые технологии JavaScript позволяют загружать изображения в высоком разрешении, но это увеличивает размер страницы. Вместо этого, попробуйте CSS @media, обеспечивающий загрузку картинки, размер которой адаптирован к экрану конкретного устройства.

Правило пятое. Познакомьтесь с некоторыми приемами разработчиков игр

Для разработчиков игр нет ничего нового в создании графики для экранов с высоким разрешением. Более того, эти мастера умеют делать ее максимально эффективной. Широко распространены среди создателей игр такие технологии, как текстурные («texture maps») и перемещаемые по экрану карты («sprite maps»). Это самый верный путь вашего контента на мобильные устройства, экраны которых характеризуются высоким разрешением.

С использованием этих методик, дизайнеры совмещают множество изображений и фонов, благодаря чему не приходится загружать и обрабатывать каждую картинку в отдельности. В особенности это касается анимации и фоновых рисунков. Эти виды изображений часто используются при создании рекламного и развлекательного контента. Данный подход бережно относится к трафику и позволяет максимально использовать производительность устройства.

Настала пора распространить эти методы на все виды контента. Более того, для мобильных устройств, экраны которых обладают высоким разрешением, это еще более важно, чем при создании игр для настольных компьютеров. Высокая плотность пикселей на экране ставит перед дизайнерами и разработчиками задачу экономии трафика. Для этого им придется пересмотреть консервативные подходы к своей работе и задуматься над освоением новых перспективных методик.

Источник: Mashable.com (Ксавьер Фэкон)