Proces tworzenia strony internetowej — 4 etapy

Strona firmowa powstaje w czterech etapach: rozmowa, projekt, realizacja i wdrożenie. Kolejność nie jest przypadkowa, bo każdy etap opiera się na wyniku poprzedniego — nie da się projektować układu, zanim wiadomo, co ma się w nim znaleźć.

Nie jest to jedyny możliwy schemat. Każdy wykonawca pracuje trochę inaczej i część kroków bywa łączona albo pomijana. Poniżej opisuję kolejność, którą stosuję sam, razem z informacją, co na którym etapie należy do zamawiającego.

To ostatnie jest ważniejsze, niż wygląda. Zlecenie w formie „zróbcie tak, żeby było dobrze" kończy się zwykle stroną, która owszem, działa, ale mówi o firmie rzeczy, których właściciel by nie powiedział. Wykonawca zna się na stronach, Ty znasz się na swoich klientach, i obie te rzeczy są w projekcie potrzebne.

Cztery etapy w skrócie

1. Rozmowa — po co ta strona powstaje, co ma się zmienić i co dokładnie budujemy.
2. Projekt — mapa podstron, treść i warstwa graficzna, zatwierdzana przed kodowaniem.
3. Realizacja — budowa strony, podpięcie systemu zarządzania treścią i testy.
4. Wdrożenie — przeniesienie na docelowy adres i pierwsze dni obserwacji.

Ten sam podział opisuję w sekcji o tym, jak pracuję. Poniżej rozwijam każdy etap i piszę, co musi być gotowe, żeby dało się przejść do następnego.

1. Rozmowa

Po co ta strona powstaje

Większość firm odpowiada na to pytanie tak samo: żeby pokazać ofertę i umożliwić kontakt. To prawda, ale zbyt ogólna, żeby cokolwiek z niej wynikało dla projektu. Na tym poziomie każda strona firmowa wygląda tak samo, i właśnie dlatego tyle z nich wygląda tak samo.

Pytam więc o rzeczy bardziej konkretne. Skąd dziś przychodzą klienci i co ma się w tym zmienić. Czego nie potrafi obecna strona, jeśli już istnieje. Co odróżnia Cię od trzech najbliższych konkurentów, i to nie w kategoriach „jakość i doświadczenie", tylko czegoś, czego oni nie mogą o sobie napisać. Kto podejmuje decyzję o zakupie i czego potrzebuje, żeby ją podjąć.

Odpowiedzi przekładają się potem na każdy kolejny etap: na to, co trafi do pierwszego ekranu, ile będzie podstron ofertowych i czy w ogóle potrzebny jest blog. Bez nich powstaje szablon wypełniony Twoimi tekstami. O tym, jak rozpoznać stronę zrobioną w ten sposób, pisałem w tekście o cechach dobrej strony firmowej.

Co dokładnie budujemy

Z celów wynika forma. Jeśli ruch ma pochodzić głównie z reklam w Google Ads albo z mediów społecznościowych, a treści ma być mało, sensowniejszy bywa landing page: jedna strona prowadząca do jednego działania, bez rozpraszającego menu.

Jeśli strona ma sama przyprowadzać klientów z wyszukiwarki, potrzebny jest serwis z osobnymi podstronami. Osobna podstrona pod każdą usługę to podstawa widoczności, bo wyszukiwarka pokazuje konkretne adresy pod konkretne zapytania, a nie stronę główną pod wszystko.

Na tym etapie ustalamy też typy podstron, czyli powtarzalne schematy do zaprojektowania:

• strona główna
• zbiorcza podstrona oferty
• podstrona pojedynczej usługi
• o firmie
• kontakt
• wpis bloga i lista wpisów
• przy sklepie dochodzi lista produktów, karta produktu i koszyk

Każdy taki typ trzeba zaprojektować raz, a potem powiela się go dla wszystkich podstron danego rodzaju. Dlatego liczba typów wpływa na koszt bardziej niż liczba samych podstron.

Rozmowa kończy się, gdy wiadomo, co powstaje, w jakim zakresie i w jakim budżecie.

2. Projekt

