Szanowni Państwo, do 16.07 jestem na urlopie. Na wszystkie maile odpowiem po powrocie.

Google Partner arturkosinski.pl
Skontaktuj się
Wyszukaj na stronie...
Zamknij wyszukiwarkę

Co umieścić w sekcji above the fold strony internetowej

Ostatnia aktualizacja treści Ostatnia aktualizacja: 28 grudnia 2021

Jeśli planujesz zlecić komuś budowę strony internetowej lub zrobić ją samodzielnie, sprawdź moje wskazówki odnośnie wyglądu i treści, które powinny być zawarte w sekcji above the fold.

Co umieścić w sekcji above the fold strony internetowej 01

Z tego artykułu dowiesz się:

  • co to jest sekcja above the fold strony internetowej
  • co umieścić w above the fold na stronie głównej
  • co umieścić w above the fold na podstronach
  • sekcja above the fold na różnych urządzeniach

Co to jest sekcja above the fold strony internetowej

Sekcję above the fold zwykłem nazywać na własny użytek intro strony internetowej. Intro strony może wywoływać skojarzenia z animacjami na stronach, wykonywanymi w technologii Flash, które były bardzo popularne na stronach internetowych mniej więcej w latach 2005 – 2010. Pamiętam, że to właśnie od animacji i stron we flashu zacząłem swoją przygodę z tworzeniem stron internetowych.

Jednak po skutecznym wyparciu technologii flash z branży projektowania stron, aktualnie jako intro (a więc i sekcję above the fold) należy rozumieć pierwszy ekran (widok) strony internetowej, który widzimy po wejściu na nią.

Co umieścić w sekcji above the fold strony internetowej 03

Jeśli mówimy o sekcji above the fold strony internetowej, to należy pamiętać, że należy rozróżnić ten widok zarówno strony głównej, jak i podstron, ponieważ to właśnie podstrony mogą zbierać najwięcej ruchu na zapytania typu long tail z Google (sprawdź przy okazji moją ofertę pozycjonowanie stron Olsztyn). Warto więc przygotować pierwszy ekran strony w optymalny sposób w obydwu tych miejscach. Sprawdź teraz moje rekomendacje na temat tego, co należy umieścić w sekcji above the fold strony internetowej.

Co umieścić w above the fold na stronie głównej

Niezależnie od tego, czy mówimy o stronie głównej, czy podstronach, w sekcji above the fold koniecznie powinno znaleźć się nasze logo, które jest podlinkowane do strony głównej serwisu, a także (choć to już przestaje być oczywiste) nawigacja, czyli menu strony. W górnym pasku (headerze) strony można też nieraz spotkać:

  • ikony mediów społecznościowych (choć te zalecam umieszczać niżej, aby nie odciągać użytkowników od naszej strony),
  • główny kontakt – numer telefonu (zadbaj, aby był klikalny przynajmniej na urządzeniach mobilnych) albo adres email (jeśli jest klikalny, to zadbaj, by był zabezpieczony przed spamem)
  • przycisk CTA, np. Szybka wycena lub coś podobnego (stosuj tylko, jeśli masz na to miejsce)

W sekcjach above the fold na stronach głównych nowoczesnych serwisów internetowych zwykle widzimy piękne duże elementy multimedialne (zdjęcia, slidery, wideo), które wypełniają cały ekran naszego urządzenia. Jest to słuszne podejście i z pewnością wywoła efekt „wow” u naszego odbiorcy, o ile nie załadujemy w tym miejscu obrazka, który waży kilka megabajtów i wpłynie negatywnie na szybkość ładowania naszej strony internetowej.

Warto wspomnieć, że pasek nawigacyjny z logo może być nałożony na tło graficzne / wideo, a więc niekoniecznie musi występować np. na białym tle. Jeśli zamierzamy zastosować takie rozwiązanie, musimy upewnić się, że logo i elementy nawigacyjne będą na pewno czytelne, gdy zostaną nałożone na zdjęcie lub wideo w tle.

