ThinkPHP #7: Адаптация веб-сайта под различные дисплеи

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Плотность пикселов
   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#
   Чем различаются дисплеи?
   

   View Slide

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

   View Slide

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

   View Slide

10. Разрешение
    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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. Responsive web design
    Responsive web design
    

    View Slide

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

    View Slide

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

    View Slide

19. Примеры 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/#
    

    View Slide

20. 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) {
    ...
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Настройка “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”
    

    View Slide

26. 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”
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. Вопросы?
    

    View Slide

35. Спасибо!
    

    View Slide