Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2014-11-050 komment

Mi az a parallax design? És mikor érdemes használni?

A parallax design már évek óta velünk él a webdesignban is, akad jó pár olyan oldal a weben, mely a HTML5 és a CSS3 lehetőségeit kihasználva szögezi a székbe a felhasználót. Borzasztóan látványos tud lenni a dolog, a jól sikerült parallax oldalakat látva garantáltan mindenkinek elkerekedik a szeme. De vajon egy olyan céges oldalnál, melytől hatékonyságot, konverziót várunk el, érdemes-e alkalmazni?

A parallax design lényege, hogy több “réteg” jelenik meg egyszerre egy weboldalon, szinte 3D-s lesz a látvány. Azért, mert a rétegek eltérő sebességgel mozognak, amikor scrollozunk lefelé vagy csak mozgatjuk az egeret: például a háttér lassabban mozdul, mint az előtérben lévő képek. Ezáltal kelt térhatást, ami lenyűgöző tud lenni a megszokott kétdimenziós, szöveg-kép felépítésű weboldalak ezrei között.

Mit tud még a parallax design?

További “trükkökre” is képes azonban a parallax design: nemcsak függőlegesen mozoghat, hanem akár vízszintesen is, sőt bármilyen irányban, valamint a felhasználók egy-egy linkre kattintással látványos ugrásokat tehetnek az oldalon. Ami képes magával ragadni az embert, vagyis vonzóbbá, látványosabbá tehetjük a weboldalunkat vele, a kijelző előtt tarthatjuk a felhasználót, aki így több időt tölt az oldalunkon.

A parallax megoldások a videójátékok világában jelentek meg, de ennek már van harminc éve is. Már ekkor akadtak olyan játékok, ahol a háttér lasabban mozgott, így a tér illúzióját keltette. A webdesignban 2011-ben bukkant fel a HTML5-nek köszönhetően. Mindezek mellett még mindig újnak és eredetinek hat a weboldalakon, talán amiatt is, hogy kevés oldal merte megkockáztatni a használatát.

De, ha valaki még mindig nem tudta volna beazonosítani, gyorsan néhány példával is szolgálunk, nem kell messzire menni: a parallax technikát szépen bemutatja a Vs.hu Mega rovata, bökjünk bármelyik anyagára, de még a szombathelyi Nyugat.hu Kép. rovatánál is ezzel találkozunk, amikor lefelé görgetés során egymásra csúsznak a képek. Egyéb külföldi, parallax, céges oldalakról már mi is tettünk közzé válogatást, közel egy éve. Az itt felsorakozó weboldalakat megszemlélve fel lehet mérni a benne rejlő lehetőségeket (akad közöttük céges oldal is). Az is látszik ugyanakkor, hogy

vannak korlátai.

  • A nagyobb parallax weboldalaknál például sokat kell várni a betöltésre a hatalmas képek és a mozgásért felelős scriptek miatt. Mostanában, amikor egyre türelmetlenebb a közönség, nagyobb visszapattanási arányt eredményezhet egy lassan betöltődő oldal. Érthető, nem örülnek neki, ha várni kell. De nem csak ők, hanem a Google sem szereti ezt.
  • Emellett a hosszas scrollozás is zavarhat néhány látogatót, akik ugyancsak idő előtt lelépnek az oldalunkról.
  • Egyébként pedig akadnak még mindig olyan régi böngészők, melyek nem támogatják a HTML5-öt, és így nem működik rajtuk a parallax design.
  • További gondot jelenthet, hogy nem egy mobil-barát technológiáról van szó, de nehezíti a méréseket is az oldalon, valamint a keresőoptimalizálás során is jelenthet gondokat. Már csak azért is, mert a legtöbb esetben a látvány áll az első helyen, ami a tartalom, illetve elsősorban a szöveg kárára válik.
  • Valamint parallax design esetén jellemzően egyetlen oldalról van szó, melybe belefoglalnak mindent, sokszor egyáltalán nincsenek benne linkek különböző aloldalakra.

Mindez azonban nem szükségszerűség.

De mit tehetünk?

Egyrészt parallax oldal esetén is figyelhetünk külön a SEO-ra, és – ehhez is kapcsolódóan – a mobilon is használható megjelenésre, másrészt pedig több, általunk is felhozott példával ellentétben nem muszáj az egész weboldalunkat parallax designnal készíteni.

Hogyan?

  • Úgy, hogy egyrészt nem visszük túlzásba az oldalon a parallax-effekteket, csak egy-egy helyen bukkan fel.
  • Másrészt nem egyetlen oldalt készítünk, hanem több aloldalt, melyeket külön-külön optimalizálhatunk.
  • Az is lehetséges, hogy a parallax hatás csak egyes oldalainkon jelenik meg, például a főoldalunk parallax – melyet egyébként sem feltétlenül érdemes vagy egyáltalán lehetséges hatékonyan SEO-zni -, míg az ott található linkekről elérhető aloldalainknál már nem használjuk a parallax designt.
  • De akár az is elképzelhető, hogy egyes aloldalaink kapnak csak parallax designt, így például a cégtörténetet bemutató oldal tipikusan ilyen lehet.

Igaz, a felhasználókat egy parallax oldalon az animáció fogja lenyűgözni, annyira, hogy másra nem is nagyon figyelnek, azonban még működhet a call to action az oldal alján (akár még jobban is, mint a Tinkénél). És talán egy ilyen parallax-élmény után lelkesebben is kattintanak a látogatók a CTA-gombra.

Mindenesetre, ha nem csak a látvány fontos, hanem a konverzió is, akkor igazán figyelni kell arra, hogy ne hajtsuk túl a parallax-hatást, mert egész egyszerűen elveszhetünk a sok animációban és mozgásban, a hullámvasút során elhalványul az üzenet, eltűnik az oldal célja és iránya a felhasználó számára, és egy idő után nem is tudja, hogy mi végre görget még lefelé. A lenyűgöző látvány és a szédülés között kell megtalálni a határt, hogy a parallax design javítsa, ne pedig rontsa az oldalunk hatékonyságát.

Végül pedig, aki további parallax-példákra kíváncsi, az az Awwward nevű oldalon több száz díjnyertes példát találhat rá, lehet böngészgetni köztük ötletekért és persze az élményekért.

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.