Трогательный фронтенд

Никита Дубко, Яндекс

Трогательный
фронтенд

Никита Дубко, Яндекс

iPhone of Adam by 2600rat

Кто я?

трогать — to touch

Что такое
тач-устройство?

📱 ⌚️ 🖥

Смартфоны 📱

3 500 000 000 🤳
из
7 763 035 303 🌐

Number of smartphone users worldwide

45%

Что нам даёт знание про тип устройства?

Что я знаю
о смартфонах?

Mobile Matters
Доверяйте данным,
а не внутренним ощущениям.
Стивен Хубер

Много

2014

Html, CSS and JavaScript tricks for mobile websites
Типы устройств в России — Яндекс.Радар

70%

www.ciodive.com

Трафика в месяц (в эксабайтах)

Global mobile data traffic from 2017 to 2022

1 Эксабайт
=
1 000 000 000 Гигабайт

🇷🇺 Модель
1 iPhone 7 6.76%
2 iPhone 6 4.22%
3 iPhone 6S 3.90%
4 iPhone SE 3.70%
5 iPhone X 3.40%
6 iPhone 5S 2.84%
7 iPhone 7 Plus 2.51%
8 iPhone 8 2.47%
9 iPhone 8 Plus 2.23%
10 Xiaomi Redmi Note 4 1.48%
The most popular smartphones in 2019
🇺🇸 Модель
1 iPhone 7 7.85%
2 iPhone 8 Plus 7.67%
3 iPhone 8 6.59%
4 iPhone X 6.04%
5 iPhone 7 Plus 5.91%
6 iPhone XR 5.06%
7 iPhone 6S 4.23%
8 iPhone XS Max 3.00%
9 Samsung Galaxy S8 2.98%
10 Samsung Galaxy S9 2.95%
The most popular smartphones in 2019
iPhone X
Motorola Moto G4

Motorola Moto G4

Размер 5.5 дюймов
Разрешение 1080 x 1920
ОС Android 6.0.1 (Marshmallow)
CPU Octa-core (4x1.5 GHz Cortex-A53)
GPU Adreno 405
Память Внутрення 16GB, 2GB RAM
Батарея Li-Ion 3000 mAh
Цена 130 EUR

Медленные

Loading web pages fast on a $20 feature phone

400 000 000 фичефонов продано в 2019 г.

150 000 000 человек живёт в России

Loading web pages fast on a $20 feature phone
JavaScript Start-up Performance

Время парсинга 1МБ JavaScript (мс)

The Cost of JavaScript

5 секунд ⏱

webpagetest.org
Web Page Performance Test for https://ritfest.ru/2020/

Что делать?

Про производительность

Виталий Харисов, 10k
WPO Stats
Designing for mobile performance

Ожидание
⬋      ⬊
пассивное        активное

Optimistic UI 😀

Пусть всем кажется, что всё грузится быстро / Виктор Русакович

Маленькие

Smartphone unit shipments worldwide by screen size from 2018 to 2022
Motorola Moto G4
The ultimate guide to proper use of animation in UX

35%

В руках

Design for Fingers, Touch, and People, Part 2
Основы адаптивной типографики

12px
=
Минимальный размер текста

Лучше крупнее

Modern Touch-Friendly Design
The Thumb Zone: Designing For Mobile Users

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

UI Design Do’s and Don’ts

48px — требования Lighthouse

Tap targets are not sized appropriately

34.43%

The 2019 Web Almanac by HTTP Archive
Design for Fingers, Touch and People, Part 3

Точность — критична ❌

Возможность отменить действие ✅

Визуальный фидбек ✅

Click/Touch Visual Feedback

Всегда с собой

Номофобия 😱

66%

37 Smartphone Addiction Statistics for 2019

3 часа 15 минут ⏳

How Much Time Does the Average Person Spend on Their Phone?
NASA Successfully Launches Three Smartphone Satellites

Нет интернета 🏕

Offline 📼

Служебные работяги! 👷‍♂️

Service Workers 👷‍♂️

Про сервис-воркеры. Снова! Кирилл Чугаинов

0.64%

The 2019 Web Almanac by HTTP Archive
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';
const PRECACHE_URLS = ['index.html', './', 'styles.css', 'demo.js'];

self.addEventListener('install', event => {
    event.waitUntil(
    caches.open(PRECACHE)
        .then(cache => cache.addAll(PRECACHE_URLS))
        .then(self.skipWaiting())
    );
});

self.addEventListener('activate', event => {
    const currentCaches = [PRECACHE, RUNTIME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
        }).then(cachesToDelete => {
            return Promise.all(cachesToDelete.map(cacheToDelete => {
                return caches.delete(cacheToDelete);
            }));
        }).then(() => self.clients.claim())
    );
});
Basic Service Worker Sample
self.addEventListener('fetch', event => {
    if (event.request.url.startsWith(self.location.origin)) {
        event.respondWith(
            caches.match(event.request).then(cachedResponse => {
                if (cachedResponse) {
                    return cachedResponse;
                }

                return caches.open(RUNTIME).then(cache => {
                    return fetch(event.request).then(response => {
                        return cache.put(event.request, response.clone()).then(() => {
                            return response;
                        });
                    });
                });
            })
        );
    }
});
Basic Service Worker Sample
Workbox

Скорость интернета 🐌

Мобильная экономика. Россия и СНГ 2019

20% 2G/Edge

Скучно 😒

Отложенное на «потом» 💡

Семантика

