Etapy tworzenia strony internetowej: od analizy potrzeb do publikacji

Z jakich etapów składa się tworzenie strony internetowej

Projekt strony składa się z ośmiu etapów ułożonych w stałej kolejności: najpierw ustalenia i plan, potem wygląd i teksty, na końcu budowa, sprawdzenie i uruchomienie. Kolejność nie jest przypadkowa. Każdy następny etap korzysta z tego, co zostało zatwierdzone wcześniej, dlatego zmiana decyzji na późnym etapie cofa prace o kilka kroków.

Dla zamawiającego najważniejsze są trzy informacje o każdym etapie: co otrzyma do obejrzenia, na co ma odpowiedzieć i co musi w tym czasie dostarczyć. Zestawia je poniższa tabela. Podane czasy to obserwacje z naszej praktyki przy typowej stronie firmowej z kilkunastoma podstronami. Nie są normą ani obietnicą - sklep internetowy, serwis w kilku językach albo rozbudowana strona z wieloma oddziałami wymagają odpowiednio więcej czasu.

Część etapów da się prowadzić równolegle. Teksty mogą powstawać w czasie, gdy trwa projekt graficzny, a konfiguracja serwera i systemu zarządzania treścią może zacząć się, zanim zostaną zatwierdzone wszystkie szablony. Nie da się natomiast bez szkody zamienić kolejności decyzji: struktura przed makietami, makiety przed grafiką, grafika i treści przed programowaniem.

Analiza potrzeb - co ustala się przed rozpoczęciem prac

Analiza potrzeb to rozmowa i kilka dni pracy, po których powstaje spisany zakres projektu: do czego strona ma służyć, kto ma na nią trafiać, z ilu podstron się składa i co ma na niej działać. Bez tego dokumentu wykonawca i zamawiający wyobrażają sobie dwie różne strony, a różnice wychodzą dopiero przy odbiorze.

Na tym etapie pytamy przede wszystkim o cel. Strona hydraulika z Łodzi ma doprowadzić do telefonu jeszcze tego samego dnia, strona kancelarii z Krakowa ma przekonać do umówienia rozmowy, a strona producenta mebli z Poznania ma zbierać zapytania od hurtowni. Z celu wynikają dalsze decyzje: jakie podstrony są potrzebne, gdzie stoi numer telefonu, czy potrzebny jest formularz wyceny, kalendarz rezerwacji albo katalog produktów.

Drugi blok ustaleń dotyczy tego, co już istnieje. Jeśli firma ma starą stronę, trzeba wiedzieć, które podstrony przynoszą dziś ruch i zapytania, bo ich adresy i treści należy zachować albo starannie przenieść. Trzeci blok to sprawy organizacyjne: kto po stronie firmy zatwierdza kolejne etapy, w jakim terminie odpowiada na pytania, kto dostarcza teksty i zdjęcia oraz kto ma dostęp do domeny i poczty.

Co zamawiający akceptuje po analizie

Do akceptacji trafia krótki dokument z celami, listą funkcji, zakresem prac, harmonogramem i wykazem materiałów, które ma przekazać firma. Dobrze, gdy przy każdym etapie zapisana jest liczba tur poprawek i czas na zgłoszenie uwag. Jeżeli firma przygotowała wcześniej brief na stronę internetową, analiza przebiega szybciej, ponieważ większość odpowiedzi jest już spisana. Wtedy też rozstrzyga się wybór technologii - różnice między gotowym systemem a rozwiązaniem pisanym na zamówienie opisaliśmy we wpisie o tym, jak wybrać system dla strony firmy.

Struktura serwisu i makiety - plan strony przed projektem

Struktura serwisu to lista wszystkich podstron wraz z adresami i miejscem w menu, a makiety to szkice pokazujące, co i w jakiej kolejności znajdzie się na każdym typie podstrony. Oba dokumenty powstają przed projektem graficznym, ponieważ poprawienie szkicu zajmuje chwilę, a poprawienie gotowej grafiki lub kodu - wiele godzin.

Strukturę układamy na podstawie tego, czego szukają klienci. Każda usługa, którą firma chce pokazać w wyszukiwarce, powinna mieć własną podstronę z własnym tematem, bo jedna zbiorcza podstrona "Oferta" nie odpowie dobrze na kilkanaście różnych pytań. Punktem wyjścia jest więc dobór słów kluczowych i przypisanie ich do konkretnych podstron. Google w swoich podstawowych zaleceniach dla właścicieli witryn radzi, aby adresy podstron zawierały słowa zrozumiałe dla użytkownika zamiast przypadkowych identyfikatorów, a podobne treści grupować w katalogach - opisuje to dokument o podstawach optymalizacji witryn pod kątem wyszukiwarek. Więcej o decyzjach z tego etapu piszemy we wpisie o nowej stronie firmowej pod SEO.

