Оптимизация проектов под Retina-дисплеи

Дата публикации:Декабрь 7, 2012

Настройка веб-страниц под ретина-дисплеи требует дополнительных затрат: по возможности, следует остановиться на CSS и сделать изображения доступными в двух разрешениях.

Дисплеи с высоким разрешением, которые имеются у планшетных устройств и современных мобильных компьютеров, таких как MacBook Pro, предлагают высокую четкость. Операционная система и большая часть приложений заточены под «дисплеи нового поколения» и неплохо дополняют друг друга. Пользователь, переходящий по сети, может столкнуться с неприятной неожиданностью: нечеткостью содержимого. В этой статье мы посмотрим, что могут сделать разработчики, чтобы веб-страницы не только оставались четкими, но и привлекательно смотрелись на HiDPI-экранах.

Для начала мы проанализируем, какие элементы веб-страниц могут стать причиной появления нечеткости: страница в сети состоит из изображений, текста, видео и т.д. Какие объекты ухудшают качество восприятия?

Тексты для ретина-дисплеев

Буквы изначально генерируются браузером – с одним лишь исключением: текстовые блоки представляются как графический объект (что, в действительности, не слишком хорошо, прежде всего из-за отсутствующей SEO-оптимизации). Именно поэтому текст выглядит четко в современных браузерах (на данный момент только в Safari и Chrome) и его можно читать точно так же, как с бумаги. Вывод: никаких изменений не требуется, система решает это самостоятельно.

Видео для ретина-дисплеев

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

YouTube позволяет вручную устанавливать качество видео, например, через JavaScript API. То же самое относится и к Vimeo.

Графика для ретина-дисплеев

Враг номер один – это графика. Эффект размытости заметно портит общую картину веб-сайта. В зависимости от размеров веб-сайта, необходимо тщательно изучить каждый графический элемент. В вашем распоряжении находятся следующие инструменты для «ремонтных работ»:

  • Символы, кнопки, заголовки и другие элементы графического интерфейса, по возможности созданные через CSS и веб-шрифты (исключительно для текстов и иконок). Преимущество: контент будет изначально создаваться в браузере.
  • Для фотографий, логотипов и других графических объектов в пределах страницы существуют многочисленные решения JavaScript и CSS, которые могут загружать ресурсы в зависимости от плотности пикселей, выполняя идеальную подгонку к каждому разрешению. Нельзя оставлять без внимания Favicon и иконки Apple Touch, которые часто используются фид-ридерами.

Заключение

Реализация совместимости с ретина-дисплеями в первую очередь зависит от масштабов проекта. Самые значительные сложности связаны с созданием двух вариантов для одного изображения: первый вариант для нормальных дисплеев и второй вариант в удвоенном разрешении для HiDPI-мониторов. По желанию всегда можно автоматизировать масштабирование изображений – сделать переход от крупных размеров к малым.

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.