Poza elementem multimedialnym, który należy rozumieć jako zdjęcie w tle, slider (czyli zmieniające się zdjęcia) lub wideo, w sekcji above the fold na stronie głównej koniecznie musimy zawrzeć duży nagłówek, który będzie w prosty, jednoznaczny sposób informował czym się zajmuje nasza firma oraz jakie korzyści będzie z tego miał nasz odbiorca. Przykładowo ja na swojej stronie stosuję duży nagłówek „Od 2010 roku pomagam firmom zdobywać klientów przez internet”. Taki nagłówek pokazuje moje doświadczenie (od 2010 to już sporo) oraz korzyści płynące ze współpracy ze mną (nowi klienci dla Twojej firmy).

Kolejnym elementem w sekcji above the fold, który nie jest wymagany, ale może być pomocny, to dodatkowe zdanie opisowe, które rozwija nasz główny nagłówek, np. trochę bardziej szczegółowo opisuje naszą ofertę. W moim przypadku jest to np. „Tworzę strony i sklepy internetowe oraz prowadzę skuteczne kampanie reklamowe w internecie. Dzielę się praktyczną wiedzą w formie darmowych porad wideo i artykułów dla przedsiębiorców.”

Aby nie przytłaczać odbiorcy zbyt dużą liczbą informacji w sekcji above the fold, nie powinniśmy przesadzać z ilością tekstu. Powinno to być zrobione w taki sposób, aby użytkownik w ciągu 2-3 sekund był w stanie dowiedzieć się, o co chodzi na danej stronie internetowej. Jeśli uzna, że to tematyka, której szukał, powinniśmy teraz pokazać mu jaką akcję polecamy mu wykonać. Najlepszym rozwiązaniem jest wykorzystanie tu dużego guzika akcji (CTA), w którym kierujemy klienta do innej podstrony, kontaktu, formularza, itd.

W mojej ocenie, na bazie ponad 10-letniego doświadczenia w tworzeniu stron internetowych, to już wszystko, co powinniśmy wyświetlać w intro (sekcji above the fold) na stronie internetowej. Podsumowując, będzie to:

  • pasek nawigacyjny z logo, menu oraz innymi elementami opcjonalnymi
  • element multimedialny (np. zdjęcie w tle, slider, wideo)
  • duży nagłówek prezentujący temat i korzyści dla klienta
  • mniejszy nagłówek opisujący ofertę
  • przycisk CTA

Jeżeli udało się przez nasze intro zaciekawić użytkownika na tyle, że kliknął w przycisk lub zjechał w dół, możemy uznać to za sukces. Warto wspomnieć, że możesz monitorować takie rzeczy np. w nagraniach sesji narzędzia Hotjar.

Co umieścić w intro na podstronach

Podstrony w naszym serwisie różnią się zwykle od strony głównej. O ile sekcja above the fold na stronie głównej powinna robić efekt wow przez zawarte multimedia i design, o tyle na podstronach powinniśmy bardzo szybko pokazać użytkownikowi odpowiedź na jego pytanie.

268272736 1943486785824534 9029333234830917012 n

Należy pamiętać, że nasze podstrony mogą zbierać dużo ruchu z wyszukiwarki Google, na tematy, które poruszają (szczególnie, jeśli zainteresujemy się usługą pozycjonowania stron). Powiedzmy, że ktoś wpisuje w Google frazę „jak być wyżej w Google” i widzi na pierwszym miejscu link do mojego artykułu. Czy w takiej sytuacji powinien na tej podstronie zobaczyć efektowne intro, grafiki, itd? W mojej ocenie nie. Powinien jak najszybciej zobaczyć odpowiedź na swoje pytanie. Dobrze by było pokazać też użytkownikowi, w jakim miejscu naszego serwisu się znajduje. Wykonać do możemy za pomocą tzw. nawigacji okruszkowej – breadcrumbs.

Co umieścić w sekcji above the fold strony internetowej 05

