A reszponzív weboldal tízparancsolata

A reszponzív, azaz kijelző méretéhez igazodó honlap mára Google elvárás. De vajon mit is értünk ez alatt pontosan? Milyen követelményeknek feleljen meg egy jó reszponzív honlap? A legfontosabbakat gyűjtöttük most össze egy csokorba.

A Google alapvető célja és egyben találati listájának legfőbb rendezési elve – amit persze bonyolult algoritmus alapján állít össze -, hogy a felhasználót a legjobb minőségű találatokhoz és böngészési élményhez juttassa. Nincs ez másképp a mobilról netezők esetében sem. A cél itt is az, hogy a megszokottnál jóval kisebb méretű kijelzőn megjelenő weboldalak is komfortos böngészést biztosítsanak. És mivel a telefonos internetezésnek számos sajátossága van, a reszponzív design és honlap tervezés nem csupán az eredeti honlap lekicsinyítését jelenti.  Számos eltérés mutatkozik a telefonról, laptopról, tabletről vagy asztali gépről történő internet használatban. A megfelelő reszponzív kialakítás legfontosabb ismérveit, tízparancsolatát gyűjtöttük most össze:

1.    Gyors betöltődés

Az okostelefonon netezők sok mindenben különböznek az asztali gépről, laptopról böngészőktől, abban viszont hasonlítanak abban, hogy ők sem hajlandóak sokat – 2-3 mp-nél többet – várni egy oldal betöltődésére! Egy asztali gépen sem túl gyorsan betöltődő weboldal mobilon még nehézkesebben fog betöltődni, pl. a nagyméretű képek használata miatt. A lassú betöltődéssel pedig nemcsak az idő fogy, hanem a felhasználó türelme is, aki sanszos, hogy pár másodpercnyi várakozás után inkább tovább is áll, és megpróbálkozik egy következő weboldal megnyitásával a témában, azaz a konkurenciáddal!
A gyors betöltődés érdekében érdemes mellőzni a nagy méretű, lassan betöltődő képeket, slidereket.

 2.    A kevesebb néha több

Megoszlanak a vélemények abban, hogy kell-e, szabad-e csökkenteni a mobilon megjelenő honlap tartalmakat, illetve egyszerűsíteni a design-t. Egyesek szerint a felhasználó csalódott lehet, ha nem ugyanaz fogadja, mint amit esetleg korábban már asztali gépen látott. A mi véleményünk az, hogy mobilnézetben a kevesebb több!
Az egyik leggyakoribb hiba, hogy mindent megpróbálsz belezsúfolni az oldalba. Ezzel viszont csak azt éred el, hogy az oldal lassan fog betöltődni vagy túlzsúfoltságával áttekinthetetlenné válik. A design-ból való leadásnál ne olyan dolgokra gondolj, melyek árthatnak a cégarculatnak! De egy slidert én nem biztos – pontosabban biztos, hogy nem – jelentetnék meg mobilos nézetben. Ha pedig bizonyos blokkok a honlapodon képet is tartalmaznak a blokk neve mellett, akkor én ez esetben is szívesen lemondanék a képek megjelenítéséről.

 3. Egyszerű navigáció

A mobilbarát nézet esetében mindenképpen egyszerűsített menüben érdemes gondolkodni.

A képernyő bal vagy jobb felső sarkában található három vonal egymás alatt, ami a menüt hivatott jelezni, és ami koppintásra lenyílik, helyet hagyva a kijelzőn a honlap további tartalmainak.

Ha Te még a klasszikus menü-megjelenítéshez vagy szokva, furcsa lehet, hogy mobilon nem látod a menüstruktúrát, de ne aggódj! A rutinos okostelefonról netezők már tudják, hogy mit jelent a sarokban lévő 3 vonalka…

Hasznos, ha ez a menü ikont a lefelé görgetés során is folyamatosan látszik és elérhető.

 4.    Egy hasábos elrendezés

Mobilon felejtsd el a vízszintes görgetést! Egy megfelelő weboldal szélessége mobilon megegyezik a telefon felbontásával. Nincs jobbra-balra görgetés! A tartalmakat egymás alá, egy hasábos elrendezésbe tanácsos rendezni. Az ilyen, rácsos elrendezés alkalmas arra, hogy kis felületen is viszonylag sok és sokféle tartalmat jelenítsünk meg ún. blokkos formában.

