Menü

Mi az a responsive web design (RWD)?

2017. május 31. | 10582

Az okostelefonok, táblagépek, laptop-ok hatalmas fejlődésen mentek keresztül az utóbbi években. A Morgan Stanley legfrissebb kutatása szerint 2014-ben már többen fognak valamilyen mobil eszközről internetezni, mint hagyományos asztali számítógépről.

Annak ellenére, hogy az okostelefonok kijelzőjének mérete folyamatosan növekszik, még mindig jelentősen elmarad egy hagyományos monitor méretétől. Ráadásul a mobilon való internetezést a kijelző kis méretén túl további körülmények is nehezítik. Ilyen zavaró körülmények a zaj, a látási viszonyok, pl. napsütés illetve a folyamatos mozgás, rázkódás.

A weboldalt fejlesztők számára további kihívást jelent a mobil készülékek adta hatalmas változatosság. Alig néhány év leforgása alatt több tucat különböző képernyő méret, új operációs rendszerek, új böngészők jelentek meg és terjedtek el a piacon.

Hogyan lehet olyan weboldalt fejleszteni, amely az összes böngészőben, felbontáson és készüléken tökéletesen jelenik meg?

Az egyik megoldást a responsive web design (RWD) jelenti, ahol a weboldal automatikusan alkalmazkodik ahhoz az eszközhöz amelyen megjelenítik, ezzel optimális felhasználói élményt nyújtva.

A responsive web design lehetőséget ad arra, hogy ugyanaz a weboldal eszköztől, operációs rendszertől, böngészőtől függetlenül bármilyen környezetben tökéletesen jelenjen meg. Tökéletes megjelenés alatt a képernyőhöz igazodó ablak méretet, a könnyű olvashatóságot jelentő betű méretet és kontrasztot, a kijelzőhöz igazodó kép méretet és a könnyű navigációt értem.

A responsive web design nem más, mint egy weboldal készítési eljárás. A hagyományos weboldal készítéssel szemben a fejlesztőnek már a grafikai tervezés időszakában egészen másfajta megközelítést kell alkalmaznia. Mivel eszköz független weboldalt tervezünk, ezért a grafikai tervet kiegészíti több olyan terv, amely bemutatja, a különböző felbontású eszközökön az oldal hogyan fog megjelenni. Tehát többfajta elrendezést és megjelenést tervezünk, az alkalmazott technológia teszi lehetővé, hogy a weboldal a megjelenés pillanatában az eszköz felbontásához igazodó változatot jelenítse meg.

A látogató ugyanaz a weboldalt látja, de más és más formában attól függően, hogy milyen eszközt használ.

A responsive weboldalak előnye és hátránya

A fejlesztők a mai napig vitáznak azon, hogy egyedi eszközre fejlesztett weboldalakat célszerű készíteni vagy inkább responsive web design alkalmazni.

Az egyedi eszközökre készített különálló weboldalak fejlesztési és karbantartási költsége jelentősen magasabb, mint a responsive oldalak esetében.  Ráadásul a jelenlegi trendek alapján a jövőben a mobil eszközök még változatosabbak lesznek. Az a fejlesztő, aki minden platformra, felbontásra, képernyő méretre egyedi oldalt tervez, képtelen utolérni magát, hiszen hetente jelennek meg olyan újabb eszközök, amelyek szakítanak elődeik hagyományaival.

Előnyei

Egy szeparált mobiloldalhoz képest gyorsabb lesz a weboldalad, hiszen kevesebb az átirányítás a mobilos oldalakra. A gyorsaság pedig befolyásolja a rangsorolást.

Responsive weboldal esetén csökken a visszafordulási arány, hiszen a mobilról érkezők is jól tudják használni ezeket az oldalakat, amikor megnyitják. Ez az előny pedig meg fog mutatkozni a Google találati rangsorolásánál, mely figyelembe veszi a látogatásokat és a visszapattanásokat.

Hosszú távon gazdaságosabb egy reszponzív oldalt működtetni, hiszen mindig csak egyszer kell belenyúlni a kódba vagy a tartalomba, nem pedig külön mobilos és asztaliverziót kezelni, akár fejlesztésről, akár a tartalom bővítéséről legyen szó.

Responsive webdesignnal felkészülünk minden, a jövőben megjelenő eszközön való böngészésre, hiszen ahogy jelen pillanatban is minden kijelzőhöz igazodik a responsive weboldalunk, úgy a jövőben is alkalmazkodni fog.

Ma már a felhasználók döntő többsége arra számít, hogy egy weboldal legalább ugyanolyan jó, mint az asztali verzió. Számítanak a mobilhoz kapcsolódó extra funkciókat, és komoly csalódást okoz nekik, ha egy korábban asztali monitoron használt weboldalt menet közben a telefonjukon nem tudnak a megszokott módon használni.

Használatában rejlő buktatók

