Техническое задание для верстальщика лендинга.
1. Общие требования
Цель: Сверстать адаптивный лендинг на основе готового дизайна.
Ключевой приоритет: Современный подход без устаревших решений (никаких таблиц, избытка <div>, inline-стилей).
2. Технологии
HTML:
Семантическая верстка (теги <header>, <nav>, <section>, <article>, <aside>, <footer>).
Валидный код (проверка через W3C Validator).
CSS:
Использование Flexbox/Grid для сеток.
CSS-анимации (без jQuery).
Препроцессор (Sass/Less) — по желанию, но приветствуется.
JavaScript:
Нативный JS или легкие библиотеки (например, Alpine.js).
Минимум зависимостей (Bootstrap обсуждаемо, но под вопросом).
3. Адаптивность
Мобильная версия обязательна:
Mobile First подход.
Брейкпоинты: 320px, 768px, 1024px, 1280px.
Проверка на реальных устройствах (iOS/Android) + DevTools.
Требования к интерфейсу:
Интерактивные элементы (кнопки, формы) адаптированы под тач-управление.
Мобильное меню (бургер, плавное открытие/закрытие).
Оптимизация изображений под ретину (использование srcset).
4. Интеграция с CMS
Выбор CMS:
Если CMS не выбрана — предложите вариант (WordPress, Webflow).
Все блоки лендинга должны редактироваться через админку? (обсуждаемо) (тексты, изображения, формы).
Требования:
Чистая структура шаблонов (без «сломанной» верстки после интеграции).
SEO-поля вынесены в админ-панель (метатеги, OG-разметка).
5. Производительность и оптимизация
Скорость загрузки:
Google PageSpeed Insights ≥ 80/100.
Ленивая загрузка изображений (loading="lazy").
Оптимизация:
Конвертация изображений в WebP + сжатие (через Squoosh или ImageOptim).
Минификация CSS/JS (использование Webpack/Gulp).
Подключение шрифтов через woff2 с preload.
6. Соответствие дизайну
Pixel Perfect:
Точность до 2px (сравнение через PerfectPixel или вручную).
Соответствие шрифтов, цветов, отступов, теней.
Анимации:
Плавность переходов (не менее 60 FPS).
Проверка на «тормоза» на слабых устройствах.
7. Кроссбраузерность
Поддержка: Chrome, Firefox, Safari, Edge (последние версии).
Для IE11 — только критический функционал.
8. Дополнительно
Контрастность текста ≥ 4.5:1.
Корректные ARIA-роли.
Навигация с клавиатуры.
SEO:
Семантическая разметка (микроразметка Schema.org — приветствуется).
alt для изображений, заголовки h1-h6.
9. Этапы работы
Подготовка среды: настройка сборки, подключение шрифтов, базовых стилей.
Верстка десктопной версии + проверка на соответствие дизайну.
Адаптив под мобильные устройства и планшеты.
Интеграция с CMS.
Тестирование и исправление багов.
10. Что предоставим
Макеты в Figma (включая мобильную версию).
Style Guide (шрифты, цвета, UI-киты).
Контент (тексты, изображения, логотипы).
11. Требования к исполнителю
Портфолио с адаптивной версткой.
Опыт интеграции с CMS (указать, с какими).
Навыки работы с DevTools, Figma, Git.
Примечания:
Если CMS не выбрана — укажите в заявке ваш вариант и обоснуйте.
Все вопросы по ТЗ задавать до начала работы.
Готовность вносить правки по результатам проверки (2-3 итерации).