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

План • Чем различаются дисплеи? • Что можно оптимизировать? • Какова польза от оптимизации? • Responsive web design • Настройка “meta Viewport” • Некоторые хитрости • Как тестировать?

Чем различаются дисплеи? • Физические размеры • Соотношение сторон • Плотность пикселов • «Привычное удаление от глаз» • Цветовые характеристики • Разрешение • Контрастность • Яркость • Время отклика • Угол обзора • …

Физические размеры 27” Чем различаются дисплеи?

Соотношение сторон Aspect ratio 9 : 16 40:71 4:3 Чем различаются дисплеи?

Плотность пикселов Pixel density 468 ppi 326 ppi 154 ppi Чем различаются дисплеи?

Плотность пикселов Android. Generalized pixel density. Название Описание в спецификации Density LDPI Low density. Small screens are at least 426dp x 320dp. ~120 ppi MDPI Medium density. Normal screens are at least 470dp x 320dp. ~160 ppi HDPI High density. Large screens are at least 640dp x 480dp. ~240 ppi XHDPI Extra high density. Xlarge screens are at least 960dp x 720dp. ~320 ppi http://developer.android.com/guide/practices/screens_support.html# Чем различаются дисплеи?

Привычное удаление от глаз Чем различаются дисплеи?

Цветовые характеристики Чем различаются дисплеи?

Разрешение 5.55“, 267 ppi 720 x 1280 px 360 x 640 dip 4“, 326 ppi 640 × 1136 px 320 x 568 dip Чем различаются дисплеи? 2.4“, 167 ppi 320 × 240 px 320 × 240 dip

Другие характеристики Чем различаются дисплеи? • Контрастность • Яркость • Время отклика • Угол обзора • …

Что нужно оптимизировать? • Доступность информации • "Ощущения" от внешнего вида • Соответствие среде

Доступность информации Что можно оптимизировать? • На сколько легко читается текст? • Видны ли иллюстрации / иконки? • Видны кому-то кроме вас? ;) • Правильно ли расставлены акценты?

"Ощущения" от внешнего вида Что можно оптимизировать?

Какова польза от оптимизации? или Зачем?

Responsive web design Responsive web design

Благодаря чему это стало возможно? Responsive web design

Как организовать код? Responsive web design

Примеры Media Queries Responsive web design / Как организовать код? Пример 1: Пример 2: @media screen { * { font-family: sans-serif } } Пример 3: Пример 4: @import url(color.css) screen and (color); http://www.w3.org/TR/css3-mediaqueries/#

Media Queries Responsive web design / Как организовать код? #pagewrap { width: 980px; margin: 0 auto; } @media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } } @media screen and (max-width: 480px) { ...

Как всё-таки организовать код? Разбивать ли «размеры» на файлы? Responsive web design • Учитываем быстродействие • Учитываем удобство написания кода

Проектирование и Мобайл ферст !? Responsive web design

Responsive web design • Что делать с изображениями в контенте? • Что делать с колонками? • Что делать с изображениями в колонках? • Относительные или фиксированные величины ширины блоков? FAQ

Настройка “meta Viewport” Responsive web design / “meta Viewport”

Настройка “meta Viewport” http://frontender.com.ua/mobile-web/wtf-viewport/# Атрибут Возможное значение width Целое неотрицательное значение (от 200px — 10,000px) или константа device- width. Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px. height Целое неотрицательное значение (от 223px до 10,000px) или константа deviceheight initial-scale Число с точкой (от 0.1 до 10). Значение 1.0 — не масштабировать user-scalable no или yes minimum-scale Число с точкой (от 0.1 до 10). 1.0 — не масштабировать maximum-scale Число с точкой (от 0.1 до 10). 1.0 — не масштабировать Responsive web design / “meta Viewport”

http://frontender.com.ua/mobile-web/wtf-viewport/# Пример 1. На устройствах с HDPI (240dpi) не будет масштабирования. Пример 2. На устройствах с MDPI (160dpi) не будет масштабирования. Такое значение dpi установлено по-умолчанию. Настройка “meta Viewport” Android и target-densitydpi Responsive web design / “meta Viewport”

«responsiveJS» http://4coder.info/demo/responsiveJS/# Responsive web design / “meta Viewport”

Ресурсоемкость и варианты на ваш бюджет Responsive web design

Некоторые хитрости Некоторые хитрости

Media Queries в Internet Explorer 8 Некоторые хитрости Internet Explorer 8- не поддерживает CSS3 media queries. Можете подключить «Media Queries Javascript».

Настройка “meta Viewport” без “responsive” Некоторые хитрости

– “Хочу, чтобы везде отображалось хорошо, а на iPhone 5 - идеально!” Некоторые хитрости Зная, что у iPhone 5 очень специфическое соотношение сторон (а именно 40/71 ) мы можем писать стили исключительно для данного устройства, используя свойство device-aspect-ratio: @media screen and (device-aspect-ratio: 40/71) { /* styles for iPhone 5 */ }

Как тестировать? Opera Mobile Emulator + Dragon Fly Как подключить Dragon Fly к OperaMobileEmulator: http://www.opera.com/dragonfly/documentation/remote/#

Вопросы?

Спасибо!