Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

thinkphp_com_ua

July 25, 2013
Tweet

More Decks by thinkphp_com_ua

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Responsive web design
    Responsive web design

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Вопросы?

    View full-size slide

  35. Спасибо!

    View full-size slide