Google Partner arturkosinski.pl
Wycena online
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ą.

Zobacz także

Przegląd treści na stronie internetowej – dlaczego i kiedy warto go robić?

Kategorie: Strony internetowe

W tym artykule chciałbym zwrócić Twoją uwagę na ważne zagadnienie, jakim jest przegląd i aktualizacja treści na stronie internetowej....

Czytaj więcej

Jak sprawdzić czy Twoja strona jest responsywna?

Kategorie: Strony internetowe

Jeśli posiadasz stronę www lub planujesz zlecić jej stworzenie – upewnij się, że jest / będzie ona responsywna. Z...

Czytaj więcej

Aktualizacje WordPress – jak i dlaczego musisz je robić

Kategorie: Strony internetowe

Cześć, jeśli posiadasz lub planujesz założyć stronę na WordPressie to koniecznie zapoznaj się z tematem aktualizacji tego systemu. W tym...

Czytaj więcej

Jak poprawnie umieszczać logo na stronie internetowej?

Kategorie: Strony internetowe

Jeśli posiadasz stronę internetową lub dopiero planujesz ją założyć, koniecznie zadbaj o poprawność dodania logo firmowego w górnej części strony. Z tego...

Czytaj więcej

Dlaczego moja strona nie wyświetla się w Google?

Kategorie: Strony internetowe

Posiadasz stronę internetową, ale nie jest ona widoczna w Google? Sprawdź moje wskazówki co zrobić, aby Twoja strona była...

Czytaj więcej

Zapisz się na mój newsletter i otrzymuj darmowe porady oraz informacje o promocjach.

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