Menü

Reszponzív weboldal készítés legfontosabb tudnivalók

2017. május 03. | 5029

Talán hallottál már a „mobilgeddonról” – arról a Google-frissítésről van szó, mely 2015. április 21-étől a mobilos kereséseknél a mobilra optimalizált oldalakat előnyben részesíti (logikusan), míg a mobilra nem optimalizált weboldalakat hátrébb rangsorolja. A frissítésről itt olvashatsz bővebben.

Ha mobiloptimalizálásról van szó, akkor az egyik kulcsfogalom a „reszponzív weboldal”.

Mi a reszponzív dizájn?

A reszponzív dizájnnál a neve is mutatja, hogy „válaszol” (response) az aktuális felbontásra. Ez annyit tesz, hogy monitorról, tabletről és okostelefonról megnézve az oldal tökéletesen néz ki (olvasható, szép, funkcionális), mert a dizájn mindig követi azt, hogy épp mekkora képernyőről nézik az oldalt, és aszerint épül fel.

Másik megközelítésben: a reszponzív oldal felbontásfüggetlen.

Érthetőbbé válik, ha fogod a böngésződ ablakát és elkezded lekicsinyíteni. Nézd meg, hogy az oldalunk válaszol a megváltozott képernyőméretre – és ugyanúgy olvasható és böngészhető marad. (Ugyanígy alakul át, ha mobilról nyitod meg.)

A reszponzív dizájnt egyértelműen az egyre többféle méretű kijelző megjelenése hívta életre. Egy olyan megoldásra volt szükség, mely mobiltól a tableten keresztül az asztali számítógépekig, minden eszközön képes megjeleníteni egy weboldalt azonos URL alatt, közel azonos dizájnnal és tartalommal. A korábbi fix szélességű elrendezéssel készülő weboldalak már nem tudtak optimálisan megfelelni a mobileszközök által támasztott igényeknek.

Tehát reszponzív dizájnnak nevezzük azt az oldalt, amely minden képernyőn jól jelenik meg.

Fontos, hogy a reszponzív dizájn nem egyenlő a mobilbarát dizájnnal – a reszponzivitás túlmutat a mobilon, és tableten is jól jelenik meg.

A reszponzív dizájn előnyei

1) Egyetlen oldallal kiszolgálhatsz minden képernyőt

Nem tudod megjósolni, hogy 2 év múlva épp mekkora mobilok lesznek (emlékszel, hogy az okostelefon-forradalom is kisebb mobilokkal kezdődött, ma meg már alig fér a zsebedbe a telefonod).

A felbontás és képernyőméret eszközről eszközre, gyártóról gyártóra, típusról típusra változik – hihetetlenül erőforrásigényes lenne (például) 90 különböző oldalt készíteni, hogy minden eszközön jól jelenjen meg az oldalad (plusz ha kijön egy új képernyőméret, akkor el kell készítened a 91. verziót is). Ráadásul könnyen belezavarodsz az oldalaidba, a frissítés nagyon nehéz, és duplikált tartalmat is könnyen létrehozhatsz.

De a jól felépített reszponzív weboldallal minden eszközt kiszolgálsz – az átméretezést megoldja az oldalad.

2) Jó látogatói élményt adhatsz eszközfüggetlenül

Egyrészt rangsorolási szempontnak számít (mérik a lepattanást, oldalon töltött időt stb.), másrészt a mobilos vásárlás egyre erősödik (lásd e cikkben alább).

3) Egyetlen URL

Nemcsak a fejlesztést, de a keresőoptimalizálásodat is egyszerűsíti, ha nincs külön mobilos oldal (m.teoldalad.hu), hanem reszponzív dizájnnal „letudod” a mobilosításodat.

Ha külön mobilos oldalt hozol létre, akkor azt külön kell keresőoptimalizálnod, ami drágább és tovább tart.

4) Mobilos keresések

A cikk elején említett Google-frissítést kipipálhatod, és elveheted azon versenytársad forgalmát, aki még nem használ reszponzív dizájnt.

5) Könnyű bővíteni

A reszponzivitás elsősorban egy szemlélet, ezért a jó fejlesztő olyan weboldalt készít, amely a bővíthetőségében is rugalmas. Értsd: ha új menüpontokat szeretnél hozzáadni, könnyedén megteheted. Mivel az oldal elemeit nem pixelekben adjuk meg, hanem arányokban, így a bővítéstől nem fog szétesni az oldal.

6) Hosszú távon gazdaságos

Csak egyszer kell belenyúlni a kódba vagy a tartalomba, nem pedig külön mobilos és desktopos verziót kezelni, akár fejlesztésről, akár a tartalom bővítéséről legyen szó. A reszponzív webdizájnnal 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 reszponzív weboldalunk, úgy a jövőben is alkalmazkodni fog.

„Vannak hátrányai?”

