Slide 1

Slide 1 text

Оптимизация верстки для High-Density дисплеев Евгений Котельницкий Отдел CMS, NIX Solutions Ltd.

Slide 2

Slide 2 text

План 1. Что такое Retina и HD дисплеи? 2. Проблемы вёрстки под HD 4. Рекомендации и приёмы вёрстки под HD 5. Как тестировать? 3. Методы и инструменты для вёрстки под HD

Slide 3

Slide 3 text

Что такое Retina display? Retina – это маркетинговое название дисплеев, используемых в устройствах Apple. Такие дисплеи отличаются высокой плотностью пикселов. Мы будем использовать более общее название – «HD-дисплей»! Модель PPI Разрешение Типичное расстояние просмотра iPod touch (45-е поколение), iPhone 4 / 4S 330 960×640 10 дюймов (25 см) iPod touch (5-е поколение), iPhone 5 326 1136×640 iPad 3 / 4 324 2048×1536 15 дюймов (38 см) MacBook Pro 15 (3-е поколение) 220 2880×1800 20 дюймов (51 см) MacBook Pro 13 (3-е поколение) 227 2560×1600 20 дюймов (51 см)

Slide 4

Slide 4 text

Что такое Retina display? Т.е. порог – это значение в 300 ppi? Нет, все не так просто. Роль играет расстояние от экрана до глаз пользователя для каждого конкретного устройства. http://appleinsider.ru/analysis/retina-displej-v-mac-ipad-i-hidpi-nemnogo-matematiki.html#

Slide 5

Slide 5 text

Введем несколько терминов Физические пиксели (device pixel или physical pixel) — привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость. Плотность пикселей экрана (screen density) — это количество физических пикселей дисплея. Измеряется в пикселях-на-дюйм (PPI – pixels per inch). Nokia Lumia 710 – 252 ppi iPhone 5 – 326 ppi HTC Butterfly – 440 ppi LG Nexus 4 – 320 ppi …

Slide 6

Slide 6 text

Введем несколько терминов CSS пиксели - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана. Он же «Device-independent pixel» (DIP).

Slide 7

Slide 7 text

Введем несколько терминов Соотношение сторон дисплея (device-aspect-ratio) – отношение ширины экрана к его высоте. Старые обычные мониторы – 4/3 Широкоформатные мониторы – 16/9 iPhone 5 – 40/71

Slide 8

Slide 8 text

Введем несколько терминов HTC Desire – 3/2 Galaxy Nexus – 2/1 HTC Butterfly – 3/1 Соотношение пикселей (device-pixel-ratio) – отношение количества физических пикселей экрана к количеству абстрактных CSS-пикселей. Дисплей, у которого соотношение пикселей больше 1 теоритически можно считать HD-дисплеем.

Slide 9

Slide 9 text

Какие проблемы возникают на HD-дисплеях? Ломается ли структура сайта на таких устройствах? Нет, структура сайта на таком дисплее не ломается и остаётся той же, что и на обычных дисплеях. А в чём же проблема? Проблема в том, что растровые изображения, неподготовленные специальным образом, на HD-дисплеях выглядят размытыми и пикселизированными.

Slide 10

Slide 10 text

HTML масштабирование (изначально грузим большую картинку и атрибутами HTML задаем размер) Чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить картинку размером 400x600 пикселей и уменьшить её, используя HTML атрибуты. Где использовать: на маленьких сайтах с несколькими изображениями. Плюсы метода:  простота реализации  кроссбраузерность Минусы метода:  устройства с обычными экранами будут скачивать лишние мегабайты  на обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия Методы оптимизации изображений под HD-дисплеи

Slide 11

Slide 11 text

Методы оптимизации изображений под HD-дисплеи Определение плотности пикселей экрана с помощью JavaScript и подмена изображений Плюсы метода:  простота внедрения,  устройства с обычным дисплеем не скачивают лишние изображения,  контроль плотности пикселей на сайте Минусы метода:  Подмена изображений может быть заметна на устройствах с высокой плотностью пикселей $(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } }); Где использовать: для изображений в контенте.

Slide 12

Slide 12 text

Серверный метод: «отдаём» картинки для HD-устройств (в большем разрешении), например, на PHP. if (window.devicePixelRatio > 1) { setCookie('devicePixelRatio', window.devicePixelRatio); document.location.reload(true); } Плюсы метода:  Возможность полностью автоматизировать подготовку изображений Минусы метода:  При первой загрузке будет задержка на редирект  Необходимость в разработке на стороне сервера Методы оптимизации изображений под HD-дисплеи

