Responsive web design: what is responsive design and why use it? (Part 1)

2017/ 09/06
Bár a reszponzív webdesign évek óta a fénykorát éli, rengeteg cég még ma sem ismeri fel az általa nyújtott előnyöket, és nem fordít elég figyelmet a mobilra (és egyéb eszközökre) való optimalizálásra - pedig kellene.

Ismerős a kép? Reggel utazol a munkába, körülötted unott arcú sorstársaid, akik vagy újságot olvasnak, még ébredeznek, vagy… a telefonjukat nézegetik. Manapság egyre nő azok száma, akik a mobil eszközön (okostelefonon vagy tableten) való böngészést részesítik előnyben. A felhasználók egyre több tevékenységüket már szinte csak mobilon végzik: webshopos vásárlások, közösségimédia-használat és chatelés, cikkek olvasása…

Ezért az, hogy minden eszközön tökéletes felhasználói élményt nyújtsunk - melybe természetesen az is beletartozik, hogy jól nézzen ki és intuitívan lehessen használni -, fontosabb, mint valaha. Egyre több és több cég fektet időt és energiát abba, hogy reszponzívvá tegye weboldalát - azonban még mindig azok tartoznak a többségbe, akik számára újdonság a mobilra optimalizált design és élmény. Ezért érdemes egy kicsit áttekinteni, hogy mit is jelent a reszponzivitás, és hogy mire kell odafigyelni, ha úgy döntesz, te is bevezeted ezt a gyakorlatot a weboldaladon.

Mit jelent az, hogy reszponzív webdesign?

A reszponzív webdesign lehetővé teszi, hogy olyan weboldalakat fejlesszünk, amelyek képesek arra, hogy változzanak és adaptálódjanak attól függően, hogy milyen méretű képernyőről nézzük őket. Legyen az egy gyors pillantás az okostelefonra, egy irodai laptopon való böngészés vagy otthoni céltalan szörfölés a nagyfelbontású monitoron - minden eszközön ugyanazt a weboldalt kell látnunk, melynek verziói között formázás- és elrendezésbeli különbségek vannak. A weboldal “felismeri”, hogy a látogató mekkora méretű képernyővel rendelkezik, és automatikusan átformálja magát úgy, hogy a lehető legtökéletesebb felhasználói élményt nyújtsa. Ez azt is jelenti, hogy ha éppen mobilról szeretnénk megnézni egy weboldalt, nem kell azzal bíbelődni, hogy hosszan várjunk az oldal betöltődésére, és zoomolni sem kell többet az asztali verzión belül, hogy el tudjuk olvasni a hangyányi betűket.

A kinézeten kívül természetesen fontos a weboldal célja is. Minden egyes aloldalnak úgy kell felépülnie, hogy lehetőleg csak egy célt szolgáljon (ez lehet az, hogy a felhasználó átkattintson egy másik aloldalunkra, de az is, hogy vásároljon webshopodból vagy iratkozzon fel egy listára). A reszponzivitás jelentősen megkönnyíti a felhasználó dolgát (és a tiédet is), hiszen így tudjuk elérni, hogy a látogató minél egyszerűbben el tudja végezni a feladatot. Ilyen megoldás lehet például az érintőképernyős készüléken való navigálás megkönnyítése - ezzel a felhasználó is könnyebben eligazodik, és valószínűbb, hogy követni fogja a neked ideális útvonalat az oldalon belül.

Több készülék, ugyanaz az élmény

Manapság már nemcsak az számít, hogy a weboldalak a létező összes típusú és méretű eszközön használhatók legyenek. Arról is sokan elfeledkeznek, hogy egy felhasználó nemcsak egyféle készüléket használhat, hanem lehet, hogy először mobilon találkozik az oldallal, majd visszatér arra asztali számítógépről is. Így a felhasználói felület tervezőinek és az oldal üzemeltetőinek arra is gondolniuk kell, hogy az oldal tökéletesen működjön, bármilyen platformról is használják. Egy tartalom, amelyet laptopról néztek meg, később elérhetőnek kell lennie mobilról is - méghozzá használható, érthető formában.

