Autem: z makiety telefonu na czarną scenę
Autem to mój własny projekt, aplikacja dla kierowców, a nie zlecenie klienta. Strona przed premierą wyglądała jak tysiące stron aplikacji: hasło po lewej, makieta telefonu z dymkami po prawej, kapsułki i plakietki wszędzie. Przerobiłem ją według tych samych zasad, których używam przy stronach klientów.
Aplikacja dla kierowców, cała Polska, 2026, Mój własny projekt, Odświeżenie strony produktu
było 0jest 5scen sterowanych przewijaniem na stronie głównej (policzone w CSS obu wersji)było 15jest 0przycisków i plakietek w kształcie kapsułki, typowych dla szablonów- 96na 100 w Lighthouse na telefonie po zmianie, mediana z 3 pomiarów
- 0plików JavaScript, ciasteczek i zapytań do obcych serwerów
Co było i co zrobiłem
Przed
- Pierwszy ekran w układzie, który ma większość stron aplikacji: plakietka z zieloną kropką, hasło po lewej, makieta telefonu z pulpitem po prawej i dwa dymki z funkcjami obok, a pod tym tło w kratkę.
- Pod hasłem długi akapit, oceny i trzy plakietki naraz. Wszystko było podobnie ważne, więc nic nie prowadziło wzroku.
- Odczyt kodu z dowodu rejestracyjnego, czyli najszybszy start w aplikacji, był dopiskiem w nawiasie w kroku „Wpisz VIN”.
- Żadna sekcja nie reagowała na przewijanie. Strona była zbiorem kart w zaokrąglonych ramkach, ponumerowanych kroków i zakładek jedna pod drugą.
Ta sama aplikacja, te same funkcje. Inna opowieść.
Po odświeżeniu
- Czarna scena jak na stronie produktu: hasło „Cały Twój garaż” złożone wersalikami w wąskim kroju na całą szerokość, pod nim sylwetka auta, po której przewijanie przesuwa światło
- Akt „Dowód”: przykładowy dowód rejestracyjny wjeżdża na ekran, przy kodach pól, które aplikacja czyta z kodu Aztec, po kolei zapalają się znaczniki, a na róg wjeżdża pulpit tego samego auta
- Akt „Licznik”: własny zegar w SVG, którego wskazówka dochodzi do przebiegu auta demonstracyjnego, obok trzy zdania o tym, co aplikacja liczy sama
- Akt „Światło”: zbliżenie tylnej lampy oddala się i zamyka w okno nad zdaniem o przypomnieniach
- Bursztynowe linie w SVG nad zapisem na listę, które rysują się przy przewijaniu
- Proste narożniki zamiast pigułek, wspólna ramka telefonu we wszystkich sekcjach, zdjęcia z Unsplash w AVIF i WebP
- Przy ograniczonym ruchu i w przeglądarkach bez osi przewijania każda scena stoi od razu w stanie końcowym
Efekt
Strona opowiada aplikację po kolei: najpierw dowód, potem licznik, potem przypomnienia, zamiast pokazać wszystko na jednym zrzucie telefonu.
Pięć scen to sam CSS: bez ani jednego pliku JavaScript, bez ciasteczek i bez zapytań do obcych serwerów. Przy ograniczonym ruchu każda scena stoi od razu w stanie końcowym.
Jak mierzyłem: obie wersje zbudowałem z historii repozytorium (27 września i po zmianie), podałem z tego samego lokalnego serwera z kompresją gzip i zmierzyłem Lighthouse 13 w trybie telefonu, trzy razy każdą. Obie mieszczą się w progu 90, który gwarantuję przy stronach klientów (przed 98, po 96: większe zdjęcie auta na pierwszym ekranie kosztuje trochę czasu). Kapsułki i sceny policzyłem w zbudowanej stronie.
To mój produkt, więc nie mam opinii klienta. Mam za to zasadę, którą stosuję też u klientów: każdy efekt ma powód, a liczby na tej stronie pochodzą z pomiaru, nie z obietnicy.
scen sterowanych przewijaniem na stronie głównej (policzone w CSS obu wersji)
Przed0Po5przycisków i plakietek w kształcie kapsułki, typowych dla szablonów
Przed15Po0
Zobacz swoją nową stronę, zanim zapłacisz
Przygotuję bezpłatny podgląd nowej strony na podstawie obecnej. Płacisz dopiero, gdy Ci się spodoba.