Co więc należy pokazać w sekcji above the fold na podstronach naszego serwisu?

  • główny pasek nawigacyjny (header) – najczęciej ten sam, co na stronie głównej
  • breadcrumbs, czyli menu okruszkowe, w którym pokazujemy użytkownikowi w którym miejscu strony się znalazł
  • duży, wyraźny tytuł danej podstrony
  • odpowiedź na pytanie (np. w formie wideo) lub zajawkę odpowiedzi w formie wstępu do artykułu.

Sekcja above the fold na różnych urządzeniach

Warto mieć na uwadze, że intro naszej strony internetowej może wyglądać różnie na różnych urządzeniach. Każdy wyświetlacz ma inną sekcję above the fold i niestety musimy się z tym pogodzić.

Co umieścić w sekcji above the fold strony internetowej 02

Zalecam potestowanie swoich sekcji above the fold na różnych urządzeniach – komputerach, telefonach, tabletach, Smart Watch, Smart TV, itd. Jeśli na jakiejś rozdzielczości nasze treści są ucięte, nie wyświetlają się poprawnie lub stwierdzimy jakieś inne odstępstwa od zaproponowanych w tym artykule elementów, skontaktujmy się z wykonawcą swojej strony internetowej, aby wprowadzić stosowne usprawnienia.

Mam nadzieję, że wskazówki z tego artykułu były dla Ciebie przydatne. Jeśli po przeczytaniu tego tekstu jesteś zainteresowany zleceniem mi wykonania strony internetowej dla Twojej firmy, skontaktuj się ze mną.

Masz pytania na ten lub inny temat?

Skontaktuj się

Zobacz także

UX – Co to jest User Experience?

Kategorie: Strony internetowe

Niezależnie od tego, czy klienta przywiodła do nas nasza dopracowana strategia marketingowa, czy też łut szczęścia – powinno zależeć...

Czytaj więcej

Strona typu one page, single page – co to jest?

Kategorie: Strony internetowe

Jeżeli interesuje Cię odpowiedź na pytanie co to jest strona internetowa, czy też aplikacja typu one page lub single page,...

Czytaj więcej

Wtyczki WordPress – poznaj moje Top 5

Kategorie: Strony internetowe Przydatne narzędzia

Jeśli posiadasz stronę internetową na WordPress (lub planujesz zlecić komuś jej stworzenie), zapoznaj się koniecznie z moimi rekomendacjami na...

Czytaj więcej

WordPress – instrukcja zarządzania edytorem treści

Kategorie: Strony internetowe

Jeśli planujesz zlecenie stworzenia strony internetowej i nie wiesz jakiego systemu CMS użyć do jej zarządzania, to zapraszam Cię...

Czytaj więcej

Jakie dane dostępowe do strony www / sklepu powinieneś posiadać jako właściciel

Kategorie: Strony internetowe E-commerce

 Jakie dane do strony powinieneś otrzymać od wykonawcy? Posiadanie kompletnych danych dostępowych do swojej strony internetowej jest bardzo...

Czytaj więcej
strony www olsztyn

Rozważasz współpracę ze mną?

Sprawdź, dlaczego warto.

