Projekt strony jest zaakceptowany. Po wdrożeniu nagłówki mają inny krój, odstępy rozjeżdżają się na laptopie, a menu na telefonie zasłania pół ekranu. Projekt był dobry. Coś zgubiło się po drodze z projektu do kodu, czyli na front-endzie.
Front-end i back-end
Front-end to wszystko, co dzieje się w przeglądarce. Back-end to zaplecze na serwerze: baza danych, logika, płatności, panel CMS. W restauracji front-end byłby salą, a back-end kuchnią. Gość ocenia lokal po sali, ale bez kuchni nic nie zje.
Co robi dobry front-end
- przenosi projekt UI do kodu bez zgadywania, na każdej szerokości ekranu (responsywność),
- ładuje tylko to, czego strona potrzebuje, więc działa szybko także na słabszym telefonie (Core Web Vitals),
- używa właściwych znaczników HTML: nagłówek jest nagłówkiem, a przycisk przyciskiem, co pomaga czytnikom ekranu (dostępność cyfrowa) i wyszukiwarkom,
- składa strony z komponentów zgodnych z design systemem, więc nowe podstrony nie odbiegają od projektu,
- dba o ruch, żeby animacje i mikrointerakcje nie szarpały i nie przeszkadzały.
Projekt i kod w jednych rękach
Dużo traci się na styku dwóch firm. Agencja oddaje pliki z projektem, software house koduje po swojemu, a poprawki krążą w mailach. Przy stronach projekt i kod robimy więc u siebie. Projektant widzi, jak jego praca działa w przeglądarce, a programista wie, po co jest każdy detal.
Jeśli projekt i kod robią różne firmy, umów przegląd wdrożenia przez projektanta jeszcze przed startem. Kilka godzin wspólnego sprawdzania oszczędza wielu poprawek po premierze.