Útmutató a hatékony responsive tervezéshez

A felhasználók már elvárják, hogy egy honlap jól nézzen ki és egyszerű legyen kezelni telefonon is. Ha ez nincs meg, akkor a weboldal “béna, idejétmúlt, gagyi” jelzőket kap a célközönségtől.

Manapság nagyon sok honlapra ráfogják, hogy responsive, vagy “mobil barát”, csak mert mobilon előjön egy hamburger menü, vagy minimális igazítás történik. Csakhogy egy jó mobil nézet nem csak ennyiben merül ki.

Összeszedtem néhány fontosabb szempontot, amire érdemes odafigyelni a responsive tervezés során.

Mi az a responsive design?

Tulajdonképpen egy tervezési technika, amelynek célja, hogy a weboldal minden platformon jól használható és optimális vizuális élmény legyen.

Az átlagfelhasználók  90%-nak meggyőződése, hogy a “mobil nézet” az egy “másik honlap”.

A responsive webdesign átrendezésen, átméretezésen alapszik, még pedig úgy, hogy az egyes elemek fizikailag nincsenek duplikálva. Vagyis tartalmilag ugyanazt a honlapot látjuk mindenhol, csak átrendezett külsőben.

Kezdd a tartalommal

Komolyan. “Lorem Ipsumra” nem lehet responsive-an tervezni. Nincs olyan, hogy “Majd, ha megvan a design Dezső megírja a szöveget”. Végeláthatatlan kínlódásokat eredményez, ha nem látod előre mekkora tartalom mennyiséggel kell dolgozni. Nem tudod mekkora hasábokat használj, milyen széles legyen az oldal, hogyan tördelj, mihez állítsd be a törés pontokat.

Mobile first

Erről már mindenki hallott, csak elég sokan félre értelmezik. Nem azon van a hangsúly, hogy jól nézzen ki az oldal mobilon, mert sokan mobiloznak, hanem, hogy mobilon is legyen konverzió. Nem azért kell, mert a Google hátrébb sorol, ha nincs, hanem, hogy az emberek mobilon is egyszerűen vásárolhassanak.

Elég sokan panaszkodnak, hogy több mint 40%-os mobilos látogatottság ellenére, az ügyfelek csak laptopról vásárolnak. Ha arra vagy berendezkedve, hogy “valahogy nézzen ki, úgysem itt vásárolnak” akkor az ügyfelek majdnem felét el fogod veszíteni.

A mobile first jóval többet vár el annál, hogy nem lóg ki sehol a gombod mobil kijelzőn.

Rugalmas rácsrendszer

A responzivitás alapját a rugalmas rácsok adják, ahol a hagyományos pixel alapú méretezés helyett, százalékosan méretezzük a tartalmi egységeket. Ezekhez a relatív méretekhez a böngésző igazodik. Laptoppoknál, vagy szélesebb monitoroknál azonban nem akarjuk, hogy teljes szélességben ki legyen feszítve a tartalom, ezért a tartalmi konténerünk szélességét korlátozzuk. (Fix pixel mérettel, vagy akár százalékosan).

Ezek helyes megválasztása szintén a tartalomtól és a honlap stílusától függ (nem ököl szabály, hogy minden weboldal 1170px széles). Kevesebb tartalomhoz elég a 960px, sok tartalomhoz, vagy nagyobb portálokhoz akár 1200px is kellhet. A legjobb, ha szélesség maradéktalanul osztható 12-vel, így a hasábjaink is pontosak lesznek.

rugalmas rács

Töréspontok

Töréspontokat media queryk segítségével tudunk létrehozni, melyek lehetővé teszik, hogy  a tartalmi egységek kinézetét és/vagy elrendezését a töréspontok mentén megváltoztassuk. Ezáltal az oldal megjelenése optimális lesz az adott kijelzőn.

A legfontosabb dolog a töréspontok meghatározásánál, hogy azokat a tartalom szerint kell megválasztani, nem pedig megcélozni konkrét eszközök felbontását. 

Ez minden oldalon más lehet, annak témája, stílusa és tartalma szerint.
Ha például annyi menüpontod van, hogy az 837px szélesen már nem fér ki, akkor oda töréspontot kell tenni, függetlenül attól, hogy “az iPad portrait nézet csak 768 alatt kezdődik.”
Az eszközök sokfélesége miatt ilyen alapon nagyon sok felülbírálást kellene létrehozni, hogy az összes eszköz típusnak megfeleljünk.

