• 2019. 05. 25. szombat
    Orbán
  • 12 ℃
    23 ℃

Reszponzív weboldal tervezés tanácsok kisvállalkozásoknak

A reszponzív weboldal tervezés főbb szempontjai

- Saját cikk

A mobil internetezés hatalmas fejlődésen ment keresztül az utóbbi években, köszönhetően a növekvő internet sávszélességnek és az egyre nagyobb kijelzővel rendelkező okostelefonoknak. A hagyományos webes technológiáknak rövid idő alatt kellett átállniuk egy egészen újszerű tervezési és programozási módszertanra, amelye lehetővé tette, hogy a weboldalak okostelefonokon is gyorsan és könnyen kezelhetően jelenjenek meg. Ezt a technológiát reszponzívitásnak nevezik. Lényege abban rejlik, hogy a weboldal szerkezete rugalmasan igazodik az adott képernyő felbontásához, így csak függőlegesen kell görgetni a tartalmat. Cikkünkben megpróbáljuk tanácsokkal ellátni azokat a kisvállalkozásokat, akik most tervezik a reszponzív weboldalra történő átállást. 

1. Tanulj látogatóid viselkedési szokásaiból

A reszponzívitás lényege nem csak abban rejlik, hogy más technológiával fejlesztjük magát a weboldalt. A változás ugyanis már a tervezés során elkezdődik. A mobil internet használat nem csak egy másfajta képernyő méretet és felbontást jelent, de más használati szokásokat is. Az asztali géppel szemben a mobilt sokszor állva tartjuk, szemünk távolabb van a kijelzőtől és a mutató eszköz a sokkal nagyobb és pontatlanabb ujjunk. A fényviszonyok is általában rosszabbak, mint egy asztali gép esetén. Ezen körülményekből következően mobilon nagyobb betűtípust, kontrasztosabb színeket, nagyobb nyomógombokat használunk és ezt már a tervesés során is figyelembe kell venni.

 

  Forrás: https://www.eleven.nl


2. Egyszerűsítsd a navigációd

A hagyományos weboldalak esetében nem nagyon okoz gondot a terjengősebb, sokszintű menüszerkezetek megjelenítése és ezzel általában a látogatók is elboldogulnak, feltéve, ha a menü logikusan van felépítve.

Mobilon egészen más a helyzet, ugyanis vízszintesen nincs elegendő hely a menüpontok elhelyezésére, éppen ezért mobil menüt használunk, ahol az egyes elemek egymás alatt jelennek meg. De mivel függőlegesen is korlátozott a hely, ezért kulcsfontosságúvá válik a menü struktúra egyszerűsítése a könnyebb kezelhetőség érdekében.

Ökölszabályként javasolt kb. 5 főmenüpontot megjeleníteni a menüben és lehetőség szerint minimális almenüt használni.

  Forrás: https://mogney.com/


3. Figyelj a tipográfiára

Gyakori reszponzívitásbeli probléma, amikor a weboldal látszólag jól igazodik a képernyő felbontásához, de a betűméret marad akkora vagy még kisebb is lesz, mint asztali kijelzőn. A látogató nehezen tudja elolvasni a szövegeket, a nyomógombokat még kevésbé és ennek eredményeképpen, ha elveszíti türelmét – márpedig elfogja - elkattint az oldalról.

A megoldás tehát az, hogy növeljük a betűméretet, a kontrasztot és a sormagasságot a kisebb kijelzők esetében és folyamatosan teszteljük az oldalt, hogy valóban tökéletesen olvasható-e mobilon.

 

  Forrás: https://sageculture.com/


4. Nyomógombok, CTA-k

Ahogy a bevezetőben is említettem, mobilon a mutató eszköz az ujjunk. Az ujj lényegesen nagyobb és pontatlanabb, mint a hagyományos egér. Éppen ezért a nyomógombok tervezése során ügyelni kell arra, hogy megfelelő méretűek legyenek és kellő távolságban legyenek egymástól ahhoz, hogy a látogató magabiztosan, tévesztés nélkül rá tudjon kattintani.

A nyomógombok formájának kiválasztása során ügyfelni kell arra, hogy kitűnjenek környezetükből, lehetőség szerint legyenek sarkaik lekerekítve, hogy a látogató számára egyértelmű legyen mi az ami kattintható és mi nem. A még mindig divatos háttérbe olvadó ghost button népszerű, de sokkal kevésbé hatékony, mint „gombszerűbb” társai.

 

  Forrás: http://www.rfxinc.com/


5. Használj minél több white space-t

A white space az az üres terület, amely a weboldalon elválasztja egymástól az egyes tartalmi elemeket, szövegeket, képeket, ikonokat … stb.

A reszponzív weboldalon növelni kell a white space méretét, nem csak azért, hogy az előbbi pontban említett nyomógombok biztonságos távolságba kerüljenek egymástól, hanem azért is, hogy a weboldal könnyebben áttekinthető és olvasható legyen.

A white space-re nem holmi helypazarlásként kell tekinteni, hanem egy olyan elemként, amely növeli a felhasználói élményt és a látogatói elégedettséget.

  Forrás: https://frakton.com/


6. Mobile first tervezés

Ha még csak most készülsz áttérni a reszponzív weboldalra, akkor érdemes egy még nagyobb lépést tenni és megfontolni a mobile first tervezést. Ez az elv azon a statisztikán alapszik, amely szerint most 2019-ben már többen látogatják a weboldalakat mobilról, mint asztali gépről. Akkor a tervezés során miért ne a mobil verzióból induljunk ki és csak ezután „bővítsük” fel az oldalt desktop verzióra?

Ez valóban nagy ugrás a tervezésben és még kevés az olyan designer aki alkalmazná, de mindenképpen ez a jövő, érdemes barátkozni a gondolattal, mert előbb-utóbb iparági sztenderd lesz.

  Forrás: https://projecthydro.org


7. Optimalizáld a képeket

Mobilon a reszponzív weboldal betöltődési sebessége kritikus a felhasználói élmény szempontjából. Ha nem töltődik be 3-4 másodpercen belül az oldal, akkor látogatóinak 25-30%-át elveszítheti. A betöltődési sebességben pedig sokszor a nagy méretű képek játszák a legnagyobb szerepet. A cél tehát mindenáron 3-4 másodperc körüli értékre szorítani a betöltődési időt és ennek első lépése a nagy méretű képek tömörítése.

A weben már számos olyan eszköz érhető el, amely weboldalad képeid kigyűjti és optimalizálja ezzel drasztikusan javítva a betöltődési időt.

  Forrás: https://www.hotel-spider.com/en

8. Tesztelj!

A már reszponzívnak mondott weboldalakon is nagyon sok kritikus hibát találunk. Ezért ne elégedj meg azzal, hogy fejlesztőd azt mondja weboldalad már reszponzív. Ragadj mobilt és kérd meg kollégáidat, ismerőseidet is, hogy menjenek fel az oldalra és kattintgassák végig az egyes menüpontokat és írják meg mint tapasztalnak.

  Forrás: https://www.inovarion.com/

Összefoglalás

A mobilon történő internetezés nagy változást hozott a weboldalak tervezésében, design-jában és programozásában egyaránt. Sajnos sok kisvállalkozás el van még maradva ezen a téren, bízom benne, hogy cikkem segítségül szolgált az első lépések megtételében.

Cikkünk szerzője: Tusnádi István

Bővebb információ: https://www.usernet.hu/blog/reszponziv-weboldal-keszites-legfontosabb-tudnivalok



Ez is érdekelheti