Современные подходы к верстке веб-страниц

Artur Trifonov, frontend-design.ru

👨‍💻

Современные подходы к верстке веб-страниц

Artur Trifonov, разработчик интерфейсов
frontend-design.ru

О чем этот доклад?

О чем этот доклад?

О чем этот доклад?

О чем этот доклад?

О чем этот доклад?

Доступность и семантика

Доступность и семантика

Для кого

В мире:
Более 2 млрд слепых и слабовидящих

В России:
880 тысяч слепых и слабовидящих

Для кого

Для кого

Как решаем

Семантика

  • Заголовки <h1>, <h2>, ... , <h6>

Плохо:

  • h2: Хэдер сайта
  • h1: Каталог смартфонов
      • h3: Фильтр
        • h4: Сортировка
      • h3: Apple iPhone 12
      • h3: Apple iPhone 11
      • h3: Apple iPhone 10

Как решаем

Семантика

  • Заголовки <h1>, <h2>, ... , <h6>

Хорошо:

  • h1: Каталог смартфонов
    • h2: Фильтр
    • h2: Сортировка
    • h2: Список товаров
      • h3: Apple iPhone 12
      • h3: Apple iPhone 11
      • h3: Apple iPhone 10

Как решаем

Семантика

Как решаем

Семантика

Как решаем

Семантика

Как решаем

Семантика

Как решаем

Семантика

HTML Living Standard

(Last Updated 25 June 2021)

Спецификация стандарта HTML от WHATWG

Как решаем

Описания

  • Картинки <img>
Логотип .html academy 

<img
  src="...">
  alt="Логотип .html academy"
>

Как решаем

Описания

  • Картинки <img>
  • Иллюстрации <figure>
Пример иллюстрации

Как решаем

Описания

  • Картинки <img>
  • Иллюстрации <figure>
  • Поля и группы полей

Как решаем

Описания

Как решаем

Описания

Как решаем

Описания

Как решаем

Описания

Как решаем

Контрастность

Нарушения зрения, мешающие воспринимать неконтрастные картинки:

Как решаем

Контрастность

Контраст по стандарту Web Content Accessibility Guidelines (WCAG):

Как решаем

Размеры и адаптив

Как решаем

Размеры и адаптив

Как решаем

Фокус

Как решаем

Фокус

  • Не используем
    outline: none;
  • Убираем outline только рисуя свой

Как решаем

Фокус

Как решаем

Прогрессивное улучшение

Как решаем

Прогрессивное улучшение

Как решаем

Прогрессивное улучшение

Как решаем

Прогрессивное улучшение

Итого, решаем так:

А чего мы больше не делаем?

А чего мы больше не делаем?

Адаптив

Mobile-first

Mobile-first

.box {
    background-color: pink;
}

@media (min-width: 768px) {
    .box {
        background-color: white;
    }
}

Mobile-first

Desktop-first

Desktop-first

.box {
    background-color: white;
}

@media (max-width: 1200px) {
    .box {
        background-color: pink;
    }
}

Desktop-first

Изоляция стилей

@media (max-width: 767px) {
    .box {
        background-color: pink;
    }
}

@media (min-width: 768px) {
    .box {
        background-color: white;
    }
}

Изоляция стилей

Скорость

Скорость: статистика

Посещаемость некоторых сайтов за февраль 2019

google.com 57 340 000 000
youtube.com 22 770 000 000
facebook.com 19 210 000 000
yandex.ru 2 820 000 000

Скорость: статистика

Посещаемость некоторых сайтов за февраль 2019

google.com 57 340 000 000
youtube.com 22 770 000 000
facebook.com 19 210 000 000
yandex.ru 2 820 000 000

~94 млн. посетителей в день для Яндекса

Скорость: статистика

100 000 посетителей в день

Скорость: статистика

100 000 посетителей в день

1.2–2.5 секунды загрузка DOM

6–8 секунд загрузка всей страницы

Скорость: статистика

100 000 посетителей в день

Если оптимизировать загрузку на 0.5 секунды,
мы сохраним почти 14 часов жизни

Скорость: инструмент

Google Lighthouse

Google PageSpeed Insights

Скорость: инструмент

Скорость: инструмент

Скорость: инструмент

Скорость: инструмент

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Контент, который понадобится позже

Скорость: оптимизация

Загружает и кеширует ресурс с высоким приоритетом

Скорость: оптимизация

Загружает и кеширует ресурс с низким приоритетом (браузер может даже проигнрорировать этот запрос)

Скорость: оптимизация

Устанавливает соединение с доменом (резолвинг DNS, рукопожатие TCP, рукопожатие TLS)

Скорость: оптимизация

Резолвит DNS, по сути это действие входит в preconnect

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Скорость: оптимизация

Используется для удаления неиспользуемого кода.
При правильном использовании WebPack и Rollup умеют это делать «из коробки»

Технологии
в верстке

Технологии в верстке

Выравнивание и построение сеток

Технологии в верстке

Можно считать относительные величины с фиксированными calc(100% + 20px)

Технологии в верстке

Модифицирование элементов, темизация

Технологии в верстке

Модифицирование элементов, темизация

Технологии в верстке

.button {
    color: white:
    background-color: blue;
}

.button--hollow {
    color: blue;
    border-color: blue;
    background-color: white;
}

.button--red {
    background-color: red;
}

.button--hollow.button--red {
    color: red;
    border-color: red;
    background-color: white;
}

Технологии в верстке

.button {
    color: white:
    background-color: var(--button-color);
}

.button--hollow {
    color: var(--button-color);
    border-color: var(--button-color);
    background-color: white;
}

Технологии в верстке

.button {
    color: white:
    background-color: var(--button-color);
}

.button--hollow {
    color: var(--button-color);
    border-color: var(--button-color);
    background-color: white;
}

.button--red {
    --button-color: red;
}

Технологии в верстке

Далекое будущее

.parent {
    contain: layout inline-size;
}

@container (min-width: 600px) {
    .child { … }
}

Технологии в верстке

Далекое будущее

.color {
    background-color: color-mix(
        in srgb,
        coral 35%,
        yellow
    );
}

Технологии в верстке

Далекое будущее

.color {
    background-color: rgb(
        from coral
        r g b / 80%
    );
}

Технологии в верстке

Далекое будущее

.color {
    color: color-contrast(
        whitesmoke vs
        black, white
    );
}

Спасибо!

Немного ссылок на информацию

Спасибо!

it2021.frontend-design.ru
layout2021.frontend-design.ru