Предыстория

Статистика мобильных устройств в России

Разрешения экранов

Размеры экранов

Pixels

device pixel

— привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

CSS pixels

— абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана

Плотность пикселей

PPI (Pixels Per Inch) - пиксели на дюйм.

Дисплеи с повышенной плотностью

Retina display

— общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся настолько высокой плотностью пикселей.

Retina display

Отличия

Какие браузеры популярны?

Макеты (layout)

Фиксированный макет

Ширина контента не меняется в зависимости от размеров окна браузера.

Резиновый макет

Подстраивание контента под ширину экрана путем сжатия элементов.

Особенности

• На одной странице максимальное количество информации
• Не заботится о том, как контент будет выглядеть на экранах с критически большой или маленькой шириной

Адаптивный макет

Особенности

• Адаптация под различные разрешения экранов
• Не можем предугадать как будет выглядеть контент на всех устройствах

Отзывчивый макет

Особенности

• Не «прыгает» по контрольным точкам
• Тщательная проработка

Стратегии разработки

Progressive enhancement

Cоздание веб-интерфейса происходит поэтапно, от самого простого к сложному

Особенности

• Гарантированная работа проекта в любом браузере
• Выкатывать новые возможности и изменения раньше
• Увеличение сложности реализации back-end’а

Начинаете проектирование сервиса с мобильной версии

Особенности

• Фокус на самом главном
• Полнофункциональная мобильная версия
• Мобильная версия может хорошо работать в “большом” вебе
• У вас не сразу будет версия для “большого“ веба
• Подход сложно применим для больших порталов

Responsive web design

Вы делаете одну версию вашего веб-проекта для всех устройств с любым размером экрана

Особенности

• Одна версия сайта
• Преемственность интерфейса
• Неоптимальное использование возможностей всех устройств
• Возрастают требования к проработке интерфейса и дизайна

• Mostly Fluid (Наиболее резиновый)
• Column Drop (Столбцы друг под другом)
• Layout shifter (Двигающийся макет)
• Tiny Tweaks (Крошечные изменения)
• Off Canvas (Вне экрана)

Инструменты

Какая ширина layout viewport?

• Safari iPhone = 980px,
• Opera = 850px,
• Android WebKit = 800px,
• IE = 974px,

Meta–тэг viewport

<meta name="viewport" content="width=device-width">

Другие значения

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width, initial-scale=1.0
                                maximum-scale=1.0, user-scalable=no">

@viewport {//@-o-viewport | @-ms-viewport
  width: auto; // auto | device-width | length | %

  max-width: auto;
  min-width: auto;

  zoom: auto; // auto | number | %

  max-zoom: 5; // Largest allowed zoom factor.
  min-zoom: 0.25; // Smallest allowed zoom factor.

  user-zoom: zoom; // fixed | zoom

  orientation: auto; // auto | portrait | landscape
}

Media queries

Правило @media - позволяет указать тип устройства, для которого будет применяться указанный стиль.

@media [not|only] mediatype [and (media feature)] {
    CSS-Code;
}

Минимум

@media {
    a {
        color: red;
    }
}

• all – все устройства(по-умолчанию)
• print – принтеры и режим "Print preview"
• screen – все утройства не print и не speech
• speech – скринридеры

Версия для печати

body {
  color: red
}
@media print {
  body {
    color: blue
  }
}

Для печати и экранов

@media print, screen {
  body {
    color: blue
  }
}

media features

– задают технические характеристики устройства, на котором отображается документ.

Ширина

@media (min-width:600px) {
    aside {
        float: left;
        width: 300px;
        margin: 10px;
    }
}

@media (max-width:600px) {
    aside {
        float: none;
        color: blue;
    }
}

Диапазон

h1 {
    font-size: 50px;
}

@media (min-width:400px) and (max-width:600px) {
    h1 {
        font-size: 20px;
        color: red;
    }
}

Диапазон

h1 {
    font-size: 50px;
}

@media (min-width:600px), (max-width:400px) {
    h1 {
        font-size: 20px;
        color: red;
    }
}

device width

@media (min-device-width: 200px) and
       (max-device-width: 400px) {
    body {
        color: red;
    }
}

В чем разница?

@media (min-width: 300px) {
    body {
        color: red;
    }
}
@media (min-device-width: 300px) and
       (max-device-width: 400px) {
    body {
        color: blue;
    }
}

Ориентация

//landscape | portrait
@media (orientation: landscape) {
    body {
        color: red;
    }
}

.selector {
    background: url(../apple.png) no-repeat;
}

// -o-min-device-pixel-ratio
// min--moz-device-pixel-ratio
// -webkit-min-device-pixel-ratio
@media (min-device-pixel-ratio: 2) {
  .selector {
    background-image: url(../apple@2x.png);
    background-size: cover;
  }
}

resolution

@media (min-device-pixel-ratio:2),
       //dpi (dots per inch) - точек на дюйм
       //для экранов 1DPI = 1PPI
       (min-resolution: 192dpi),
       //dppx (dots per pixel) - точек на пиксель
       (min-resolution: 2dppx) { ... }

• min-height, max-height
• device-min-height, device-max-height
• grid – устройство с фиксированным размером символов
• min-resolution, max-resolution
• color (min-color, max-color)

Отрицание

@media not all and (monochrome) { ... }

@media not (all and (monochrome)) { ... }

@media (not all) and (monochrome) { ... }

Но

@media not screen and (color), print and (color) { ... }

@media (not (screen and (color))), print and (color) { ... }

Аттрибут media

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Перерыв

Домашнее задание