Семантика для циников, Вадим Макеев
schema.org/Article
Designing Web Content for watchOS
Instant Views Explained

«Потом» — короткое ⌛️

Метро 🚇

Кофе-брейк ☕️

40% в уборной 🧻

37 Smartphone Addiction Statistics for 2019

12% в душе 🚿

37 Smartphone Addiction Statistics for 2019

5.59 секунд
на контент ⏱

10 Useful Findings About How People View Websites

Надо зацепить

Первый экран ⚠️

Много конкурентов

Как переоткрыть вкладку на смартфоне? 🤔

Интересное ⚖️ Полезное

Личное ⚖️ Интересное

Помогайте ⚡️

<input autocomplete="one-time-code"/>
Enabling Password AutoFill on an HTML Input Element
Web OTP API
Можно не спрашивать — не спрашивайте.
Конфуций этого не говорил

Autocomplete: 62 значения

The HTML autocomplete attribute

29.62%

The 2019 Web Almanac by HTTP Archive

inputmode

<input type="text" inputmode="numeric" />
Everything You Ever Wanted to Know About inputmode
<input type="text" inputmode="tel" />
Everything You Ever Wanted to Know About inputmode
<input type="text" inputmode="email" />
Everything You Ever Wanted to Know About inputmode

Батарея

CPU 🔋

Web Vitals

Web Vitals

Total Blocking Time
(TBT)

Total Blocking Time (TBT)

prefers-reduced-motion

.animation {
    -webkit-animation: boom 0.3s linear infinite both;
    animation: boom 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        -webkit-animation: none;
    }
}
prefers-reduced-motion

Battery Status API

navigator.getBattery().then(battery => {
    battery.addEventListener('levelchange', () => {
        if (battery.level < 0.2) {
            // сделать добро
        }
    });
});
Battery Status API
.disable-animation *,
.disable-animation *:before,
.disable-animation *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}
Revisiting prefers-reduced-motion, the reduced motion media query

Тёмные темы

Does Dark Mode Really Save Battery on Your Phone?

~ 30%

Тёмная сторона веба, Никита Дубко

С рюшечками 🎀

env()

env(safe-area-inset-top)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
env(safe-area-inset-right)
Понимание вьюпорта WebView в iOS 11
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);
}
Web Platform Primitives for Enlightened Experiences on Foldable Devices
@media (spanning: single-fold-vertical) {
    body {
        flex-direction: row;
    }

    .map {
        flex: 1 1 env(fold-left);
    }

    .locations-list {
        flex: 1;
    }
}
[css-media-queries] Foldables support and enablement

Привычки

❤️

zoom 🔍

<meta name="viewport"
      content="user-scalable=no">
<meta name="viewport"
      content="maximum-scale=1">
<meta name="viewport"
      content="width=device-width, initial-scale=1">
The 2019 Web Almanac by HTTP Archive

Safari, iOS 10 🤘

IOS 10 Beta Release Notes

Недолговечны

2 года 10 месяцев 📅

Average lifespan of smartphones in the United States

Вспомнить пароль? 🤔

Помогите им!
Разметьте формы!

email: 56.42%

The 2019 Web Almanac by HTTP Archive

tel: 36.7%

The 2019 Web Almanac by HTTP Archive
<form id="login" action="/login" method="post">
    <input type="email" autocomplete="username">
    <input type="password" autocomplete="current-password">
    <input type="submit" value="Пусти!">
</form>
Password Form Styles that Chromium Understands

Умеют что-то особенное

Touch-свойства

Трогательная вёрстка, Никита Дубко

У смартфонов есть

Ambient Light Sensor API

window.addEventListener("devicelight", function (event) {
    var luminosity = event.value;
    // 10 ~ 50 lux : тусклое освещение
    // 100 ~ 1000 lux : нормальное
    // > 10000 lux : яркое
});
Using light sensors
if ('AmbientLightSensor' in window) {
    const sensor = new AmbientLightSensor();
    sensor.onreading = () => {
        console.log('Светит на ' + sensor.illuminance);
    };
    sensor.onerror = (event) => {
        console.log(event.error.name, event.error.message);
    };
    sensor.start();
}
AmbientLightSensor

Vibration API

window.navigator.vibrate([200, 100, 200]);
Vibration API

Web NFC 💎

Web NFC

Просите, когда надо ⏰

Делать ли отдельную версию?

Отдельная версия

Адаптив

Отзывчивый UI 🐛

/* laptop/desktop */
@media (hover: hover) {}

/* smartphones/touchscreens */
@media (hover: none) and (pointer: coarse) {}

/* device with stylus */
@media (hover: none) and (pointer: fine) {}

/* Wii/Kinect/etc */
@media (hover: hover) and (pointer: coarse) {}

/* mouse/touchpad */
@media (hover: hover) and (pointer: fine) {}
Twitter: Adam Argyle

Mobile first 📱

Поисковики учитывают мобильную версию

2014

Helping users find mobile-friendly pages

2016

Как важно быть мобильным

Facebook: ~10%

Facebook is now a major mobile browser in U.S.

Итоги

1. Исследуйте статистику 📈

2. Креативно воруйте 🎨

3. Применяйте 🛠

4. Замеряйте 📏

Всё ли плохо?

Twitter: @smashingmag
SmashingConf Online Workshops
Web Almanac 2019
Your Static Web

Спасибо за внимание!

mefody.dev/talks/frontend-for-touch/
@dark_mefody
n.a.dubko@gmail.com