Specyfikacja techniczna dotycząca szablonowania i integracji
1. Wymagania ogólne
Pixel Perfect w odniesieniu do makiet Figma.
Nie zmieniać ani nie upraszczać projektu bez uzgodnienia.
Wszystkie efekty wizualne (gradienty, cienie, blask, przezroczystości, ramki itp.) zrealizować maksymalnie blisko makiety.
W przypadku wystąpienia ograniczeń technicznych wszelkie zmiany są wcześniej uzgadniane.
2. Szablonowanie
Semantyczne HTML5.
Responsywne i wielobrowserowe szablonowanie.
Indywidualny klasyczny motyw WordPress od podstaw, bez użycia gotowych motywów.
3. Responsywność
Makiety opracowane dla Desktop i Mobile.
Na pośrednich rozdzielczościach (rozdzielczościach) adaptacja odbywa się poprzez skalowanie i przebudowę elementów bez naruszania koncepcji projektu. (Uwaga: w oficjalnym stylu technicznym częściej używa się „Na pośrednich breakpointach” lub „Dla pośrednich ekranów”).
Najlepsza opcja: Na pośrednich wartościach szerokości ekranu adaptacja odbywa się poprzez skalowanie i przebudowę elementów bez naruszania koncepcji projektu.
Przejście na wersję mobilną odbywa się tylko w uzgodnionym punkcie adaptacji (breakpoint).
Jeśli dla poszczególnych rozdzielczości zajdzie potrzeba zmiany kompozycji lub dodatkowego projektu, jest to wcześniej uzgadniane.
4. Optymalizacja
Konwersja obrazów do WebP (lub AVIF, gdzie to możliwe).
Optymalne kompresowanie obrazów.
Responsywne obrazy (srcset, sizes).
Lazy Loading (opóźnione ładowanie).
Minifikacja CSS i JavaScript.
Maksymalna możliwa optymalizacja szybkości ładowania strony.
5. Interaktywność
Zrealizować:
stany Hover / Active / Focus;
animacje przycisków, linków i kart;
stany pól wyszukiwania i elementów formularzy;
płynne otwieranie obrazów z miniatur (Lightbox / Fancybox lub analog);
płynne przejścia między stanami interfejsu.
Jeśli zachowanie elementu nie występuje w makiecie, zrealizować je zgodnie ze stylistyką projektu.
6. Zakończenie prac
Umieścić w pełni gotową stronę na serwerze zamawiającego.
Przekazać kod źródłowy, motyw WordPress oraz wszystkie pliki projektu.
Poprawić uwagi zgłoszone podczas odbioru, jeśli są związane z niezgodnością z makietą lub tą specyfikacją.
Link do makiety
https://www.figma.com/design/MngyP8sAZP3titWFpDivT1/Rugby--Original-?node-id=3284-2242&t=MJ7cFzBpFZPXzq4b-1
