Необхідно: Верстка адаптивного сайту 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
Якщо є додаткові питання, або потрібно уточнення по конкретним розділам, готовий відповісти.
