Необходимо: Верстка адаптивного сайта Pixel Perfect на основе макета, разработанного в Figma. (ссылка на макет внизу)
Цель: Создание адаптивного сайта https://zoodom.ua и валидного W3C (будет проверяться), корректно отображающегося на мобильных, планшетных и десктопных устройствах, соответствующего современным требованиям UX/UI и требованиям Google к мобильной оптимизации в 2024 году.
Технологии: Использование HTML5, CSS3, JavaScript (ES6+), SCSS/LESS (по необходимости). Верстка должна быть кроссбраузерной (Chrome, Safari, Firefox, Edge) и адаптивной для всех основных разрешений экранов.
1. Разрешения экранов и брейкпоинты
Для обеспечения корректного отображения на всех устройствах, необходимо настроить следующие брейкпоинты (Промежуточные расширения должны отображать блоки без сдвигов и без горизонтальных скролов):
- Мобильные устройства:
- Минимальное разрешение: 320px (например, iPhone SE, старые смартфоны).
- Основное мобильное разрешение: 360px – 414px (например, iPhone X, Galaxy S10).
- Планшеты:
- Минимальное разрешение: 768px (например, iPad Mini).
- Планшеты (портрет): 768px – 1024px (например, iPad).
- Планшеты (альбом): 1024px – 1366px (например, iPad Pro).
- Десктопы:
- Минимальное разрешение: 1280px.
- Рекомендуемые разрешения для десктопов: 1440px и выше
Для каждого брейкпоинта должны быть заданы соответствующие стили, обеспечивающие оптимальное отображение контента.
2. Технические требования к верстке
- Сетка: Использование сеточной (CSS Grid) системы для обеспечения адаптивности макета (без конструкторов. Вариант использования Flexbox возможен при обосновании).
- Анимации и переходы: Применение CSS-анимаций должно быть плавным и минимальным, с учётом производительности на мобильных устройствах. (пожелания по анимации в прикрепленном файле)
Где есть слайдеры- автоматичекое прокрутка элементов каждые 3 секунды.
- Оптимизация изображений: Изображения должны быть адаптированы под разные разрешения с использованием форматов WebP и сжатия без потери качества. Также должны быть реализованы механизмы для lazy loading изображений.
- Иконки и графика: Использовать SVG для иконок и графики, что обеспечит высокое качество на всех экранах.
- Типографика: Размеры шрифтов должны динамически изменяться в зависимости от разрешения экрана.
- Медиа-запросы: Все медиа-запросы должны быть четко структурированы и поддерживать основные брейкпоинты.
3. Проверка и тестирование
- Тестирование верстки должно проводиться на реальных устройствах, а также в эмуляторах браузеров для подтверждения корректной работы на всех поддерживаемых разрешениях и операционных системах (iOS, Android).
Приоритетные для тестов размеры экрана:
1. 393x873:
- Xiaomi Mi 10T, Mi 10T Pro
- Xiaomi Redmi Note 9 Pro
- Xiaomi Redmi Note 9
2. 390x844:
- iPhone 14
- iPhone 13 и 13 Pro
- iPhone 12 и 12 Pro
3. 360x800:
- Samsung Galaxy S20
- Honor 7X
- Huawei P40 Lite
4. 414x896:
- iPhone 11 Pro Max
- iPhone 11
- iPhone Xr
5. 430x932:
- iPhone 14 Pro Max
6. 393x851:
- Google Pixel 5
- Xiaomi Mi 10 Pro
- Xiaomi Redmi Note 8 Pro
7. 412x915:
- OnePlus 7T
Приоритетный браузера для тестов:
Chrome и Safari
- Обязательная проверка вёрстки на переполнение контентом. Вёрстка не должна ломается:
- при добавлении в элементы большего количества текста;
- при использовании картинок с неподходящими размерами;
- текст не должен выпадать из объектов;
- переполнение контентными блоками не приводит к нарушению сетки.
- Проверка через Google Mobile-Friendly Test и инструмент PageSpeed Insights для оценки производительности и соответствия мобильным стандартам.
4.СЕО.
-Отдельно СЕО будет предоставлена информация по метаданным на страницах.
5. Дизайн.
- Дизайн создан с перспективой на развитие проекта. Поэтому будут даны дополнительные пояснения какие блоки нет необходимости верстать на текущий момент.
- При необходимости есть возможно внесение правок в дизайн (исполнитель по дизайну на связи).
6. Заключение
Верстка должна быть выполнена с учётом всех вышеуказанных параметров (но не ограничиваясь ими для достижения лучших результатов), включая требования адаптивности и оптимизации для мобильных устройств.
По окончанию работы по верстке, предоставляется период для тестирования - одна неделя с момента получения последнего замечания.
7. Функционал. Будет предоставлен предварительный документ описывающий функционал блоков и элементов. Готов обсуждать непонятные функциональные элементы в дизайне, как предварительно так и в процессе сотрудничества.
Макет для верстки: https://www.figma.com/design/RPrjahTERmhbN3g9uKL6Eo/%D0%97%D0%BE%D0%BE%D0%B4%D1%96%D0%BC_website?node-id=0-1&node-type=canvas
Если есть дополнительные вопросы, или требуется уточнение по конкретным разделам, готов ответить.
