Case study

Sześć szablonów stron dla firm usługowych — co w nich zmieniliśmy i dlaczego

3 września 2026 · czas czytania ~8 min

Najtrudniejszy moment w rozmowie z wykonawcą o stronie to ten, w którym trzeba wytłumaczyć, czym „strona sprzedażowa" różni się od zwykłej wizytówki. Można to opowiadać godzinę albo pokazać w minutę. Dlatego zamiast kolejnego opisu usługi powstało sześć działających szablonów, które można otworzyć na telefonie i przeklikać jak każdą inną stronę.

Dlaczego sześć, a nie jeden

Jeden przykład zawsze prowokuje to samo pytanie: „no dobrze, ale u mnie jest inaczej". I słusznie — dekarz sprzedaje inaczej niż stolarz, bo klient przychodzi do nich z innym lękiem. Do dekarza z obawą, że zapłaci za coś, czego nie zobaczy na własne oczy. Do stolarza z obawą, że mebel nie będzie pasował do wnętrza, które już ma.

Sześć branż pokazuje, że ten sam szkielet obsługuje bardzo różne sytuacje sprzedażowe, a różnice siedzą w treści i w logice wyceny, nie w technologii. Przy okazji odpowiada na pytanie o styl — bo strona brukarza i strona pracowni stolarskiej nie powinny wyglądać tak samo, nawet jeśli mają identyczną strukturę.

Co jest w każdym z sześciu

1. Nagłówek, który mówi, co klient zyskuje — nie co firma robi

„Kompleksowe usługi dekarskie" to opis firmy. „Dach, który przetrwa każdą zimę — pomiar dronem w 48 h, bez wchodzenia na dach i bez zaliczki" to opis tego, co dostaje klient, plus trzy konkretne powody, żeby nie szukać dalej. Każdy z sześciu nagłówków jest zbudowany w tym drugim trybie i w każdym siedzi jedna liczba albo jedna konkretna obietnica.

2. Kalkulator wyceny w czterech pytaniach

To jest element, który najczęściej odróżnia stronę przynoszącą zapytania od takiej, która tylko istnieje. Klient chce wiedzieć, w jakim rzędzie wielkości się porusza, zanim komukolwiek poda numer telefonu. Jeżeli tej informacji nie znajdzie u Ciebie, znajdzie ją u kogoś innego.

Cztery pytania to świadomy kompromis. Przy dwóch widełki wychodzą tak szerokie, że nic nie mówią. Przy siedmiu formularz zaczyna przypominać wniosek kredytowy i ludzie go porzucają w połowie. Cztery wystarczają, żeby zawęzić wynik, i mieszczą się w kilkunastu sekundach.

3. Dowody zamiast przymiotników

„Solidnie, terminowo, w dobrej cenie" pisze o sobie każda firma w branży, więc to zdanie nie niesie żadnej informacji. Zamiast tego w każdym szablonie stoją rzeczy sprawdzalne: gwarancja z konkretnym terminem, opinie z imieniem i lokalizacją, zdjęcia z kolejnych etapów prac, uprawnienia z nazwą, rok założenia. Nie dlatego, że ładnie wyglądają — dlatego, że można je zweryfikować, a przymiotników nie można.

4. Wersja mobilna projektowana osobno

Większość ruchu w tych branżach to telefon, a mimo to wersja mobilna zwykle powstaje jako produkt uboczny: ten sam układ, tylko węższy. To zwykle nie działa. Zdjęcie z nagłówka spycha treść poza pierwszy ekran, numer telefonu rozbija belkę na trzy linie, przyciski są za ciasne dla kciuka.

W tych szablonach na telefonie nagłówek leży na zdjęciu zamiast pod nim, w belce zostaje logo i jeden przycisk, numer telefonu przenosi się do przyklejonego paska na dole ekranu, a galerie schodzą z czterech kolumn do dwóch, żeby zdjęcia nie były znaczkami pocztowymi.

Co poszło nie tak — i co z tego wynika

Ta część jest ciekawsza niż lista funkcji, bo pokazuje, ile rzeczy wygląda dobrze na monitorze i rozpada się na telefonie.