Néhány népszerűbb eszköz böngészőjének felbontása:

  • 320px – iPhone 4 portrait, iPhone 5 portrait
  • 360px – Nexus 5 portrait, BlackBerry portrait, HTC One portrait
  • 375px  – iPhone 6 portrait
  • 480px  –  iPhone 3 Landscape, Lumia Landscape
  • 600px – Nexus 7 portrait
  • 640px – iPad portrait, Galaxy S3 portrait
  • 768px – iPad portrait
  • 800px – Nexus 10 portrait
  • 1024px  – iPad landscape és kisebb laptopok
  • 1920px  – iMac 21,5″

Elrendezés,  Áramlás

Az telefonokat leginkább portré módban (állítva) használják, ami azt jelenti, hogy a képernyő magasabb, mint amilyen széles.  Vagyis a tartalmunk “össze fog nyomódni”, több függőleges teret vesz fel és a töréspontok mentén egymás alá kerülnek a tartalmi egységek.

Ezért a tartalom folyásának olyannak kell lennie, hogy az kontextusában értelmes maradjon.  Azok a tartalmi elemek, amik összetartoznak, mobilon is tartozzanak össze, vizuálisan is legyen egyértelmű, hogy az adott kép például melyik bekezdéshez tartozik.

áramlás

Responsive keretrendszerek pl.: Bootstrap

A köznyelvben a responsive tervezést egy az egyben a Bootstrappel azonosítják, csakhogy ez valójában egy szemléletmód, nem pedig egy keretrendszer. Bootstrap = responsive, de nem minden responsive = bootstrap.

A Bootstrappen kívül is van néhány előre megírt rendszer pl. Foundation, Skeleton, stb, melyek segítségével (elvileg) nagyon hamar lehet responsive oldalakat létrehozni. Le is van tesztelve, időt takarítasz meg vele.

DE! Megfelelő beállítás nélkül sok a felesleges kódsor, és sok a szükségtelen JavaScript fájl, ami rettentően lassítja a betöltési sebességet.
Ezen kívül a lustábbak nem nyúlnak az alap témához, így rengeteg oldal akad, ami nagyon hasonlóan, vagy szinte ugyanúgy néz ki.

Továbbá, alkalmazkodnunk kell a rendszer előre megírt megoldásaihoz. A mozgás terünk elég kicsi, hiszen ezek a rendszerek nem az egyedi igényekhez vannak kifejlesztve. Mint amikor veszel egy pár számmal nagyobb kabátot. Igaz hogy nem fázol, de itt-ott bizony nagyon lötyög és nem valami esztétikus.

Navigáció

A navigáció nem egyenlő a főmenüvel, annál is inkább, mert mobilon a főmenü általában egy hamburger mögött van. Így csak erre hagyatkozni nagy luxus. Lehetőség szerint a lehessen eljutni különböző aloldalakra a főmenü használta nélkül is. Erre szolgál például a morzsamenü, a kapcsolódó linkek, és Call to Actionok, amik mind-mind segítik az oldalon belüli navigációt.

Viszonylag kevés 6-8 menüpontot érdemes használni. A legördülő menük kezdenek kikopni, helyette úgy próbálják kialakítani az oldal struktúráját, hogy a kategória oldalakról is egyszerűen el lehessen navigálni az aloldalakra.

Teljesen mindegy, hogy az egyszerű hamburger menüt, az oldalról becsúszóst panel menüt, esetleg teljesen egyedi megoldást használsz. A lényeg minden esetben, hogy egyszerűen használható legyen.

Tipográfia

Tipográfia lényege, hogy a tartalom könnyen emészthető, jól olvasható és azonnal befogadható legyen, függetlenül attól, hogy milyen széles a kijelző.

Egy sorba maximum 60-70 karaktert érdemes tenni. Vagyis a betűméretet akkorára kell állítani, hogy  a mindenkori szélességhez képest ne legyen több 70 karakternél egy sorban. Kisebb kijelzőkön ez nem probléma mert az egy sorban kiférő karakterek száma a kisebb felbontáson csökken. Nagyobb kijelzőkön viszont érdemes a betűket nagyobbra állítani, vagy korlátozni a maximum szélességet.

Sok helyen látom, hogy 1170px széles oldalon 12px-es betűvel írnak, ahol akár 150 karakter is kifér egy sorban. (Egyébként ebből lehet a leginkább látni, hogy az oldal sosem látott webdesignert)

Asztali szélességen minimum 16 – 20 pontos betűkkel kell írnunk. A címsorok pedig ennél is nagyobbak, 30-40 pontosak is lehetnek. A címsorokat szinte minden esetben kicsinyítenünk kell mobil szélességen, hiszen senki sem akar 5-8 soros címet, vagy egyszavas sorokat. A kicsinyítés  mértéke függ a szöveg terjedelmétől is.

Rugalmas képek

