Трогательная вёрстка

2014

Что такое «тач»?

• маленькое устройство
• управляется пальцем
• Android или iOS
• вертикальный экран

Мобильные операционные системы

• Android
• iOS
• Sailfish OS
• Tizen
• KaiOS
• Fuchsia
• PureOS
• LiteOS
• Ubuntu Touch
• LuneOS
• ...

Что такое «тач»?

• маленькое устройство — не только
• управляется пальцем — не только
• Android или iOS — не только
• вертикальный экран — не только

UserAgent

Отдаём только нужное! 😃

😤

JS + Cookie 💡

GDPR 😤

Поворот экрана 😭

38% пользователей прекратят пользоваться сайтом, если контент или разметка не привлекательны.

88% онлайн-потребителей скорее всего не вернутся на сайт после плохого впечатления.

Адаптивная вёрстка

Адаптивная
Отзывчивая вёрстка

Брейкпоинты

/* Мониторы, ноутбуки */
@media (min-width: 1200px) {}

/* Планшеты в ландшафтном режиме, средние мониторы */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Планшеты в портретном режиме, маленькие мониторы */
@media (min-width: 768px) and (max-width: 991px) {}

/* Телефоны в ландшафтном режиме, планшеты в портретном режиме */
@media (max-width: 767px) {}

/* Телефоны в портретном режиме */
@media (max-width: 480px) {}

1?

2?

10?

📱🖥

Самостоятельные компоненты! 🤘

Container Queries

.container:media(max-width: 400px) .card {
    /* тесно */
}

.container:media(max-width: 1024px) .card {
    /* просторно */
}

CSS Flexbox

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1em;
}

.card {
    flex: 1 1;
    min-width: 200px;
    margin-left: 1em;
}

CSS Grid

.card-container {
    display: grid;
    padding: 1rem;
    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
}

Лишний трафик

<picture>
    <source media="(min-width: 1150px)"
            srcset="img-desktop@1x.jpg 1x,
                    img-desktop@2x.jpg 2x">
    <img src="img-mobile@1x.jpg"
         srcset="img-mobile@2x.jpg 2x"
         width="20"
         height="18">
</picture>

Не загружать CSS?

<link rel="stylesheet"
      href="mobile.css"
      type="text/css"
      media="handheld" />

❌ DEPRECATED ❌

Не загружать CSS!

<link rel="stylesheet"
      href="mobile.css"
      type="text/css"
      media="(max-width: 720px)" />

✅

Вы не можете определить touchscreen 🤷‍♂️

Но это и не надо 😎

<meta>

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

<meta>

• initial-scale — уровень зума при загрузке;
• maximum-scale — максимальный уровень зума;
• minimum-scale — минимальный уровень зума;
• user-scalable — разрешён ли зум (правильный вариант yes).

@viewport {
    min-width: 640px;
    max-width: 800px;
}

@viewport {
    zoom: 0.75;
    min-zoom: 0.5;
    max-zoom: 0.9;
}

@viewport {
    orientation: landscape;
}

touch-action

.e {
    touch-action: auto;
    touch-action: none;
    touch-action: pan-x;
    touch-action: pan-left;
    touch-action: pan-right;
    touch-action: pan-y;
    touch-action: pan-up;
    touch-action: pan-down;
    touch-action: pinch-zoom;
    touch-action: manipulation;
}

-webkit-tap-highlight-color

.red-hl {
    -webkit-tap-highlight-color: red;
}

.no-hl {
    -webkit-tap-highlight-color: transparent;
}

user-select

.e {
    user-select: none;
    user-select: auto;
    user-select: text;
    user-select: contain;
    user-select: all;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

text-size-adjust

.e {
    text-size-adjust: none;
    text-size-adjust: auto;

    text-size-adjust: 80%;
}

-webkit-touch-callout

.e {
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
}

<a href="javascript:alert();">
    I am Batman!
</a>

-webkit-overflow-scrolling

.ios {
    -webkit-overflow-scrolling: touch;
    -webkit-overflow-scrolling: auto;
}

«Липкий» скролл

body {
    scroll-snap-type: x mandatory;
}

section {
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
}

inputmode

<input type="text" inputmode="numeric" />

<input type="text" inputmode="tel" />

<input type="text" inputmode="email" />

Окружение

env()

env(safe-area-inset-top)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
env(safe-area-inset-right)

header {
    /* Высота статус-бара в iOS 10 */
    padding-top: 20px;

    /* Высота статус-бара в iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Высота статус-бара в iOS 11+ */
    padding-top: env(safe-area-inset-top);
}

format-detection

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">

.disable-animation *,
.disable-animation *:before,
.disable-animation *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

Шрифты

Android

• Droid Sans
• Droid Serif
• Droid Sans Mono
• Roboto

CSS-шлюзы

h1 { font-size: 1.25rem; }

@media (min-width: 20em) {
    h1 {
        font-size: calc(1.25rem + 1.25 * (100vw - 20rem) / 40);
    }
}
@media (min-width: 60em) {
    h1 {
        font-size: calc(1.25rem + 1.25 * 1rem);
    }
}

Визуальная часть

<style>
img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}
</style>

<img src="hero_image.jpg"
     width="500"
     height="500">

44px — минимальный размер интерактивного элемента

<head>
    <style>
        :root {
            --color-fg: #000;
            --color-bg: #fff;
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --color-fg: #fff;
                --color-bg: #000;
            }
        }
    </style>
</head>

Touch First 📱

Отдавайте только нужное ⚖️

Используйте возможности ⚡️

Помните об ограничениях ☎️