Nem létezik olyan termék, szolgáltatás vagy technológia, melynek nincsenek hátrányai. A reszponzív dizájnnak is akad pár, mégpedig az alábbiak.

1) Lassabban tölt be. Ha mobilról jeleníted meg, attól még a PC-s menüsáv is betölt, csak épp nem látod. Optimalizálással és tisztán tartott kóddal azért lefaragható a betöltési idő.

2) Kvázi ugyanolyan élmény. Egyetlen weboldallal szolgálod ki a PC-s és mobilos látogatókat is, amely neked valóban egyszerűbb, de a két látogató nem feltétlenül ugyanarra vágyik. Nehezebb más tartalmat megjeleníteni, és ha eltér a két vásárlói útvonal, azt is bonyolult kettéválasztani.

3) Befektetésigényes. A reszponzív struktúra a weboldalad kódolásában kezdődik, és a régi, elavultabb oldalaknál ez teljes újradizájnt jelent. Ha a weboldalad modern és kiválóan néz ki, akkor valószínűleg a kinézete megtartható, ám a felépítését át kell alakítanunk.

A leggyakrabban elkövetett hiba reszponzív weboldalak tervezése során, hogy a webdizájnerek vagy éppen a weboldal tulajdonosok számára még mindig az asztali számítógépek, laptopok jelentik az első számú felületet. Erre terveznek elsősorban, pedig a mobileszközök kijelzőjére kellene a „mobile first” szemlélet jegyében, majd innen méretezni felfelé a weboldalt a nagyobb kijelzőkre. A „mobile first” szemléletnek oka is van, mégpedig az, hogy ezáltal könnyebben kiküszöbölhetők azok a hibák, melyek a mobilkijelzőkre történő konvertálás során óhatatlanul is felbukkannak, és képesek tönkretenni a felhasználói élményt a mobileszközökön.

Mit mond a Google?

Kifejezetten ajánlják: elismerik, hogy a mobilra optimalizálás legelterjedtebb formája a reszponzív dizájn (nem véletlenül). Egy HTML, egy URL, CSS-ben megadott „media queries” – kövesd ezt a dizájnszemléletet.

A Google mobil algoritmusa az adaptív dizájnnal készült weboldalakat is mobilbarátként rangsorolja, a legjobb megoldásnak a Google a reszponzív weboldalt tartja. Reszponzív dizájn használata esetén azonos az URL és nem kell minden fájlból kettő, ami a keresőnek is egyszerűbbé teszi a helyzetét. Ráadásul a látogatók száma sem oszlik el a két URL között. 

Miért fontos? Reszponzivitáshoz kapcsolódó adatok:

2014-ben jött a fordulópont: immár világszerte több mobileszköz csatlakozik internetre, mint PC. (comScore)

A vásárlóid egyre többet interneteznek mobileszközökről, ráadásul többképernyősök vagyunk. A Google statisztikái szerint a felhasználók 90%-a eszközt vált egy-egy feladatnál – pl. elkezd egy vásárlást PC-n, de mobilon fejezi be (ha tudja), mobilon megnézi az emailjeit, ám PC-n válaszol és így tovább.

Még fontosabb adat: a MoPowered szerint az emberek 30%-a elhagyja a kosarát, ha az oldal rossz látogatói élményt nyújt mobilon.

Egyébként a vásárlók 63%-a úgy tervezi, hogy a következő években egyre többet és többet fog mobileszközeiről vásárolni (Latitude). Az okostelefonnal rendelkezők 58%-a használta már vásárlásra (vagy ahhoz kapcsolódó tevékenységre, pl. árösszehasonlításra) az eszközét (Deloitte).

Az emberek 57%-a nem ajánlaná azt a céget, amelynek a mobilos megjelenése csapnivaló (Google). Szintén Google-adat, hogy 41%-uk a rossz mobilos oldal bezárása után inkább a versenytársnál költötte el a pénzét.

Tehát a mobilos weboldal nemcsak azért fontos, mert a „Google ezt várja el” – a Google azt „várja el”, amit az emberek csinálnak. A vásárlóid mobilon vannak, mobilon gyűjtik az infókat, mobilról indítják a vásárlásukat – ha nem szolgálod ki őket egy kiváló reszponzív (és felhasználóbarát) oldallal, akkor bevételeket veszítesz.

2017-re kibővült a reszponzivitás fogalma

A reszponzív design jelentése mára megváltozott az eredeti jelentéséhez képest. Leszűkült arra, hogy egy design különféle méretű kijelzőkhöz igazodik. Manapság az újabb eszközök megjelenése miatt vissza kell térni a reszponzív dizájn eredeti, teljes jelentéséhez, vagyis hogy képesek legyünk reagálni és kommunikálni is a felhasználóval. 

A reszponzív dizájnok típusai