Makiety przygotowuje się zwykle dla strony głównej, podstrony usługi, podstrony kontaktowej i wpisu na blogu, zawsze w dwóch wersjach: na telefon i na komputer. Wersja na telefon nie jest dodatkiem. Google do indeksowania i ustalania pozycji używa mobilnej wersji treści witryny, co opisują sprawdzone metody dotyczące indeksowania zoptymalizowanego pod kątem urządzeń mobilnych. Z tego samego dokumentu wynika, że wersja na telefon powinna zawierać te same treści co wersja na komputer - można je schować w rozwijanych blokach, ale nie wolno ich pominąć.

Przy akceptacji makiet warto przejść drogę klienta: wejście z wyszukiwarki na podstronę usługi, znalezienie ceny lub zakresu, dotarcie do telefonu albo formularza. Jeśli na szkicu trzeba się zastanawiać, gdzie kliknąć, na gotowej stronie będzie tak samo. O tym, jak układ wpływa na wyniki, piszemy szerzej w tekście UX a SEO.

Projekt graficzny - wygląd strony do zatwierdzenia

Projekt graficzny to gotowy obraz strony: kolory, kroje pisma, zdjęcia, ikony i wygląd każdego elementu, nałożone na zatwierdzone wcześniej makiety. Zamawiający dostaje do obejrzenia najpierw stronę główną, a po jej akceptacji pozostałe szablony podstron, w wersji na telefon i na komputer. Strona główna ustala styl całego serwisu, więc dopóki nie jest zatwierdzona, projektowanie kolejnych podstron byłoby pracą na próbę.

Na co zwrócić uwagę przy akceptacji grafiki

Przy ocenie projektu łatwo skupić się na tym, czy strona się podoba, a pominąć to, czy da się z niej wygodnie korzystać. Warto sprawdzić czytelność tekstu na telefonie, wielkość przycisków pod palcem oraz kontrast liter względem tła. Wytyczne dostępności WCAG, czyli międzynarodowy standard opracowany przez organizację W3C, podają w kryterium dotyczącym minimalnego kontrastu konkretne wartości: stosunek kontrastu co najmniej 4,5 do 1 dla zwykłego tekstu i co najmniej 3 do 1 dla dużego tekstu. Jasnoszary napis na białym tle wygląda elegancko na dużym monitorze projektanta, ale w słońcu na ekranie telefonu bywa nieczytelny.

Drugą sprawą jest prawdziwa treść. Projekt wypełniony przykładowym tekstem i zdjęciami z banku zdjęć wygląda inaczej niż strona z rzeczywistymi nazwami usług i fotografiami z realizacji. Nazwa usługi, która w projekcie mieści się w jednym wierszu, w rzeczywistości może zająć trzy. Dlatego dobrze, gdy grafik ma do dyspozycji przynajmniej robocze nagłówki i kilka prawdziwych zdjęć.

Treści - kto pisze teksty i kiedy muszą być gotowe

Treści powinny być gotowe przed rozpoczęciem programowania albo najpóźniej w jego trakcie, a odpowiedzialność za nie trzeba ustalić już w analizie: pisze je firma, wykonawca albo obie strony wspólnie. Z naszej praktyki wynika, że to właśnie ten etap najczęściej wstrzymuje cały projekt, ponieważ teksty i zdjęcia odkłada się na koniec.

Na komplet treści składają się nie tylko opisy usług. Potrzebne są też teksty strony głównej, podstrony o firmie i kontaktowej, odpowiedzi na częste pytania klientów, treść komunikatów formularza, dokumenty takie jak polityka prywatności i regulamin oraz zdjęcia z opisami. Dokumenty prawne warto skonsultować z prawnikiem, ponieważ ich treść zależy od tego, jakie dane firma zbiera i w jaki sposób je przetwarza.

Google w swoich podstawowych zaleceniach opisuje, czego oczekuje od treści: tekst ma być czytelny, poprawny, podzielony na akapity i sekcje z nagłówkami, oryginalny i aktualny. Każda podstrona powinna mieć unikalny, zwięzły tytuł, który trafnie opisuje jej zawartość, oraz krótki opis, z którego wyszukiwarka może skorzystać przy wyświetlaniu wyniku. Zdjęcia warto umieszczać obok tekstu, którego dotyczą, i opatrywać tekstem alternatywnym, czyli krótkim opisem tego, co przedstawiają. Zasady pisania tych elementów omawiamy we wpisie o tytule strony i meta opisie, a kolejność prac nad tekstami w tekście o tym, jak ułożyć plan treści na stronę firmy.

