Az újságszerkesztők jóval a web megjelenése előtt rájöttek erre. Az olvasásra érdemes történet a fizikai hajtás fölé kerül. Minden, ami alatta van, a továbblapozás döntésével versenyez. Egy weboldalon ugyanez az elv érvényes arra az első nézetre, amelyet a látogató görgetés előtt lát.
Az above the fold (hajtás feletti rész) a weboldalnak az a része, amely az oldal első betöltésekor látható a böngészőablakban, mielőtt a látogató egyáltalán görgetne. Ez az oldalnak az egyetlen szakasza, amelyet minden látogató lát. Minden, ami alatta van, ki kell érdemelje a görgetést. A kifejezés a nyomtatásból ered: az újságosstandon félbehajtott újság a címoldalnak csak a felső felét mutatja. Annak a felső felének kellett magára vonnia a figyelmet. A weboldal above the fold területe ugyanígy működik.
Hogy mi van az above the fold részben, az minden látogató eszközétől, képernyőméretétől és böngészőjétől függ. Egy nagy asztali monitor sokkal több tartalmat mutat a hajtás felett, mint a függőlegesen tartott telefon. A hajtásra tervezni azt jelenti, hogy mindegyikre gondolsz, nem csak arra a változatra, amelyet a saját képernyődön látsz.
Miért számít az above the fold tartalom?
Az olvasási viselkedésről szóló kutatások következetesen azt mutatják, hogy a látogatók több időt töltenek az oldal tetejéhez közeli tartalommal. Minél lejjebb van a tartalom, annál kevesebb látogató jut el hozzá. Ez nem a figyelem kudarca. Ez a véges időre adott észszerű válasz. A látogatók gyorsan megítélik, érdemes-e elolvasni az oldalt, és ez az ítélet az első látható szakaszban születik meg.
Az above the fold részben válaszolsz a látogató első kérdésére: jó helyen vagyok? Ha a címsor, a kép és a szöveg első sorai egyértelművé teszik a választ, a látogatók görgetnek. Ha összezavarodnak vagy bizonytalanok, a legtöbben nem adnak esélyt az oldal többi részének.
Mit tegyél az above the fold részbe?
Az above the fold területen kevés a hely, és nagy a tét. Minden elemnek, amely megjelenik ott, azzal kell kiérdemelnie a helyét, hogy a látogatót szolgálja, vagy az oldal célját viszi előre.
Egy világos címsor, amely megmondja, miről szól az oldal, vagy mit kap belőle a látogató. Egy kísérő mondat vagy alcím, amely kontextust vagy konkrétumot ad. Egy vizuális elem, amely erősíti az üzenetet, nem csak díszíti. Egy cselekvésre ösztönzés, amely világos következő lépést ad a látogatónak, ha már meggyőződött.
A navigáció az above the fold részbe tartozik. A látogatók azt várják, hogy az oldal tetején megtalálják az utat a weboldal többi részéhez, és az eldugott vagy rejtett menü azonnal súrlódást okoz. A weboldal-navigációról szóló cikk bemutatja, hogyan tervezz minden eszközön jól működő menüket.
Ami nem való az above the fold részbe, az minden, ami helyet foglal anélkül, hogy hozzájárulna a látogató megértéséhez vagy döntéséhez. A nagy, díszítő képek információs érték nélkül, a betöltést késleltető forgó bannerek, vagy a bevezető szövegblokkok, amelyeken a látogatónak át kell görgetnie, mielőtt a lényeghez érne, mind az oldal legértékesebb helyét pazarolják.
Miben különbözik az above the fold mobilon?
Mobilon az above the fold terület jóval kisebb, mint asztali gépen. A függőlegesen tartott telefonképernyő nagyjából 600-800 pixel magasságot mutat. Egy asztali monitor 900-1200 pixelt. Ugyanaz a dizájn asztali gépen két-három szakaszt is felfedhet a hajtás felett, mobilon viszont csak egy címsort és egy képet.
A gyakorlati következmény az, hogy a mobilos látogatók sokkal kevesebb információval döntenek arról, maradnak-e vagy görgetnek, mint amennyit az asztali látogatók első pillantásra látnak. Ami a legfontosabb, annak el kell férnie egy kisebb ablakban. Gyakori probléma a nagy háttérképes, minimális szövegű hero szakasz: asztali gépen feltűnően néz ki, mobilon viszont az egész képernyőt betölti nagyon kevés tartalommal, mielőtt a látogatónak görgetnie kellene.
Az above the fold tesztelése valódi telefonon azért számít, mert a böngészős előnézetek és az asztali szimulációk nem mutatják pontosan, mit látnak a mobilos látogatók. A mobilos szempontok teljes ellenőrzőlistájáért a weboldal mobilbaráttá tételéről szóló cikk bemutatja, mit ellenőrizz az élesítés előtt.
Befolyásolja az above the fold az oldal sebességét?
Közvetlenül. Az above the fold terület az első, amit a böngésző megjelenít, így minden erőforrás, amely késlelteti a megjelenését, rontja az érzékelt betöltési időt, még ha az oldal többi része gyorsan be is töltődik.
A nagy hero képek, az olyan webes betűtípusok, amelyeknek be kell töltődniük a szöveg megjelenése előtt, és az olyan szkriptek, amelyek az oldal megjelenítése előtt futnak, mind lejjebb tolják az above the fold tartalmat. A látogató szemszögéből az oldal lassan töltődik be, még ha a technikai betöltési idő észszerű is. Az üres vagy részben betöltött above the fold terület, miközben az oldal többi része felzárkózik, az egyik leggyakoribb oka a magas visszafordulási aránynak egyébként jól megtervezett oldalakon.
A hero kép optimalizálása, az above the fold erőforrások betöltésének előnyben részesítése és a nem lényeges szkriptek halasztása a leghatékonyabb megoldások. A weboldal sebességéről szóló cikk a betöltési teljesítmény technikai oldalát tárgyalja, és azt, hogy mi befolyásolja leginkább.
Befolyásolja az above the fold a SEO-t?
Az above the fold tartalom olyan jel, amelyet a keresők az oldal minőségének értékelésekor használnak. Azokat az oldalakat, amelyek a hajtás felett nehéz hirdetéseket vagy gyenge minőségű tartalmat töltenek be, miközben a fő tartalmat lejjebb tolják, büntetik. Ez egy konkrét algoritmusfrissítés volt, amely azokat az oldalakat célozta, amelyek a hasznos tartalmat nagy hirdetésblokkok mögé rejtették.
Ezen a konkrét büntetésen túl az above the fold közvetetten befolyásolja a SEO-t a viselkedési jeleken keresztül. Azok a látogatók, akik megérkeznek egy oldalra, és azonnal elmennek, mert az above the fold terület nem adott okot a maradásra, magas visszafordulási arányt és alacsony elidőzési időt hoznak létre. Idővel ezek a jelek azt üzenik a keresőknek, hogy az oldal nem szolgálta a keresés mögötti szándékot.
A jó above the fold dizájn a jobb címsorszerkezetet is támogatja. A hajtás felett látható világos címsor, amelyet alatta logikus oldalszerkezet támogat, segít a látogatóknak és a keresőknek is gyorsan megérteni az oldalt. A webdizájnról szóló cikk bemutatja, hogyan alakítják a látogatói élményt az olyan elrendezési döntések, mint a címsorhierarchia. A keresési rangsorolás teljes képéért a SEO-ról szóló cikk a legfontosabb technikai és tartalmi tényezőket tárgyalja.
Hogyan kezeli a WEMASY az above the fold dizájnt
A WEMASY weboldalépítőjének sablonjait az above the fold területet szem előtt tartva építették. A hero szakaszok gyors betöltésre vannak optimalizálva, a vizuális szerkesztő pedig lehetővé teszi, hogy közzététel előtt megnézd, hogyan jelenik meg minden szakasz különböző képernyőméreteken. A mobil előnézet pontosan azt mutatja, mit látnak a látogatók a telefonon görgetés előtt, így a tartalmat és az elrendezést találgatás nélkül igazíthatod.
Nézd meg, mi tartozik hozzá, a WEMASY weboldalépítőjénél, vagy nézd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Még mindig releváns az above the fold a modern görgetési szokások mellett?
Igen. A látogatók könnyebben görgetnek, mint tíz éve, de az above the fold terület még mindig aránytalanul nagy súlyú. A látogatók az oldal tetejéhez közeli tartalommal töltenek több időt, függetlenül attól, mennyit görgetnek. Az above the fold területen dől el a maradás vagy távozás kérdése. Annak világossá, gyorssá és meggyőzővé tétele ma is ugyanolyan fontos, mint mindig. A WEMASY weboldalépítőjével ezt közvetlenül a weboldaladon állíthatod be.
Milyen magas legyen egy hero szakasz?
A hero szakasznak annyi tartalmat kell felfednie a hajtás felett, hogy közvetítse az oldal célját, anélkül hogy az egész nézetet elfoglalná. Asztali gépen az a hero, amely a teljes képernyőmagasságot kitölti egy címsorral és egy képpel, feltűnő lehet, de késlelteti a látogató hozzáférését a tényleges tartalomhoz. Jobb megközelítés egy olyan hero, amely elég magas az erős első benyomáshoz, de még mutat egy kis részt az alatta lévő tartalomból, jelezve a látogatóknak, hogy görgetéssel több látnivaló vár.
Mi az a cselekvésre ösztönzés az above the fold részben?
A hajtás feletti cselekvésre ösztönzés egy gomb vagy hivatkozás, amelyet az oldal első látható szakaszába helyeznek, hogy a már meggyőződött látogatók azonnal, görgetés nélkül cselekedhessenek. Gyakori példák: „Kezdd el”, „Foglalj egy hívást” vagy „Árak megtekintése”. Nem minden látogató kész cselekedni az above the fold részben, ezért van ott az oldal többi része, de egy világos cselekvési lehetőség korán csökkenti a súrlódást azoknak, akik igen.
Minden oldalnak kell erős above the fold szakasz?
Igen, de az „erős” jelentése oldaltípusonként más. A kezdőlap above the fold részének meg kell mutatnia, ki vagy, és mit kínálsz. Egy blogcikk above the fold részének meg kell erősítenie az olvasót, hogy jó cikkben van, és okot kell adnia a továbbolvasásra. Egy termékoldal above the fold részének világosan meg kell mutatnia a terméket, és elérhetővé kell tennie az árat. Az elv minden oldaltípusnál ugyanaz: az első nézetnek a látogató legközvetlenebb kérdésére kell válaszolnia.
Hogyan tesztelem, mi jelenik meg az above the fold részben különböző eszközökön?
A legpontosabb módszer, ha a saját oldalaidat valódi eszközökön ellenőrzöd. Használj asztali monitort, táblagépet és telefont álló és fekvő módban is. A böngésző fejlesztői eszközeinek van eszközszimulációs módja, amely elfogadható közelítést ad, de nem számol a böngészősávokkal, címsorokkal és értesítési területekkel, amelyek a valódi telefonokon csökkentik a látható képernyőmagasságot. Ami a böngészős előnézetben jól néz ki, annak a hajtás vonala gyakran észrevehetően máshol van a valódi eszközön.