A reszponzív oldalak általában „folyékony rácsot” használnak, melyben a rács elemeit nem fixen adjuk meg (fix az, hogy az oldalsáv 300 px), hanem arányokban (pl. az oldalsáv legyen az oldal 20%-a). A képek átméretezhetők lesznek, illetve néhány szabállyal mobilosíthatod. Például beállíthatjuk, hogy bizonyos felbontás alatt jelenjen meg egy mobilos menü (és az oldalsáv tűnjön el), a linkek legyenek nagyobbak (mert nem kattintani fogja a látogató, hanem érintőképernyőn tappolni).

Lényegében minden weboldal reszponzívvá tehető, bár az oldalad típusától függően másfajta dizájnszemléletet használunk.

„Folyékony” dizájnt akkor, ha az oldal elemeinél megoldható, hogy elcsússzanak és átméreteződjenek.

„Column drop” akkor, ha több oszlopot használ az oldalad (tartalom, menüsáv, harmadik oszlop), és a kisebb méreteknél egy-két oszlopot elhagyunk (és kiváltjuk mobilos menüvel).

„Layout shifter” – az oldal felépítése megváltozik. A teljes felépítés látszik asztali gépen, míg kisebb felbontásnál egy kis képernyőre optimalizált felépítésre „ugrik” az oldal.

Minimális változtatásokat használunk, ha az oldalad felépítése egyszerű (egy oszlop a tartalomnak), és minden képernyőn megtartható ez a felépítés – csak a betűméretet kell megnövelni, linkeket nagyobbá tenni és ehhez hasonló apró finomításokkal érhetjük el a mobilos megjelenést.

„Off canvas” felépítésnél az oldalad mobilról kevésbé fontos elemei „eltűnnek” (továbbra is betölt, csak a képernyőn nem látszik).

Néhány példa a reszponzív dizájn használatára

Designmodo

Egyszerű és hatékony felépítésű oldal, tökéletes reszponzivitással. Mind a képek, mind a szövegek alkalmazkodnak bármely képernyőfelbontáshoz.

The Boston Globe

Valószínüleg minden híroldalnak úgy kéne funkcionálnia minden eszközön, mint a The Boston Globe teszi. Bármely képernyőfelbontáson böngésszük a weboldalt, mindig tökéletesen olvasható marad.

Food Sense

Egy nagyon tipikus, bal oldali menüvel rendelkező blog. Mégis tökéletesen alkalmazkodik minden lépernyőfelbontáshoz.

Mit hozhat a jövő?

A kijelzők sok eszközön egyre kisebbé válnak, miközben bővülnek a képességeik. Valószínüleg a jövőben a kijelz a fogalma is bizonytalanná fog válni. Hiszen például egy Oculus Rift kijelzőnek számít? Vagy mi a helyzet az autók szélvédőjén megjelenő interface-szel? Vagy azzal, amit a Holo Lens helyez a szobánk falára?

Tehát egyfelől a vizuális felhasználói felületek esetében már nem csak a világító négyzetről van szó, mint amit a mobilunkat elővéve látunk. Másfelől viszont a hang vagy az érintés alapú visszajelzések révén még több lehetőség adódik kommunikációra a felhasználókkal. A mobilitás ebben a helyzetben egyet jelenthet a teljes reszponzivitással, hiszen a rendszer alkalmazkodik a felhasználókhoz, nem pedig nekik kell hozzá igazodni.

Miért elengedhetetlen a reszponzív dizájn használata?

A weboldalak megtekintésére használt eszközök folyamatosan változnak. Hihetetlen gyorsasággal jelennek meg az újabb és újabb méretű és felbontású okostelefonok, tabletek. Pár éve nem gondoltuk, hogy öt hüvelyknél nagyobb méretű telefonokkal fognak előrukkolni a mobilgyártó cégek. Ehhez képest rohamos mértékben terjednek az okostelefonok és tabletek képességeit ötvöző phabletek is. Végérvényesen lezárult az a korszak, amikor egyetlen felbontásra, egyetlen kijelző méretre, egy felbontásra kellett koncentrálnunk, mivel a weboldalakat manapság már számtalan különböző felbontású kijelzőn nézik a látogatóink.

Van aki okostelefonról, van aki tabletről és van aki laptopról vagy hagyományos asztali számítógépről érkezik. Milyen jó is lenne ha egyetlen honlappal mindhárom kijelzőn könnyen olvasható tartalma és rugalmasan működő, szép dizájnja lehetne weboldalunknak.

Ebben segít a reszponzív webdizájn, amelynek során több méretben készítjük el a grafikát, így a változó felbontás és kijelző méret mellett is, a szépen megjelenő képek, az olvasható betűméret és a könnyű navigáció miatt, komfortosan érzi magát weboldalunkon a látogató.

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

Minden új weboldalunkat reszponzívan 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