Bezpośredni kontakt
Rozwiń informację
Współpracowałeś kiedyś z agencją i wiesz jak ciężko się komunikować z supportem? U mnie jest inaczej. Wykonuję osobiście większość prac i kontaktujesz się tylko ze mną.
Działania, które przynoszą efekty
Rozwiń informację
Przez lata testowałem (i nadal to robię) różne rozwiązania by skupić się na tych, które po prostu działają.
Szybkie terminy realizacji
Rozwiń informację
Większość zleceń wykonuję przed zadeklarowanym terminem. Nie obiecuję gruszek na wierzbie!
Transparentność
Rozwiń informację
Przekazuję wszelkie dostępy do stron internetowych, kont reklamowych, analityki. Rozliczenia ze mną są klarowne, każda oferta opisana jest w sposób, z którego jasno wynika podział mojego wynagrodzenia oraz opcji dodatkowych (jak płatne wtyczki do stron internetowych, czy budżety reklamowe w kampaniach marketingowych).
Jakość agencji w cenie freelancera
Rozwiń informację
Wąska specjalizacja w konkretnych rozwiązaniach internetowych (tworzenie stron i sklepów internetowych WordPress, marketing online w ekosystemie Google, marketing wideo w internecie) pozwala realizować skuteczne usługi niższym kosztem niż duże firmy.
Ciągły rozwój
Rozwiń informację
Od 2010 roku, kiedy wykonałem pierwsza stronę internetową, stale podnoszę kwalifikacje w obszarach swojej specjalizacji poprzez najróżniejsze kursy, szkolenia, grupy branżowe, itd.
Darmowa dawka wiedzy
Rozwiń informację
Dzielę się wiedzą, doświadczeniem i przydatnymi wskazówkami na blogu i kanale YouTube za darmo - sprawdź i subskrybuj kanał oraz newsletter. Zobacz także kurs płatny - wykład mp3 na temat podstawowych form zdobywania klientów przez internet.
Certyfikowany ekspert
Rozwiń informację
Moja wiedza z zakresu prowadzenia kampanii reklamowych potwierdzona jest certyfikatami Google Ads z różnych kategorii oraz statusem Google Partner.
Bogate doświadczenie
Rozwiń informację
Współpracowałem łącznie z kilkoma setkami firm i osób prywatnych, organizacjami małymi i dużymi, ministerstwami, związkami sportowymi, firmami zagranicznymi, itd.
Wszystko w jednym miejscu
Rozwiń informację
Od budowy strony internetowej, przez skuteczne formy marketingu po analitykę i optymalizację działań - wszystko u jednego, solidnego dostawcy.
Sztuczna inteligencja
Rozwiń informację
Blisko 15-letnie doświadczenie w branży internetowej łączę z najnowszymi osiągnięciami sztucznej inteligencji, by dostarczać usługi na najwyższym poziomie.

Skontaktuj się

 

newsletter

Zapisz się na mój newsletter i odbierz ebook
„10 cech skutecznej strony internetowej”.

Odbiorcy mojego newslettera otrzymują cyklicznie darmowe poradniki, ciekawostki, ostrzeżenia przez oszustwami oraz nowości z branży internetowej.

Poznaj opinie moich Klientów

referencje Artur Kosiński 2

Z przyjemnością rekomenduję firmę Pana Artura jako bardzo profesjonalnego dostawcę rozwiązań internetowych opartych na WordPress. Rozpoczęliśmy od prostych stron typu landing page. Byliśmy tak bardzo zadowoleni z każdego kolejnego projektu, że zdecydowaliśmy się współpracować gdziekolwiek jest to możliwe, m.in. przy optymalizacji, utrzymaniu, projektowaniu, itd.

Filip, crescendoapp.com
referencje artur kosinski

Z firmą Pana Artura prowadzimy stałą współpracę przy promocji naszych gabinetów kosmetycznych. Od czasu rozpoczęcia współpracy widzimy znaczny wzrost ilości nowych klientów. Polecam wszystkim firmom, które chcą rozwinąć skrzydła.

Kasia, chimera.olsztyn.pl
referencje Artur Kosiński 1

Współpraca między naszymi firmami rozpoczęła się w 2015 roku, trwa do dzisiaj i odbywa się online. Zakres współpracy obejmuje tworzenie wielu stron www, pozycjonowanie strony i projekty graficzne. Wszystkie usługi były realizowane terminowo i cechowały się wysoką jakością.

Steve, treatmed.pl
referencje-miejskie-ziele

Pan Artur nigdy nie użył słów “nie da się”, sam zaproponował najbardziej optymalne rozwiązania i możliwości. Współpracując miałam poczucie pełnego wsparcia i bezpieczeństwa.

Małgorzata, miejskieziele.pl

Masz pytania? Skontaktuj się ze mną.

Przejdź do kontaktu

Luźniejsze treści

Blisko 15-letnie doświadczenie w branży internetowej łączę z najnowszymi osiągnięciami sztucznej inteligencji, by dostarczać usługi na najwyższym poziomie.

Zamknij okno

Zapisz się na mój newsletter i otrzymuj więcej darmowych materiałów.

Dostępność WCAG