Gyakran előfordul, hogy nem vizsgáljuk meg megfelelően a felhasználói viselkedést. Pedig amikor responsive webdesignra váltunk, akkor nagyon fontos, hogy információkat gyűjtsünk a felhasználói szokásokról, preferenciákról, a felhasználók típusairól, érdeklődésükről, és ezek tudatában tervezzük meg az akadálytalan mobilos használatot. Érdemes vizsgálni azt is, hogy milyen mobileszközöket és milyen célból használnak gyakran a látogatóink. A webdesignerek csak a felhasználói viselkedés ismeretében tudnak hosszabb távon eredményes reszponzív weboldalakat tervezni.

A weboldal tesztelése hivatott arra, hogy még a weboldal élesítése előtt kiderüljenek annak hibái, akadálytalanul lehessen használni őket. Ennek ellenére sok weboldal kerül élesítésre mindenféle tesztelés nélkül. Ha nem is mindent, bizonyos elemeket mindenképpen tesztelni kell egy-egy újonnan indított weboldal kapcsán. Például a weboldal kompatibilitását a különféle böngészőkkel és operációs rendszerekkel, de fontos különböző eszközökön is ellenőrizni a weboldalt az indulás előtt.

A sebesség elsődleges szempont kell hogy legyen minden weboldal esetében. A látogatók komoly százaléka elkattint, ha az oldal nem töltődik be 3-5 másodpercen belül. A weboldal sebesség optimalizálása egy külön művelet, amely magas szakértelmet és sok időt igényel. Ki kell szedni az oldal forráskódjából a nem használt modulokat (vagy nem is kell olyanokat betenni), optimalizálni kell a képeket, tömörítést kell beállítani, cache-elést kell beállítani ... stb. Természetes, hogy az egyszemélyes fejlesztőnek erre sem kompetenciája, sem pedig ideje nincsen. A témában született egy átfogó cikkünk, megéri elővenni.

Röviden összefoglalva, nem fog számítani, mennyire lett lenyűgöző a responsive weboldalad, ha a betöltési ideje túl hosszú. A felhasználóknak nincsenek hosszú másodperceik arra, hogy megvárják, amíg megjelenik a böngészőjükben a weboldalad. A betöltési időt mindenképpen három másodperc alá kell szorítani, de minél gyorsabb, annál jobb. Különösen, ha mobileszközökről van szó, ahol a sebesség kérdése még kritikusabb. Ennek érdekében a képek, grafikák méretét optimalizálni kell, hogy megfelelő minőséget nyújtsanak, még elfogadható méret mellett, valamint minimalizálni a kódok méretét.

Honnan látom, hogy egy weboldal responsive design-al készült?

Egyszerűen: fogd meg a böngésző ablak szélét és kezd el csökkenteni az ablak méretét. Ha az ablak méretezésével a betű méret, kép méretek és az elrendezés is folyamatosan változik, akkor responsive oldallal van dolgod.

Milyen tényezőket kell figyelembe venni egy responsive weboldal elkészítésénél

Sebesség

Az okostelefonon internetező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 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, például 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 a legtöbb esetben 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 és slidereket.

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. Hasznos, ha ez a menü ikont a lefelé görgetés során is folyamatosan látszik és elérhető.

Betűméret

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

Funkcionalitás

A sliderek 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é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.

Cselekvésre ösztönzés

A cselekvésre ösztönző (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 cselekvésre ösztönző 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 böngészve 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 internetező számára ez sokkal komfortosabb lehetőség, mint hogy a rendelkezésére álló kicsiny felületen űrlapokat kelljen kitöltenie.

Elrendezés

Responsive weboldal esetében el kell felejteni a vízszintes görgetést. Egy weboldal szélessége mobilon megegyezik a telefon felbontásával. Ezért nincs oldalirányú 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.

Tartalom

A kevesebb ebben az esetben sokszor több! Valójában még mindig megoszlanak a vélemények abban, hogy kell-e, pontosabban 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. 

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 nem olyan dolgokra kell gondolni, melyek árthatnak az arculatnak. Azonban egy slidert nem biztos, hogy érdemes megjeleníteni mobilos nézetben. Ha pedig bizonyos blokkok a honlapodon képet is tartalmaznak a blokk neve mellett, akkor megfontolandó lehet lemondani a képek megjelenítéséről.

 

Készen állsz a reszponzívitásra? Segíthetünk?

Minden új weboldalunkat responsive-an készítjük el (mert minőségi elvárás), de régebbi oldaladat is átalakíthatjuk. Ha szeretnél árajánlatot kérni, akkor ezek a cikkek segíteni fognak: „Hogyan kérj weboldalkészítésre árajánlatot?” és "Weboldal árajánlat kérés minta"

Találkozzunk irodánkban, és egy kötetlen beszélgetés keretein belül beszéljük meg, mit szeretnél elérni, és mi hol, hogyan tudunk segíteni. Kattints ide, vedd fel velünk a kapcsolatot és vedd fel Velünk a kapcsolatot!

Tetszett a cikk? Oszd meg!

megosztom