Obrazek rozciągnięty przez atrybut w HTML

Zdjęcie w nagłówku jednego z szablonów renderowało się jako 473 × 900 pikseli zamiast 473 × 304 — było rozciągnięte w pionie i rozpychało całą sekcję do ponad tysiąca pikseli wysokości. Powód: atrybuty width i height w kodzie HTML działają jak podpowiedź stylu, a reguła aspect-ratio liczy się tylko wtedy, gdy jeden z wymiarów jest ustawiony na auto (dokumentacja MDN). Nasza reguła ustawiała szerokość, ale nie wysokość, więc wysokość została wzięta z atrybutu i obraz stracił proporcje. Bez zmierzenia realnych wymiarów w przeglądarce nikt by tego nie nazwał błędem — po prostu „jakoś dziwnie wygląda".

Poprawka, która nigdy się nie wykonała

Reguła odpowiedzialna za nałożenie nagłówka na zdjęcie stała w arkuszu przed regułami podstawowymi. Przy równej specyficzności wygrywa ta późniejsza, więc podstawowa ją unieważniała. Kod istniał, wyglądał poprawnie i nie robił absolutnie nic. Lekcja jest prosta: poprawki dla wersji mobilnej idą na koniec arkusza, nie obok tego, co poprawiają.

Znikające elementy przy szybkim przewijaniu

Animacje wejścia potrafiły zostawić kilka elementów na stałe niewidocznych, jeśli ktoś przewinął stronę bardzo szybko. Treść nigdy nie może zależeć od tego, czy animacja zdążyła się uruchomić, więc doszły dwie siatki bezpieczeństwa: natychmiastowe odsłonięcie wszystkiego, co jest w oknie przy starcie, i twardy limit czasowy, po którym nic nie ma prawa pozostać ukryte.

Nagłówek zasłaniający pasek informacyjny

Przyklejony nagłówek miał zahardkodowaną odległość od góry, wyliczoną dla ekranu komputera. Na wąskim telefonie tekst paska zawijał się do trzech linii, pasek urósł do 72 pikseli i nagłówek wjechał na niego, zasłaniając 35 pikseli treści. Rozwiązanie: skrypt mierzy wysokość paska na żywo i przekazuje ją do stylów — również po obrocie ekranu.

Liczby bez spacji i tekst na granicy czytelności

Polskie formatowanie liczb domyślnie nie grupuje wartości czterocyfrowych, więc w wyniku kalkulatora pojawiało się „5600" zamiast „5 600" — drobiazg, ale w cenniku czyta się gorzej. Osobno okazało się, że po rozjaśnieniu zasłony pod nagłówkiem tekst pomocniczy spadał poniżej progu kontrastu 4,5:1, który wytyczne WCAG stawiają zwykłemu tekstowi, i wymagał ciemniejszego odcienia. Obie rzeczy wyszły dopiero z pomiaru, nie z oglądania.

Sześć szablonów — obejrzyj na żywo

Wszystkie otwierają się normalnie w przeglądarce. To nie są prawdziwe firmy — nazwy, telefony, opinie i ceny są przykładowe, a każdy szablon ma u góry stały pasek z tą informacją.

Pełne zestawienie z opisami i zrzutami ekranu: wszystkie szablony w jednym miejscu.

Co z tego wynika dla Twojej strony

Jeśli masz stronę i telefon milczy, sprawdź na własnym telefonie trzy rzeczy. Po pierwsze: czy w pierwszym ekranie widać, co konkretnie zyskuje klient, czy tylko nazwę firmy i zdjęcie. Po drugie: czy da się poznać rząd wielkości ceny bez dzwonienia. Po trzecie: czy zamiast przymiotników są rzeczy sprawdzalne — terminy, liczby, uprawnienia, opinie z nazwiskiem.

Trzy odpowiedzi „nie" oznaczają zwykle, że problemem nie jest wygląd, tylko brak powodu, żeby zadzwonić. Więcej o samej strukturze piszemy w tekście o siedmiu rzeczach, które sprawiają, że strona realnie sprzedaje, a o osobnych podstronach na każdą usługę — tutaj.

Najczęstsze pytania