“Nem tudnád a kép méretet két centivel csökkenteni?” Centivel!? Hahaha :D Egy laptop, mobil, vagy tablet képernyőjén a pixelsűrűség különbözhet! 2x, vagy  3x is több képpontot tartalmazhat ugyanakkora fizikai méretű terület. Centiméterben kifejezve, egy 1×1 cm-es területen lehet 50 darab képpont is, és 150 is az eszköz típusától függően. (Pl: Az iPhone 5 fizikai szélessége 640px, de a böngésző szélessége 320px. Ezekről bővebben itt egy táblázat)

De miért van ez? Azért van, mert a telefonok képernyői egyre nagyobbak, viszont 1-es pixel aránnyal minden nagyon kicsi, és kezelhetetlen lenne mobilon.

A nagyobb pixelarányú eszközökön a raszteres képek szemmel láthatóan elmosódottak, pixelesek, életlenek. Ezeknek a kiküszöbölésére használjuk például az SVG vektoros képformátumot, vagy a Retina Ready technológiát.

SVG

Bármi, ami nem egy részletes fénykép, vagy illusztráció, azt ajánlott SVG formátumban, vagy ikon fontként (pl: awesome fonts) beágyazni, mert korlátlanul nagyítható, ezen kívül a fájl mérete kisebb mint a hagyományos JPG, vagy PNG képeknek. Néhány régebbi böngésző, és mobil nem támogatja az SVG-t, ezért úgynevezett fallback imaget érdemes használni, amivel helyettesíthető az eredeti SVG.

A raszteres képekhez a legjobb megoldás, ha a képeket befoglaló konténerekbe ágyazzuk a rács részeként. Ezáltal, ha a szülő konténer kisebb, mint a kép valós mérete, akkor a kép a konténerrel együtt összezsugorodik, a magasság pedig automatikusan kerül kiszámításra és továbbra is fenntartja az eredeti képarányt.

Ugyanez igaz nagyításra is. Ha a kép egy nála nagyobb rugalmas konténerbe van ágyazva akkor az ki lesz feszítve a konténer szélességéhez. ( Ez nem mindig néz ki jól, de kiküszöbölhető, maximum szélesség megadásával )

Optimális kattintási területek

Azok az idők, amikor a sor végére egyszerűen kitettünk egy szöveges “tovább” linket, elmúltak. Ugyanis mobilon nagyon nehezen “kattintható”. Fontos, hogy a kattintási területek, ne legyenek túl kicsik és ne legyenek egymáshoz túl közel. Minimum 40 x 40-es legyen egy kattintási terület.

rugalmas rács

Strukturált tartalmi egységek

Azzal, hogy egymás alá tördeljük a tartalmat mobilon, több helyet foglalunk el lefelé. Ezért érdemes olyan megoldásokat használni, amivel feloszthatjuk a tartalmat.
Ilyenek például az accordionok, tabek, sliderek, lapozók, táblázatok, amivel szét tudjuk bontani a tartalmainkat megspórolva ezzel a végtelen gördítéseket.

Bújócska

Az általános szemlélet az, hogy minden tartalmat meg kell jeleníteni mobil eszközön is, amit asztali nézetben látunk. De nem mindegy hogy hogyan. Vannak olyan esetek, amikor mobilon az adott tartalom felesleges, vagy legjobb lenne egyszerűbbre cserélni.

Tipikusan ilyenek például a hatalmas slideshow-k, amik laptopon nagyon látványosak, de mobilon egyrészt foglalják a helyet, sok erőforrásba telik a képeket letölteni és nagyon apró lesz rajtuk a szöveg. Az ilyen esetekben a nem kívánt tartalmat egyszerűen rejtsük el és kapcsoljunk be helyette egy másikat, vagy egyszerűbbet.

Tesztelés

Responsive tesztelésére sok böngésző bővítmény és online eszköz létezik, ami nagyon hasznos is, DE! Ezek mind felbontás alapján tesztelnek, egyszerűen végrehajtják a töréspontoknak megfelelő utasításokat. Az egyes eszközöknek és böngészőknek azonban vannak sajátosságaik, ezért csak a felbontás alapján végzett teszt, nem lesz 100%-ban hiteles. Tipikusan az IE, az iPad, iPhone és a BlackBerry, amit mindenképp érdemes élesben letesztelni.

rugalmas rács

A fentiekből jól látszik, hogy mennyire összetett feladat egy jó responsive honlap megtervezése, ami nem csak jól néz ki, de használható is. Nagyon sok mindenre kell odafigyelni, hogy a végeredmény valóban jó legyen. Ne hanyagold el tervezést és szánd rá a kellő időt!

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

Szólj Hozzá!

Hozzászólások