Slide 13

Slide 13 text

Определение плотности пикселей экрана с помощью CSS media queries и подмена бэкграундов. Где использовать: на любых сайтах для подмены оформительных изображений – «бэкграундов». С помощью свойства min-device-pixel-ratio устанавливаем нужное соотношение между физическими и CSS-пикселями: @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .some-block { background-image: url([email protected]); background-size: 200px 300px; } } Методы оптимизации изображений под HD-дисплеи

Slide 14

Slide 14 text

Также можно комбинировать свойство min-device-pixel-ratio с другими свойствами медиа-очередей, например с min-width: @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px){ /* Mobile HD-display */ } Плюсы метода:  устройства не скачивают лишние изображения,  контроль плотности пикселей фоновых изображений Минусы метода:  утомительно внедрять, особенно на крупных сайтах Методы оптимизации изображений под HD-дисплеи

Slide 15

Slide 15 text

Использование векторной графики .SVG Подходит для иконок, логотипов и простых иллюстраций. SVG-изображение в HTML: SVG-изображение на фоне: .image { background-image: url(example.svg); background-size: 200px 300px; } Плюсы метода:  единый набор изображений для всех устройств  простота реализации  бесконечное масштабирование Минусы метода:  не любую графику можно сделать векторной  Не поддерживается старыми браузерами  проблематично объединять в спрайты Методы оптимизации изображений под HD-дисплеи

Slide 16

Slide 16 text

Избавляемся от запросов, рисуем .SVG прямо в браузере. Сервис для создания векторной графики с возможностью скопировать исходный код и вставить его на свой сайт: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html# Методы оптимизации изображений под HD-дисплеи

Slide 17

Slide 17 text

Использование иконочных шрифтов Вариант 1 (символы внутри разметки HTML) Применяем нужный класс к определенному элементу страницы: a .some-icon { font-family: 'My-Icon-Font'; } Плюсы метода:  бесконечное масштабирование  более универсальное решение, чем набор графических элементов Минусы метода:  сложность реализации: отдельный символ шрифта к каждой иконке http://css-tricks.com Пример использования Вариант 2(символы внутри CSS) Используя псевдоэлемент :before с уникальным классом к каждой иконке: [class^="icon-"]:before { font-family: 'My-Icon-Font'; } .icon-heart:before { content: 'h'; } Методы оптимизации изображений под HD-дисплеи

Slide 18

Slide 18 text

Инструменты и приёмы для оптимизации сайтов под HD-дисплеи Retinajs (http://retinajs.com/) К примеру, на странице есть какая-то картинка: При открытии сайта на устройстве с HD-дисплеем, данный скрипт автоматически проверит, есть ли альтернативная картинка в формате: "/images/[email protected]" Если такая картинка есть, скрипт заменит обычную картинку и добавит атрибуты размеров:

Slide 19

Slide 19 text

Инструменты и приёмы для оптимизации сайтов под HD-дисплеи Picturefill – JS библиотека, позволяющая отображать разные картинки в зависимости от ширины экрана и соотношения пикселей
Плюсы метода:  Экономим трафик  Уменьшаем кол-во HTTP запросов  Кроссбраузерное решение Минусы метода:  Очень многословная разметка

Slide 20

Slide 20 text

Инструменты и приёмы для оптимизации сайтов под HD-дисплеи Онлайн калькулятор подсчёта плотности пикселей дисплея Для подсчёта Вам нужно знать:  разрешение дисплея  длина диагонали в дюймах http://pixeldensitycalculator.com/#

Slide 21

Slide 21 text

Инструменты и приёмы для оптимизации сайтов под HD-дисплеи «Экономный» способ сохранения .jpg изображений для HD-дисплеев 1. Подготавливаем изображение в 2 раза больше требуемого 2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%) 3. Уменьшаем размеры изображения до нужных с помощью CSS или атрибутов HTML 4. Внешнее качество такой картинки повысится, а размер останется примерно тем же Оригинальный размер Качество 80% Размер 10Kb Картинка в 2 раза больше Качество 40% Размер 11Kb Картинка в 2 раза больше Качество 80% Размер 60Kb

Slide 22

Slide 22 text

Как тестировать? • Иметь свои устройства с HD-дисплеями и на них тестировать  • Попросить устройство у друга   • Opera Mobile Emulator + Dragon Fly Как подключить Dragon Fly к OperaMobileEmulator: http://www.opera.com/dragonfly/documentation/remote/#

Slide 23

Slide 23 text

Вопросы?

Slide 24

Slide 24 text

Спасибо!