Co zamawiający akceptuje w treściach

Do akceptacji trafiają teksty poszczególnych podstron w dokumencie tekstowym, jeszcze przed wstawieniem ich na stronę. Zamawiający sprawdza przede wszystkim zgodność z rzeczywistością: zakres usług, obszar działania, godziny pracy, nazwy stanowisk, dane kontaktowe i wszystko, co dotyczy cen lub warunków współpracy. Styl łatwo poprawić później, natomiast błędna informacja o usłudze, której firma nie świadczy, trafi do klientów i do wyszukiwarki.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Programowanie - jak powstaje wersja testowa strony

Programowanie to zamiana zatwierdzonych projektów i treści w działającą stronę, którą zamawiający ogląda pod tymczasowym adresem, zanim zobaczą ją klienci. Na tym etapie nie zapadają już decyzje o wyglądzie - programista odtwarza to, co zostało zaakceptowane, i uruchamia funkcje spisane w analizie.

Prace obejmują przygotowanie serwera i systemu zarządzania treścią, zbudowanie szablonów podstron, wprowadzenie tekstów i zdjęć, uruchomienie formularzy oraz podłączenie narzędzi pomiarowych. W tym czasie ustawia się także elementy niewidoczne dla odwiedzającego, a ważne dla wyszukiwarki: tytuły i opisy podstron, adresy kanoniczne, mapę witryny oraz plik robots.txt, czyli plik z instrukcjami dla robotów wyszukiwarek.

Zamawiający powinien w tym czasie otrzymać dostęp do panelu i spróbować samodzielnie zmienić fragment tekstu, podmienić zdjęcie oraz dodać wpis. Jeśli obsługa okazuje się niewygodna, łatwiej to poprawić przed publikacją niż po niej.

Dlaczego wersja testowa musi być zamknięta przed wyszukiwarkami

Wersja testowa zawiera niedokończone treści i powiela teksty, które za chwilę znajdą się pod docelowym adresem, dlatego nie powinna trafić do wyników wyszukiwania. Najpewniejszym zabezpieczeniem jest hasło dostępu do całej wersji testowej. Drugą metodą jest dyrektywa noindex, którą według dokumentacji Google poświęconej blokowaniu indeksowania za pomocą tagu noindex można umieścić w kodzie strony albo w nagłówku odpowiedzi serwera.

<meta name="robots" content="noindex">

Ta sama dokumentacja zwraca uwagę na istotny szczegół: robot musi mieć możliwość odczytania strony, aby zobaczyć dyrektywę. Jeżeli strona jest jednocześnie zablokowana w pliku robots.txt, robot nie dotrze do znacznika i adres nadal może pojawić się w wynikach. Różnice między tymi mechanizmami wyjaśniamy we wpisie canonical, noindex i robots.txt.

Testy - co sprawdza się przed odbiorem strony

Testy polegają na przejściu całej strony tak, jak zrobi to klient, oraz na kontroli elementów technicznych, których goście nie widzą. Ich wynikiem jest lista usterek z opisem miejsca i sposobu wystąpienia, a następnie potwierdzenie, że każda z nich została usunięta.

Wykonawca sprawdza stronę we własnym zakresie, ale zamawiający zna swoją firmę lepiej i dostrzeże rzeczy, których nikt inny nie zauważy: nieaktualny numer telefonu oddziału, pomylone zdjęcia realizacji, brak usługi wprowadzonej niedawno do oferty. Dlatego przegląd po stronie firmy jest konieczny i powinien objąć każdą podstronę, najlepiej na własnym telefonie.

• Każdy formularz został wysłany próbnie, a wiadomość dotarła na właściwą skrzynkę i nie trafiła do spamu.
• Numery telefonów na telefonie uruchamiają połączenie, a adresy prowadzą do mapy.
• Wszystkie odnośniki w menu, stopce i treści prowadzą do istniejących podstron.
• Każda podstrona ma własny tytuł i opis, a zdjęcia mają tekst alternatywny.
• Strona wygląda poprawnie na telefonie, tablecie i komputerze oraz w kilku przeglądarkach.
• Nieistniejący adres wyświetla czytelną stronę błędu z drogą powrotu do serwisu.
• Baner zgód na pliki cookie działa, a polityka prywatności i regulamin są dostępne ze stopki.
• Narzędzie pomiarowe rejestruje wejścia oraz wysłanie formularza.