Ha valaki egyszer már “odatévedt” a weboldaladra, és használt ott egy funkciót (mint például a keresés), akkor később, ha ugyanez a felhasználó visszatér egy másik készülékről is, ugyanúgy meg kell találnia minden információt és tudnia kell használni minden funkciót. Ha nem tudja ezt biztosítani a weboldalad, az könnyen lemorzsolódáshoz vezethet - a látogatók más oldalakat is meg fognak nézni a témában, és valószínűleg amellett fognak dönteni, amely a legjobb felhasználói élményt nyújtja minden eszközön. Erre pedig a reszponzív oldal a legalkalmasabb.

Ugyanaz a weboldal, más kinézet

A weboldalak tervezése során gyakran előforduló hiba, hogy mivel egyetlen reszponzív felépítés alkalmazását túl bonyolultnak találja a kivitelező, inkább azt a megoldást választja, hogy két külön oldalt hoz létre: egyet desktopra és egyet mobilra. Hogy mi ezzel a probléma? Először is egy ilyen weboldal frissítése kétszer annyi munkába kerül, hiszen nem egy, hanem két különböző oldalon kell végrehajtani a frissítéseket (ráadásul úgy, hogy a tartalom és az oldalon megjelenő információknak konzisztensnek kell lenniük mindkét verzión).

Mit nyersz azzal, ha reszponzív az oldalad?

Azzal, hogy reszponzív designt alkalmazol weboldalad megtervezésénél, olyan előnyökhöz jutsz, amelyekre még csak nem is gondolnál. Mutatunk néhány okot, ami miatt érdemes ebbe időt és energiát fektetni.

Nemcsak a felhasználók, de a keresőmotorok is szeretik

A Google szereti azzal meglepni a webeseket és marketingeseket, hogy időnként bevezet egy-egy új algoritmust, amely teljesen átalakítja a találati listát az éppen aktuális preferenciák szerint. Már régóta a Google-ajánlások között szerepel, hogy egy weboldal minden felületen legyen felhasználóbarát és könnyen kezelhető. Egy ideje pedig az ajánlás új szabályba lépett át: egy algoritmus-frissítés során a Google figyelembe vette, hogy mobilról történő keresések során olyan találatokat részesítsen előnyben, amelyek szintén gondolnak a mobilos felhasználókra. A mobilra optimalizált oldalak még egy külön megkülönböztető “mobile-friendly” feliratot is kaptak.

Habár ezt a címkét már megszüntette a Google, 2015 óta (szintén egy algoritmus-frissítésnek köszönhetően) előrébb sorolja azokat a találatokat, amelyek reszponzívak, így minden platformon jól használhatók. Ez persze azt is jelenti, hogy a mobilra nem optimalizált oldalak “büntetésben” részesülnek. A Google ezzel ösztönzi a weboldalakkal foglalkozókat, hogy a reszponzív kialakíatást részesítsék előnyben - hiszen a mobilról való böngészés egyre népszerűbb és népszerűbb lesz.

A reszponzív webshopok több vásárlót számlálnak

Az online vásárlás és a webshopok térhódítása ma már olyan tényező, amelyet nem lehet figyelmen kívül hagyni. Egyre többen és többen vásárolnak az Interneten, ráadásul azt a kort éljük, ahol minden csak egy kattintásra van - elég egy gomnyomással rendelni, fizetni, majd várni a küldeményünket. Bizonyos kutatások szerint az internetezők 80%-a vásárolt már a mobiltelefonján. Így azzal, hogy reszponzív designt alkalmazol egy webshopban, nemcsak a felhasználó életét könnyíted meg (hiszen könnyebben tud keresni a termékek között és vásárolni is), hanem saját árbevételedet is növelheted a mobilos vásárlásokkal.

A közösségi oldalakról érkezett látogatók nagy része okostelefont használ

A közösségioldal-megtekintések több mint 60%-a mobilról történik. Így ha egy hirdetés, cikk vagy bármilyen a weboldaladra mutató tartalmat helyezel el egy közösségi oldalon, akkor pont ugyanennyi az esély, hogy mobilon nézik az oldaladat. Emiatt még fontosabb, hogy a reszponzív designt alkalmazzuk. A marketingstratégiádban szerepel a Facebook vagy a LinkedIn? Akkor jó lesz, ha mobilra is optimalizálod weboldaladat, hiszen nagy számú látogatót várhatsz mobilról is.

A sorozat következő részében tippeket és trükköket mutatunk majd, amelyekkel nem foghatsz mellé egy reszponzív weboldal kialakításánál, valamint felsoroljuk a leggyakoribb hibákat és hogy hogyan kerülheted el azokat.