Ten etap jest najdłuższy i mieści trzy rzeczy, które muszą powstać w tej kolejności: mapa podstron, treść, dopiero potem grafika.

Mapa strony

Mapa strony to spis wszystkich podstron z ich finalnymi nazwami i adresami, ułożony w strukturę nadrzędnych i podrzędnych pozycji. Wygląda jak zwykła lista i jest jednym z najbardziej niedocenianych dokumentów w całym projekcie.

Robi trzy rzeczy naraz. Ustala menu, bo widać, co się w nim zmieści, a co trzeba schować głębiej. Ustala adresy, a te po uruchomieniu strony zmienia się już z przekierowaniami i utratą pozycji, więc lepiej przemyśleć je wcześniej. Wreszcie pokazuje skalę: lista, która rozrasta się do sześćdziesięciu pozycji, jest sygnałem, że zakres wymknął się spod kontroli, i lepiej zobaczyć to teraz niż w trakcie pisania tekstów.

Adresy warto od razu ustalać krótkie i czytelne, złożone ze słów, które ktoś realnie wpisuje w wyszukiwarkę. /montaz-okien-elk/ mówi wszystko, /oferta/podstrona-2/ nie mówi nic.

Treść

To jest część, która przesądza o terminie całego projektu, i prawie zawsze ta, która go opóźnia.

Powód jest prosty: treść zwykle należy do zamawiającego, a pisanie o własnej firmie jest trudniejsze, niż się wydaje przed rozpoczęciem. Do tego dochodzą zdjęcia, których nikt nie zrobił, cennik, którego nikt nie spisał, i lista realizacji rozrzucona po trzech telefonach.

Da się zaprojektować układ na tekstach zastępczych i czasem tak robię, ale ma to granicę. Projekt nagłówka wygląda inaczej przy haśle z trzech słów niż przy zdaniu na dwie linijki. Sekcja z trzema usługami wygląda inaczej niż z jedenastoma. Im później pojawia się prawdziwa treść, tym więcej rzeczy trzeba przerabiać.

Co jest potrzebne, żeby zamknąć tę część:

• teksty na wszystkie podstrony z mapy albo decyzja, kto je napisze
• zdjęcia własne — produktów, realizacji, zespołu, warsztatu
• logo w formie wektorowej, jeśli istnieje
• pełne dane firmy: nazwa, adres, NIP, telefony, godziny pracy
• cennik albo widełki, jeśli mają być pokazane
• dokumenty formalne: polityka prywatności, regulamin przy sklepie — wzorce do uzupełnienia dostajesz ode mnie, ale treść musi odpowiadać temu, jak faktycznie działasz

Jeśli nie masz czasu na pisanie, powiedz to na początku, a nie w połowie projektu. Teksty da się zamówić albo napisać wspólnie na podstawie rozmowy, tylko trzeba to zaplanować, zamiast czekać, aż same się pojawią.

Warstwa graficzna

Dopiero mając mapę strony i treść, da się sensownie rozmieścić elementy. Powstaje wygląd: układ sekcji, typografia, kolory, zachowanie menu, wygląd przycisków i formularzy.

Klucz jest w tym, żeby zatwierdzić projekt przed kodowaniem. Zmiana w pliku graficznym to przesunięcie kilku elementów. Ta sama zmiana po zakodowaniu oznacza poprawki w kodzie, w wersji mobilnej i w tabletowej, ponowne testy i zwykle dodatkowy koszt.

Sposobów na tę część jest kilka. Można zaprojektować wszystko od zera w programie graficznym, a potem przełożyć na kod. Można oprzeć się na gotowym motywie i dopasować go do treści, co wychodzi taniej i szybciej, ale ogranicza swobodę. Wybór zależy od budżetu i od tego, na ile strona ma się wyróżniać. Więcej o tej decyzji piszę na stronie o stronach internetowych.

3. Realizacja

Tu projekt zamienia się w działającą stronę: kod HTML, CSS i JavaScript, podpięcie systemu zarządzania treścią, jeśli ma być, konfiguracja formularzy i wersje na różne szerokości ekranu.

Testowanie nie jest jedną czynnością na końcu, tylko kilkoma osobnymi przeglądami:

• Język. Literówki, odmiana, spójność nazw usług między podstronami.
• SEO. Osobny tytuł i opis dla każdej podstrony, jeden nagłówek H1, sensowna hierarchia nagłówków, opisy alternatywne obrazów, linkowanie wewnętrzne, mapa witryny XML, plik robots.
• Prędkość. PageSpeed Insights osobno dla telefonu i komputera, rozmiary zdjęć, liczba doładowywanych skryptów.
• Poprawność kodu. Walidator W3C wyłapuje niedomknięte znaczniki i powtórzone identyfikatory, które potrafią psuć zachowanie na starszych przeglądarkach.
• Dostępność. Kontrast, obsługa klawiaturą, widoczny fokus, etykiety pól formularza. Przy części podmiotów to dziś obowiązek prawny, o czym pisałem w tekście o stronach zgodnych z WCAG.
• Użyteczność. Przejście ścieżki klienta od strony głównej do wysłania zapytania, na telefonie i na komputerze. Lista typowych potknięć jest w tekście o tym, co irytuje użytkowników stron.
• Formularze. Wysyłka na docelową skrzynkę, kopia dla nadawcy, sprawdzenie, czy wiadomość nie ląduje w spamie.

4. Wdrożenie

Przeniesienie z adresu roboczego na docelowy bywa najbardziej nerwowym momentem całego procesu, choć trwa najkrócej. Rzeczy, które lubią się tu posypać:

• Blokada indeksowania zostaje włączona. Klasyk. Strona działa, wygląda dobrze i przez trzy miesiące nikt nie rozumie, dlaczego nie ma jej w Google.
• Stare adresy bez przekierowań. Przy przebudowie istniejącego serwisu każdy adres, który miał pozycję w wyszukiwarce, musi dostać przekierowanie na odpowiednik. Inaczej pozycje przepadają razem z ruchem.
• Certyfikat SSL. Po zmianie serwera trzeba go wystawić na nowo i sprawdzić, czy wymusza połączenie szyfrowane. Więcej o tym w tekście o domenie, hostingu i SSL.
• Adresy do zasobów zapisane na sztywno. Zdjęcia i odnośniki wskazujące na adres testowy potrafią przetrwać migrację i wysypać się dopiero, gdy stary serwer zostanie wyłączony.
• Podpięcie narzędzi. Google Search Console, przesłanie mapy witryny, statystyki, powiadomienia o awariach.

Pierwszy tydzień po uruchomieniu warto obserwować raport indeksowania i skrzynkę, na którą idą zapytania z formularza. Potem zaczyna się utrzymanie, które trwa tak długo, jak strona.

Kto za co odpowiada

Częste pytania

Czy można pominąć projekt graficzny? Można, jeśli strona powstaje na gotowym motywie i godzisz się na jego układ. Przy indywidualnym wyglądzie pominięcie tego kroku przenosi wszystkie uwagi na etap realizacji, gdzie poprawki są droższe.

Kto pisze teksty? Domyślnie zamawiający, bo zna swoich klientów i swoją ofertę. Teksty da się też zamówić osobno albo napisać na podstawie nagranej rozmowy. Ważne, żeby ustalić to na początku, bo brak treści zatrzymuje projekt skuteczniej niż cokolwiek innego.

Co się dzieje, gdy w trakcie zmienia się zakres? Zależy od momentu. Dołożenie podstrony przy mapie strony jest kwestią jednej linijki w spisie. To samo po zakodowaniu oznacza nowy typ podstrony, projekt, treść i testy. Dlatego pytam o wszystko na początku, nawet o rzeczy, które wydają się odległe.

Ile trwa cały proces? Najbardziej rozstrzyga o tym treść w drugim etapie. Sama praca po mojej stronie jest przewidywalna, a czekanie na teksty i zdjęcia potrafi wydłużyć projekt kilkakrotnie. Termin ustalam więc razem z harmonogramem dostarczenia treści, nie w oderwaniu od niego.

Jeśli planujesz nową stronę albo przebudowę istniejącej, napisz — przejdziemy przez pierwszy etap w rozmowie, a potem będzie wiadomo, ile pracy jest po której stronie.