Jak sprawdzić szybkość strony

Szybkość można zmierzyć samodzielnie w narzędziu PageSpeed Insights, dostępnym bez logowania pod adresem pagespeed.web.dev. Na ekranie startowym znajduje się jedno pole na adres strony i przycisk uruchamiający analizę. Po chwili narzędzie pokazuje wyniki osobno dla telefonów i komputerów.

Najważniejsze są trzy podstawowe wskaźniki internetowe, znane pod angielską nazwą Core Web Vitals. Zgodnie z opisem w serwisie web.dev LCP mierzy szybkość wczytania największego elementu i jest dobry przy wartości 2,5 sekundy lub mniejszej, INP mierzy czas reakcji na działanie użytkownika i jest dobry przy 200 milisekundach lub mniej, a CLS mierzy stabilność układu i jest dobry przy wartości 0,1 lub mniejszej. Trzeba jednak pamiętać o jednym ograniczeniu: dane od rzeczywistych użytkowników pojawiają się dopiero wtedy, gdy strona ma ruch, więc nowa strona pokaże początkowo tylko pomiar laboratoryjny, wykonany w sztucznych warunkach. Sposób czytania wyników opisaliśmy we wpisie o tym, jak czytać raport PageSpeed Insights.

Publikacja - co dzieje się w dniu uruchomienia i po nim

Publikacja to przeniesienie zatwierdzonej wersji testowej pod docelowy adres i wykonanie kilku czynności, od których zależy, czy wyszukiwarka i klienci znajdą nową stronę. Sama zmiana trwa krótko, ale wymaga przygotowania i obecności obu stron, dlatego termin warto wyznaczyć na początek tygodnia, a nie na piątkowe popołudnie.

1. Zdjęcie blokad z wersji testowej

   Usuwa się hasło, dyrektywę noindex oraz wpisy w pliku robots.txt potrzebne tylko na czas prac. Pozostawienie blokady sprawia, że strona działa, ale nie pojawia się w wynikach wyszukiwania.

2. Włączenie przekierowań ze starych adresów

   Jeśli nowa strona zastępuje starą, każdy dotychczasowy adres powinien prowadzić do swojego nowego odpowiednika.

3. Kontrola po uruchomieniu

   Ponownie sprawdza się formularze, certyfikat bezpieczeństwa, pocztę firmową i pomiar ruchu, tym razem pod docelowym adresem.

4. Zgłoszenie strony w Search Console

   Dodaje się mapę witryny i sprawdza, czy Google może odczytać najważniejsze podstrony.

5. Przekazanie dostępów i szkolenie

   Zamawiający otrzymuje dostępy do panelu, serwera i narzędzi oraz krótkie omówienie codziennej obsługi.

Przekierowania przy wymianie starej strony

Przy zmianie adresów Google zaleca przygotowanie listy starych adresów, przypisanie każdemu nowego odpowiednika i ustawienie trwałych przekierowań po stronie serwera. Opisuje to dokument o przenoszeniu witryny. Wynika z niego kilka praktycznych zasad: nie należy kierować wielu starych adresów na jedną niepasującą stronę, na przykład na stronę główną, trzeba unikać łańcuchów przekierowań, a same przekierowania warto utrzymywać co najmniej przez rok. Dokument uprzedza też, że w czasie przenoszenia widoczność w wynikach może się chwilowo wahać, a małe i średnie witryny potrzebują zwykle kilku tygodni, zanim wyszukiwarka przetworzy zmiany.

Kancelaria z Krakowa, która wymieni stronę i nie ustawi przekierowań, straci wejścia z odnośników w katalogach, wizytówkach i starych wiadomościach - wszystkie poprowadzą do strony błędu. Różnice między rodzajami przekierowań wyjaśniamy we wpisie przekierowanie 301 a 302, a przy większych serwisach tę część prac prowadzimy w ramach usługi migracji domeny i hostingu.

Gdzie sprawdzić, czy Google widzi nową stronę

Służy do tego Search Console, narzędzie Google dla właścicieli witryn, dostępne bez opłat po potwierdzeniu własności strony. Mapę witryny przesyła się w raporcie "Mapy witryn" w menu po lewej stronie. Zgodnie z dokumentacją o przygotowywaniu i przesyłaniu mapy witryny powinna ona zawierać pełne adresy tych podstron, które mają pojawiać się w wynikach, a jej adres można dodatkowo wskazać w pliku robots.txt.

