Omawiam 10 kluczowych cech dobrej strony www – od jasnego celu, przez szybkość ładowania, aż po bezpieczeństwo i możliwość rozwoju.
Dowiesz się:
Znajdziesz również praktyczne wskazówki i narzędzia, które możesz wdrożyć od razu.
To transkrypcja odcinka podcastu – jeśli wolisz czytać, jesteś w dobrym miejscu. Jeśli wolisz słuchać, skorzystaj z odtwarzacza.
17 czerwca 2025
Cześć, nazywam się Kamil Jędryczka i zapraszam Cię do trzeciego odcinka podcastu „Prosto o reklamie w internecie” realizowanego w ramach marki BeFuture. Dzisiaj porozmawiamy o tym, co powinna zawierać dobrze zaprojektowana strona internetowa i na co zwracać uwagę.
Dzisiejszy odcinek jest bezpośrednią kontynuacją odcinka drugiego, w którym rozmawialiśmy o tym, czy Twoja firma potrzebuje strony internetowej. Jeśli jeszcze nie słuchałeś tego odcinka, zachęcam do sprawdzenia go na YouTube, Spotify, Amazon Music lub w formie wpisu na blogu BeFuture.
Zachęcam do lajków, subskrypcji i komentarzy – to pozwala budować zasięgi i rozwijać kanał, szczególnie na początku jego istnienia.
Przygotowałem 10 kluczowych cech strony internetowej, które sprawiają, że może być ona dobra i realizować założone cele. To lista bardzo ogólna, która w poszczególnych branżach będzie wymagała rozszerzenia, ale generalnie stanowi szablon, który można przyłożyć do każdej strony internetowej.
Pierwsza rzecz, nawiązanie do poprzedniego odcinka, jasny, konkretny cel. Strona internetowa ma być po coś. Jeżeli strona internetowa nie ma celu, to jest bez sensu. Samo posiadanie strony po to, żeby posiadać stronę, nic wam nie daje. O tym już mówiłem w poprzednim odcinku, więc nie będę tego bardziej rozwijał, ale generalnie rzecz biorąc pamiętajcie o tym. Musicie wiedzieć, po co tę stronę chcecie mieć.
Prosta i intuicyjna nawigacja. I tutaj taka mała dygresja. Pewnie część z was pamięta, jak Internet robił się coraz bardziej popularny, ale nie było jeszcze tej części Internetu mobilnego. Królowały takie strony, które miały taką konstrukcję, że zajmowały cały ekran. Po lewej było logo, po prawej było menu. Strona nie była w żaden sposób scrollowana, tylko po prostu jeden widok był tej strony. Tam zazwyczaj była informacja typu, nasza firma powstała w 1555 roku, zajmuje się tym, tym i tym. Nikogo to nie interesowało, każdy odruchowo szukał menu, które było zawsze w tym samym miejscu. I to menu kierowało go, pozwalało mu wejść do miejsc, które go interesowały. Ale co ważne, to wymagało przeładowania strony. I w momencie, kiedy pojawił się internet mobilny, ten pierwszy taki prosty i bardzo wolny, okazało się, że to przeładowywanie stron trwa po prostu bardzo długo. Jest to nieefektywne z punktu widzenia użytkownika. Dlatego pojawiła się moda na strony typu OnePage, czyli takie scrollowane, przewijane z góry na dół, gdzie po prostu wszystkie rzeczy, które mamy do zaprezentowania klientowi są w takiej prostej, skróconej formie po prostu pokazane, że nie trzeba przeładowywać tej podstrony. Jaki jest tego skutek?
Skutek jest tego taki, że mamy w tym momencie dwa typy użytkowników. Jedni chcą korzystać z tych klasycznych metod, szukają menu i po tym menu próbują się dostać do konkretnej treści, a drudzy chcą scrollować i na tym scrollowaniu opierają swój sposób nawigowania po witrynie. W związku z powyższym musimy założyć, że użytkownik będzie miał kilka dróg dojścia do celu. Czyli nie tylko wystarczy ułożyć logiczne menu, ale też trzeba zadbać o to, żeby w treści pojawiły się linki, [6:27] żeby pojawiły się nagłówki, które będą informowały, o czym jest dana sekcja. Tak, żeby ten użytkownik scrollowjący też był w stanie dostać się tam, gdzie chce. To jest bardzo ważne i to pozwala pokierować użytkownika po odpowiednich miejscach naszej strony i przekazać mu te informacje, które chcemy mu przekazać
Kiedyś projektowało się osobną witrynę na komputery, osobną na urządzenia mobilne. Dzisiaj możemy to obejść. Wystarczy, że stworzymy jedną stronę responsywną, która automatycznie dostosuje się do szerokości okna. Czyli jeżeli mamy stronę, która jest na komputer, no to mamy układ czterokolumnowy na przykład. W momencie, gdy zwężamy ekran, mamy układ dwukolumnowy i później jak schodzimy już do tych najmniejszej rozdzielczości tych mobilnych, no to mamy układ jednokolumnowy. I w tym momencie wiemy, czy nasza strona jest responsywna i czy ta responsywność jest poprawna. Wystarczy wziąć sobie okno przeglądarki, zmniejszyć je, rozszerzyć, zobaczyć jak ta strona reaguje. Na co zwracam tutaj uwagę? Dwie rzeczy. Pierwsza sprawa, wszystkie elementy klikalne, przyciski itd. one muszą być odpowiednio duże. Dlatego, że jeżeli ktoś będzie korzystał z telefonu, no to on oczywiście musi trafić po prostu w te elementy nawigacyjne palcem i po prostu z tego, żeby mógł z tego korzystać. Sprawa kolejna, ważne, żeby strona była w ten sposób zaprojektowana, żeby nie wychodziły żadne elementy poza ekran. Żeby nie było takiej sytuacji, że można tą stronę przewinąć w bok. Na to zwracamy uwagę. Jeśli się pojawi coś takiego na waszych witrynach w przyszłości, no to skontaktujcie się z osobą, która wam tą stronę wykonywała i to trzeba po prostu poprawić.
Kolejna, czwarta rzecz, szybkość ładowania. Szybkość ładowania z jednej strony jest rzeczą, którą Google bierze pod uwagę w momencie, gdy ustala kolejność wyników wyszukiwania, czyli tak zwane SERPy, a z drugiej strony, z drugiej strony jest to rzecz, która wpływa bardzo na to, czy klient będzie chciał zostać na naszej stronie, czy nie. I jakbyśmy rozmawiali kilka lat temu, to bym powiedział, że tak optymalnie to, żeby strona się załadowała w trzy sekundy, ale dzisiaj ta strona musi się zalogować na pewno poniżej sekundy. I to pokazują wszystkie badania i też takie przyzwyczajenia użytkowników. My jesteśmy nauczeni do tego, że to działa szybko, sprawnie, nie chcemy czekać. I użytkownik ma tak samo. Dokładnie tak samo, jak my. W związku z powyższym, jeżeli będziemy mogli czekać na naszą treść na stronie, on wyjdzie i poszuka innego dostawcy, innego usługodawcy. Po prostu nie będzie zainteresowany. Więc na to zwracamy uwagę. Oczywiście można robić sobie różnego rodzaju testy wydajności. A, jeszcze może szybko, od czego ta wydajność zależy.
Słuchajcie, bardzo istotna jest ilość zdjęć i wielkość zdjęć. Tutaj kompresja, dostosowywanie rozmiarów tych zdjęć do sekcji na stronie, to jest bardzo istotne, na co zwracamy uwagę. Wykorzystywanie pamięci podręcznej przeglądarki, budowanie statycznych wariantów poszczególnych podstron, tak, żeby nie wykonywały się wszystkie skrypty PHP i tak dalej, i tak dalej. Nie chcę wchodzić w kwestie techniczne, bo ta optymalizacja w dużej mierze jest techniczna, ale tak, żebyście mieli ogląd, jakie aspekty mogą się pojawić, no to o tym wspominam. Można testować sobie tą wydajność, ale proszę zwrócić uwagę na jedną rzecz, że to nie jest tak, że te benchmarki wszystkim muszą oczywiście świecić na zielono. Dlatego, że w wielu sytuacjach po prostu to jest nie do zrobienia. Dlaczego jest nie do zrobienia? [10:18] No chociażby sam fakt, że załadowanie recapture’a Gogolowego, czyli takiego mechanizmu, czyli takiego mechanizmu, który zabezpiecza formularz do wysyłki maili, czy do rejestracji przed botami, które mogą próbować go wypełniać, on już jest na tyle, powiedzmy ciężkim skryptem, że Google sam w swoim narzędziu do sprawdzania prędkości stron będzie Wam za to odejmował punkty.
Więc weryfikujemy to sobie, ale naprawdę z głową, bez jakiegoś takiego tam bardzo przesadyzmu. Jakie narzędzia polecam? No oczywiście nie możemy zignorować narzędzia Gogolowego. Ja Wam zrobię rzuty na ekranie tych narzędzi. Bardzo fajny i w mojej ocenie lepszy, jeżeli chodzi o jakoś pomiarów, jest GTmetrix. Jeżeli nie chcecie żadnych zewnętrznych narzędzi, to jak sobie wejdziecie prawym przyciskiem myszy zbadaj, to tam będzie na przykład w Chromie Lighthouse, który też pozwoli Wam zrobić taki audyt wydajności strony
Polecane narzędzia do testowania: Google PageSpeed Insights, GTmetrix, Lighthouse (wbudowany w przeglądarkę Chrome)
Silne pierwsze wrażenie. I tutaj kłania nam się sekcja hero, czyli ten pierwszy ekran, który użytkownik widzi, ten baner, który użytkownik widzi, jak wchodzi na naszą stronę. On musi spełniać dwie cechy. Takie kluczowe. Pierwsza cecha musi być łatwe do zapamiętania i musi być taki na zasadzie efektu wow. OK? A druga sprawa jest taka, że ten element musi posiadać tekst, który od razu nakieruje użytkownika na to, co Wy robicie i co jest najważniejsze (nagłówek H1). U mnie głównym produktem są strony internetowe, to więc jak wejdziecie sobie na BeFuture.pl, to zobaczycie pierwszy podstawowy tekst tworzymy dobre strony internetowe. Czyli od razu informujemy, czym się firma zajmuje. Kiedyś miałem taki taki widok gór, taki filmik i tam wtedy było hasło strony internetowe, które zaprowadzą cię na szczyt, ale w tym momencie w nowej wersji z tego zrezygnowaliśmy.
Przykład: Na beuture.pl główny tekst to „Tworzymy dobre strony internetowe” – od razu informuje o głównym produkcie firmy.
Społeczny dowód słuszności. O czym należy pamiętać? Klient, który kupuje coś od nas, szczególnie ten internetowy od nas nie zna. On nie wie, czy my jesteśmy firmą wiarygodną, jaka jest jakość naszych usług i tak dalej, i tak dalej. Czy produkty, które sprzedajemy są odpowiednie, czy to jest to, czego on oczekuje. To więc w naturalny sposób przy decyzji zakupowej po prostu się boi. To jest normalne. Musimy wprowadzić elementy na naszą witrynę, które będą zmniejszały to ryzyko zakupowe, które pozwolą temu użytkownikowi po prostu dojść do wniosku, że w sumie „to ten jest zadowolony, tamten jest zadowolony”. Jak widzę realizację ich zdjęcia, to to wygląda dobrze.
W związku z powyższym: opinie, referencje, różnego rodzaju certyfikaty, wykonane projekty, przykładowe realizacje, czy w formie zdjęć, czy w formie case’ów, jako takie opisy na stronie, tak jak u nas na przykład to jest. Tego powinno być sporo, ale co jest ważne, znaczy sporo, wystarczająco dużo, może to jest, w sensie nie jedna, tylko więcej i też może to się pojawiać w różnych miejscach, ale co jest ważne, to musi być wiarygodne. Jeżeli macie sobie stworzyć tysiąc, tysiąc może nie, sto opinii, które będą, wszystko OK, polecam, pisane przez nie wiadomo kogo, to nie jest na dłuższą metę wiarygodne. Takich opinii jest bardzo dużo. Jeżeli to będą rzetelne opinie, albo na przykład jakieś fragmenty z listów referencyjnych, które w razie czego, jak klient będzie miał wątpliwości, możecie to wyciągnąć, pokazać, no to wtedy ta wiarygodność będzie zachowana.
Ważne: Musi to być wiarygodne – lepiej mieć kilka rzetelnych opinii niż sto fałszywych.
Kolejna sprawa, wezwanie do działania, wezwanie do akcji, czyli CTA, goal to action. O co chodzi? [14:13] Chodzi o taki jasny komunikat, co użytkownik ma zrobić, typu kup teraz, skontaktuj się z nami, zobacz więcej, tego typu rzeczy. I to trzeba wrzucać w różnych miejscach strony w taki sposób, żeby dawać, co jakiś czas przypominajkę użytkownikowi, że tu jak chcesz to zrobić, no to tu kliknij, tu kup i tak dalej.
Taka ciekawostka, badania pokazały, że jak mamy na przykład baner graficzny, który cały jakby przenosi do danej podstrony, to w sytuacji, gdyby mielibyśmy dwa warianty, [14:42] czy jeden z samym tekstem, ładnym zdjęciem, a drugi dodatkowo jeszcze z takim udawanym przyciskiem kup teraz, to okazuje się, że o wiele więcej osób będzie klikało w ten baner i będzie typowo klikało w ten udawany przycisk. Dlaczego? Bo dostanie jasny komunikat, co ma zrobić. I to jest bardzo ważne, żebyśmy to wdrażali na naszych witrynach i w ogóle w całym naszym marketingu.
Ciekawostka: Badania pokazały, że banery z udawanym przyciskiem (np. „Kup teraz„) generują więcej kliknięć niż same grafiki.
Punkt kolejny, optymalizacja SEO strony. I tu musimy sobie podzielić znowu kwestie na dwa elementy. Pierwszy to są działania SEO na stronie, czyli to, co robicie w ramach waszej witryny, a drugie to jest pozycjonowanie, czyli to, co się dzieje poza waszą stroną i ma teoretycznie wpływać na to, w jakiej kolejności wyświetlicie się w wynikach wyszukiwania.
Z mojego doświadczenia wynika, że jeżeli nie zrobicie dobrze tej pierwszej części na stronie, to startujecie z bardzo dużym deficytem. Powiem nawet więcej, te wszystkie zabiegi pozycjonerskie, one są różnie interpretowane przez Google’a. Jeżeli to będzie zrobione w sposób nieodpowiedni, niezbyt nachalny, to skończy się filtrem – wypadnięcie z wyszukiwarki i tyle z tego będzie. W związku z powyższym, te rzeczy na stronie są bezpieczniejsze, szczególnie na początku, a też potrafią w wielu przypadkach dawać dobre efekty.
Co potrzeba? Przede wszystkim tytuł strony, ten, który pojawia się na górnym pasku. Zaraz za nim nagłówek H1, czyli pierwszy podstawowy nagłówek, który jest na każdej podstronie. Dlaczego to jest ważne? Dlatego, że my tymi nagłówkami, tym tytułem mówimy Google’owi, o czym jest ta strona. Tak jak tytuł książki, o czym jest ta książka. Później mamy nagłówki niższego rzędu, mamy treści, mamy opisy obrazków i tak dalej, i tak dalej. Ale od tego trzeba zacząć. To jest takie naprawdę kluczowa sprawa.
Kiedyś słyszałem taką opinię, że niewykorzystywanie nagłówków to nie jest błąd, tylko to jest wielbłąd.
Bezpieczeństwo, czyli szyfrowanie formularzy, certyfikat SSL oraz kwestie RODO. Co to jest ten certyfikat SSL? To jest ta magiczna zielona kłódeczka, która pojawia się przy stronie. Jeżeli nie widać kłódeczki, bo na przykład obecny Chrome nie pokazuje tego w ten sposób, to tam można sobie do góry przy pasku kliknąć. Ja to pokażę za chwilę na ekranie i jak sobie w to klikniecie, no to będziecie mogli zobaczyć, czy certyfikat SSL jest ważny.
Druga sprawa to są kwestie polityki prywatności i RODO, czyli kwestie formalne i prawne na stronie. To jest wasze bezpieczeństwo, że to macie spełnione. Plus warto wspomnieć również o ciasteczkach, czyli tych plikach, które zapisują się w przeglądarce waszego użytkownika i potrafią i mogą wpływać na to, że my możemy na przykład do nich wysyłać reklamy, bo odwiedzili naszą stronę, mamy zapisane ciasteczko, możemy wysyłać chociażby reklamy przez remarketing Gogolowy. Na te ciasteczka w obecnej sytuacji trzeba się zgodzić. I tutaj polecam takie okienka, które pojawiają się na stronie chociażby z Cookiebota (obecnie: Usermetrics) W każdym bądź razie, w każdym bądź razie dzięki temu możecie co uzyskać? Możecie mieć takie okienko, które raz, że pozwoli użytkownikowi zarządzać tymi rodzajami ciasteczek, a dwa, że wy będziecie mieć spełnione wszystkie warunki formalne, prawne i tak dalej. Te aplikacje też skanują sobie waszą stronę, korygują ewentualnie listę ciasteczek, która jest, także to jest takie trochę bezobsługowe. Instalujecie, wrzucacie, macie.
Polecane rozwiązanie: Cookiebot (info. ostatnio przerzuciłem się na alternatywę w postaci CookieYes ze względu na bardziej korzystny model rozliczeń) – automatyczne skanowanie i zarządzanie ciasteczkami.
I kolejna rzecz, o której warto wspomnieć, to jest dopasowanie strony zarówno pod waszą branżę, pod wasz biznes. Nie, że jakiś tam wiecie piesze z brzegu gotowiec, tylko dopasowanie pod waszą stronę, żeby to było dla waszego klienta odpowiedniej dla was, ale kolejna rzecz to jest kwestia też takiej możliwości rozwoju tej strony.
Czyli musicie zadbać o to, żebyście mogli tą stronę rozwijać we własnym zakresie albo z czymś pomocą, ale żeby to było proste. dodawanie nowych zakładek, rozbudowywanie oferty, zmiana treści, zmiana zdjęć, zmiana kolejności sekcji poszczególnych. Tak, żebyście mogli tego typu rzeczy realizować. Dlatego, że za jakiś czas może się okazać, że wasza firma się rozwija, wprowadziliście nową usługę, no i co? Będziecie stawiać nową stronę, bo się jedna rzecz zmieniła w firmie, no nie będziecie. Więc trzeba o to zadbać, żeby to było proste do wdrożenia, możliwie szybkie i łatwe, no i też tanie. Jakby na to zwracamy uwagę
Uzasadnienie: Firma się rozwija, wprowadza nowe usługi – strona musi nadążać za zmianami.
Jako bonus chciałbym zwrócić uwagę, że marketing to jest coś, co wymaga wiecznej optymalizacji. To nie jest tak, że zrobimy sobie raz daną rzecz, już jakby nie ruszamy tematu. A żeby wiedzieć, jak optymalizować, no musimy mieć jakieś dane. W związku z powyższym, wszelkiego rodzaju formy prowadzenia pomiarów i statystyk na naszej stronie internetowej, to jest coś, co po prostu musimy mieć. I tutaj pierwszym podstawowym narzędziem będzie Google Analytics.
Dobrze jest go zainstalować przez menedżera tagów, bo to po prostu pozwala wam łatwiej, czy napięć zainstalować Menedżera Tagów, a do niego później podpiąć Analytiksa. Po prostu pozwala łatwiej zarządzać – zarówno okienkiem zgody na wykorzystanie ciasteczek lub innymi narzędziami pomiarowymi – na przykład Hotjar, który pozwala wam nagrywać sesje i tworzyć mapy cieplne, czy jesteście w stanie zobaczyć na przykład, czy użytkownicy wiedzą, że mają kliknąć w dane miejsce, co ma wywołać daną akcję, czy na przykład czy czytają wasze treści, tak, czy są odpowiednio zaangażowani i tak dalej, czy ewentualnie trzeba coś zmienić, skorygować, poprzestawiać na stronie.
No jeżeli nie będziecie wiedzieli, jak użytkownicy reagują, to nie oczekujcie, że będziecie w stanie to dobrze poprawić, tak, w związku z powyższym wszelkiego rodzaju statystyki, analizy, też znowu nie do przesady, tak, to nie jest tak, że musicie mieć zaraz 15 aplikacji podpiętych, które wam mierzą ruch na stronie, ale dobrze mieć po prostu jakiś ogląd tego, co się dzieje i dzięki temu faktycznie móc analizować i sprawdzać i optymalizować tą stronę, bo marketing to jest naprawdę ciągła praca.
Polecane narzędzia: Google Analytics (podstawowe statystyki), Google Tag Manager (łatwiejsze zarządzanie), Hotjar (nagrywanie sesji, mapy cieplne).
Ważne: Nie instalujcie 15 aplikacji naraz – wystarczy podstawowy zestaw narzędzi.
10 kluczowych cech dobrej strony internetowej:
To jest uniwersalny zestaw cech dobrej strony internetowej. Pamiętaj – w każdej branży będą pojawiały się elementy dodatkowe.
W razie pytań – zachęcam do skorzystania z bezpłatnej konsultacji.
Następny odcinek: Ranking 10 rzeczy, które powinny znaleźć się jako treść na stronie internetowej.
Zachęcam do: lajkowania i subskrypcji, dodania komentarza, zapisu do newslettera (bez spamu, tylko ważne informacje),
Serdecznie dziękuję za odsłuchanie tego odcinka. Wszystkiego dobrego i do usłyszenia!
Zapisz się do naszego newslettera – otrzymasz informację o nowych odcinkach lub inne wartościowe treści, bez spamu. Dołącz już teraz!
Ładowanie formularza...