Когда пригодится
Первый экран должен поддерживать предложение и не замедлять загрузку.
Рабочий порядок
| Этап | Что сделать |
|---|---|
| Подготовка | Знайте место заголовка, кнопки и адаптивные размеры. |
| Черновик | Сделайте изображение с запасом для обрезки и сожмите файл. |
| Проверка | Заголовок читается, а ключевой объект виден на телефоне. |
Пример применения
Для сервиса презентаций покажите рабочий результат, оставив место под текст.
Типичная ошибка и исправление
Красивая тяжёлая картинка ухудшает скорость; оптимизируйте размер.
Первый экран с настоящим заголовком
Сначала напишите заголовок страницы и определите, где он будет стоять. Для широкого hero попросите свободную область с этой стороны, затем проверьте композицию при узком экране. Не встраивайте значимый текст в картинку: он может обрезаться и не будет доступен как обычный HTML. Уменьшите файл до разумного веса без потери главного объекта. Посмотрите первый экран при медленном соединении: смысл страницы должен быть понятен и до загрузки изображения.
Заметили неточность?
Написать редакции