Pojedynczą podstronę sprawdza się w narzędziu do sprawdzania adresów URL: pełny adres wpisuje się w pasku wyszukiwania na górze ekranu Search Console. Wynik pokazuje, czy strona jest w indeksie Google, a pomoc Search Console opisuje dwa widoki: "Indeks Google" oraz "Test wersji opublikowanej", który bada aktualny stan strony. Na ekranie wyniku znajduje się także przycisk służący do zgłoszenia prośby o zindeksowanie. Liczba takich próśb jest ograniczona, dlatego przy wielu podstronach pomoc zaleca przesłanie mapy witryny. Pozytywny wynik testu nie oznacza, że strona na pewno pojawi się w wynikach.

Z oceną efektów warto poczekać. Google w swoich podstawowych zaleceniach podaje, że skutki zmian bywają widoczne po kilku godzinach, ale mogą też wymagać miesięcy, i radzi odczekać kilka tygodni przed wyciąganiem wniosków. Gdy po tym czasie ważne podstrony nadal nie pojawiają się w wynikach, pomocny będzie wpis o tym, dlaczego Google nie indeksuje strony.

W których momentach projekt strony najczęściej się opóźnia

Opóźnienia powstają najczęściej na styku etapów, czyli tam, gdzie jedna strona czeka na materiał lub decyzję drugiej. Z naszej praktyki wynika, że sama praca grafika i programisty rzadko wydłuża harmonogram - znacznie częściej robią to brakujące teksty, przeciągające się akceptacje i zmiany zakresu w trakcie prac.

Brakujące treści, zdjęcia i dostępy

Najczęstszą przyczyną przestoju są materiały, które miała dostarczyć firma. Opisy usług wymagają czasu specjalistów, którzy mają własne obowiązki, zdjęcia z realizacji trzeba dopiero wykonać, a certyfikaty i referencje odszukać. Osobnym kłopotem są dostępy: do panelu domeny, serwera i poczty. Zdarza się, że domenę rejestrował dawno temu były pracownik albo poprzedni wykonawca i odzyskanie hasła trwa dłużej niż cały etap graficzny. Dlatego listę materiałów i dostępów warto skompletować już po analizie, a nie tuż przed publikacją.

Akceptacje i kolejne tury poprawek

Drugim źródłem opóźnień jest czas oczekiwania na odpowiedź. Projekt wysłany do akceptacji leży w skrzynce, bo osoba decyzyjna jest na urlopie albo chce jeszcze zapytać o zdanie kilka osób. Potem uwagi przychodzą w częściach i każda część uruchamia nową turę poprawek. Pomaga ustalenie z góry terminu na zgłoszenie uwag oraz zasady, że po jego upływie etap uznaje się za zatwierdzony albo harmonogram przesuwa się o czas zwłoki.

Zmiana zakresu w trakcie prac

Trzecią przyczyną są pomysły, które pojawiają się po zatwierdzeniu wcześniejszych etapów: dodatkowa wersja językowa, kalkulator wyceny, strefa klienta, kolejne podstrony oddziałów. Każdy z nich jest uzasadniony, ale dodany w trakcie programowania wymaga powrotu do struktury, makiet i grafiki. Rozsądniej jest zapisać takie pomysły jako drugi etap rozwoju i uruchomić stronę w zatwierdzonym kształcie.

Przeszkody w dniu publikacji

Ostatnia grupa to sprawy techniczne ujawniające się przy uruchomieniu: zmiana ustawień domeny, która potrzebuje czasu na rozejście się w sieci, poczta firmowa powiązana z dotychczasowym serwerem, brak listy starych adresów do przekierowania albo blokada wyszukiwarek pozostawiona po wersji testowej. Żadna z tych przeszkód nie jest trudna, o ile zostanie przewidziana wcześniej. Pośpiech w ostatnim tygodniu najczęściej odbija się na testach, a ich skrócenie kończy się zwykle niedziałającym formularzem albo brakiem przekierowań.

Kiedy warto skorzystać z pomocy

Prostą stronę wizytówkę da się przygotować samodzielnie. Wsparcie jest potrzebne zwłaszcza wtedy, gdy nowa strona zastępuje starą, która ma ruch z wyszukiwarki, gdy serwis ma wiele podstron usług lub lokalizacji albo gdy ma sprzedawać i przyjmować płatności. W takich projektach błędy w strukturze i przekierowaniach kosztują najwięcej. Zakres naszych prac opisujemy na stronie usługi tworzenie stron, a układ i wygodę korzystania z serwisu omawiamy przy usłudze projektowanie UX. Po uruchomieniu strona wymaga dalszej pracy nad widocznością, czym zajmują się nasze usługi SEO.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl