CrushQuiz.pl - wakacyjna kampania interaktywna E.Wedel

Rozwiązanie - jedno źródło prawdy dla pozycji "serca"

W typowym quizowym templacie robisz to prosto: kartka HTML, przyciski w tabelce, tło jako background-image, wynik jako kolejny widok. Na jednym breakpoincie działa, na drugim serce ucieka za prawy margines, na trzecim tło ma białe pasy po bokach. Nikt się do tego nie przyznaje, ale każdy w tej branży to widział.

Zrobiliśmy inaczej. Każdy widok (start, pytanie, wynik) ma swój własny aspect ratio - 16:9 na desktopie, 9:20 na telefonie w pionie, 7:5 dla ekranu wyniku. Grafiki tła są przygotowane w tych proporcjach osobno. Canvas na stronie ma dokładnie tę proporcję, jest wyśrodkowany, wypełnia ekran z zachowaniem proporcji (nigdy nie rozciąga tła).

Nad canvasem siedzą overlaye - przyciski, karty wyniku, tekst pytania. Ich pozycja jest wyrażona w procentach względem tła, nie względem viewportu. Zmiana orientacji ekranu przełącza jednym breakpointem cały zestaw pozycji, więc każdy przycisk i każda karta lądują tam gdzie powinny w danym urządzeniu.

Efekt: serce Wedla siedzi zawsze w tym samym miejscu artwork'u, niezależnie od tego czy użytkownik ma otwartą stronę na iPhonie w Safari z paskiem, czy w mode fullscreen, czy na 34-calowym monitorze. To pixel-perfect w prawdziwym znaczeniu, nie w znaczeniu marketingowym.

Osobne creativy per orientacja zamiast rozciągania jednego. W praktyce to znaczy że mobile dostaje pionowy bg (kompozycja zoptymalizowana pod format 9:20 telefonów), desktop dostaje szeroki. Każdy widzi wersję zaprojektowaną pod jego ekran.

Wypełnienie boczne: kiedy trafisz w ekran którego proporcji nie ma bezpośrednio w artworkach (np. tablet 4:3), za canvasem pokazuje się rozmyty fill - ten sam obraz w tle, mocno rozmyty i lekko przeskalowany. Efekt: nawet gdy artwork nie zajmuje całego ekranu, boki nie są pustymi pomarańczowymi pasami, tylko rozmyta kontynuacja tła. Widz nawet nie zauważy że coś się dzieje pod maską.

Wyróżniki techniczne

Rzeczy, które robi się w 5% projektów kampanijnych, ale których brak boli, kiedy kampania ma dojść z rana do miliona telefonów.

1. Zero frameworków, zero build-stepu - czysty HTML/CSS/JS w jednym pliku. Instant Time To Interactive, żadnego blocking JS, fonty ładowane z preconnectem. Kampania viralowa nie może czekać na hydratację frameworka.
2. Wersjonowanie assetów przez query string - każdy asset ma znacznik wersji w URL. Reguły cache na serwerze ustawiają HTML na no-cache, a wszystkie assety statyczne na immutable, rok. Wypuszczasz nową wersję kampanii, klient dostaje ją od razu (bo HTML się nie cache'uje), a cały ciężar grafik wisi w cache przeglądarki. Zero bugów typu "u mnie stare tło".
3. WebP dla kluczowych obrazów - warianty wyniku (grafiki które dominują visually na stronie z wynikiem) w WebP, tła w JPG. WebP wygrywa kompresyjnie przy zachowaniu jakości, tło JPG ma pełne wsparcie na starszych przeglądarkach. Miks per przypadek użycia, nie ideologia.
4. Iteracje designu z agencją na konkretach - screeny z rzeczywistych urządzeń zamiast opisów słownych, warianty designu pokazane obok siebie zamiast "a może inaczej to zrobić?". Rozmowa z Brainboxem szła po konkretach: który wariant idzie na produkcję, co się zmienia w kolejnej iteracji.