5. Megfelelő betűméret

Hibás feltételezés azt hinni, hogy a mobilos weboldal ugyanolyan, mint a „sima”, csak kisebb!
Egy okostelefon kijelzője eleve kicsi, ezért a jól olvashatóságra kiemelt figyelmet kell fordítanunk weboldalunk reszponzív átalakítása esetén.

6.    Rövidített szövegek

Az apró betűk mellett a hosszabb, folyó szövegek „elolvastatásától” is kíméljük meg a látogatót, ha tehetjük, mert a kicsiny kijelzőn ez sem túl komfortos. Érdemes pl. elsőként csupán főbb címeket, tájékozódási pontokat feltüntetni, amin belül persze már lehetnek hosszabb szöveges tartalmak, de azt ne azonnal zúdítsuk a nyakukba. Ha érdeklik a részletek, úgyis mögé néz!

 7.    Könnyen koppintható gombok

Nem túl vastag női ujjaimmal is gyakran megesik velem, hogy sms írás közben nem találom el a megfelelő karaktert. Ilyenkor bosszankodom is emiatt, és mindig az jut eszembe, hogy vajon hogyan ír itt üzenetet egy termetesebb férfiember, akinek feltételezhetően az ujjai is vastagabbak? A reszponzív weboldalak mobilos nézeteinél érdemes kiemelt figyelmet fordítani a koppintható gombok, linkek megfelelő méretére, ami a könnyű eltalálhatóságot jelenti. Milyen bosszantó lehet, ha harmadszorra sem sikerül eltalálni azt a fránya kis „Megrendelem” gombot, ugye? Te próbálkoznál vele negyedszer? Bizony, ő sem fog…

 8.    Funkcionalitás előtérbe kerül

A képváltók igen népszerűek manapság. Látványosak, és alkalmasak arra, hogy egy kiemelt felületen több hangsúlyos információt is megjelenítsünk. De a színes-szélesvásznú hatás a mobilon egészen másképp hat, mondhatni nem igazán érvényesül úgy, mint egy asztali gépen, és akadályozza a gyors betöltődést is. Ezért mobil nézetben a funkcionalitás veszi át az elsőséget a sok képes tartalom és az esztétikum helyett. A cél, hogy minél kevesebb kattintásból, minél kevesebb görgetéssel, a lehető legkényelmesebben legyenek elérhetőek weboldalunk fontos tartalmai.

 9.    Vissza a lap tetejére!

Kényelmi funkció, ha a weboldal folyamatosan lefelé görgetése után nem ítéljük a látogatót egy újabb hosszas felfelé görgetésre, ha újra a lap tetejére szeretne jutni. Az általában a jobb alsó sarokban elhelyezett kis ikonnal egy koppintással a lap tetejére kerülhet.

 10.  Kapcsolatfelvételi lehetőségek átrendeződése

A Call-To-Action gombok egy honlapról sem hiányozhatnak. Ilyenek általában a „”Kérje ajánlatunkat”, „Rendelje meg most!” és hasonló gombok, melyek cselekvésre buzdítanak. A hagyományos honlapokon a legtöbb Call-To-Action gomb egy kitölthető űrlapra visz: kapcsolat-felvételi, megrendelési, ajánlatkérő vagy hasonló űrlapokra. Persze a weboldalak Kapcsolat menüpontjában általában van telefonos elérhetőség is, de a legtöbbször az online, űrlapos kapcsolatfelvétel preferált.
Mobilon netezve viszont egész más a helyzet! Ott az űrlapokra irányítás helyett érdemes jobban kiemelni a telefonos kapcsolatfelvétel lehetőségét, ahol akár azonnal indíthat is hívást a felhasználó a telefonról. Egy mobilról netező számára ez sokkal komfortosabb lehetőség, mint hogy a rendelkezésére álló kicsiny felületen űrlapokat töltögessen.

Nézd át a weboldalad, ezúttal mobilról, hogy lecsekkold, hogy mindennek megfelel-e! A Google reszponzív tesztjét is ajánlom figyelmedbe, hogy megtudd, ő hogy látja a weboldalad!