Szanowni Państwo, w najbliższych tygodniach nie przyjmuję nowych zleceń. Więcej w tym filmie.

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

Tania strona internetowa? Uważaj na te rzeczy.

Kategorie: Strony internetowe

„Kupiłam tanią stronę internetową i wykonawca zapadł się pod ziemię po opłaceniu faktury”. To tylko jeden z możliwych negatywnych...

Czytaj więcej

Menu na stronie internetowej – przegląd popularnych rozwiązań

Kategorie: Strony internetowe

Nawigacja na stronach internetowych ewoluuje wraz z rozwojem technologii. Kilkanaście lat temu 99% stron internetowych składało się z kolumny...

Czytaj więcej

Zakup strony internetowej – krok po kroku

Kategorie: Strony internetowe

Jeśli planujesz założyć stronę internetową to z tego filmu dowiesz się czego możesz się spodziewać w trakcie współpracy z...

Czytaj więcej

Freelancer WordPress – jak mogę Ci pomóc?

Kategorie: Strony internetowe

Systemy zarządzania treścią stron internetowych (CMS) ułatwiają zarządzanie witryną i pozwalają na jej łatwe aktualizowanie. Samo stworzenie strony oraz...

Czytaj więcej

Jak zabezpieczyć adres e-mail i formularz na stronie internetowej WordPress?

Kategorie: Strony internetowe Przydatne narzędzia

1000+ spamowych maili na minutę? To nie brzmi zbyt dobrze i na pewno nie chcesz doświadczyć takiej sytuacji. W...

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.

Skontaktuj się

 

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

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
Zamknij okno

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

Dostępność WCAG