Допустим, наш веб-дизайнер дает нам эту прекрасную работу.
Шаг 0:
- Убедитесь, что у них также есть дизайн для планшетов и мобильных устройств.
- Подтвердите действия и анимацию (например, что происходит, когда пользователь нажимает кнопку A, B, C).
- Сжать JPG до 85
- Используйте PNG, только если вам действительно нужен прозрачный фон
- Ленивая загрузка изображений
- Поддержка экрана сетчатки
Шаг 1:
Определите, сколько сегментов у нас будет.
Красный: сегмент событий.
Зеленый: как использовать сегмент
Синий: сегмент терминов
Черный: сегмент призыва к действию.
Шаг 2:
Создайте Блок и элемент на основе сегментов
Шаг 3.
Реализуйте сегмент за сегментом. Две вещи, которые следует отметить:
- Не используйте отображение или позиционирование в Block
- Не вставляйте свой код слишком глубоко
- Первый отступ только для Media Query, Element и Block-Modifier
- Второй отступ только для Media Query и модификатора элемента
- Обратите внимание на порядок записи (Media Query, Modifier, затем Element)
Шаг 4 (необязательно):
Поскольку мы знаем, что кнопка в сегменте CTA будет использоваться повторно (например, внутри сегмента Event), мы должны извлечь этот Элемент и сделать его новым Блоком.
Пожалуйста, имейте в виду, что вы не должны делать этот шаг, если никто не собирается его использовать, просто добавляя ненужную работу и бесполезность.