Menü

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

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 weboldal?

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.

Honnan ismerem fel a reszponzív weboldalt?

Nem vagy biztos abban, hogy a weboldalad reszponzív technológiával készült? Az alábbi 9 eszköz segítségével pillanatok alatt ellenőrizni tudod, weboldalad reszponzív – e; ráadásul megtudhatod hogyan működik a különböző eszközökön.

Responsive Web Design Checker

Pixelemu

Am I Responsive ?

Responsinator

Website Responsive Test

Designmodo Responsive Test

X Respond

Google Mobilbarát Teszt

Screenfly

Érdekes adatok a reszponzív webdizájn használatával kapcsolatban

Már tisztában vagy vele, hogy mit is jelent a reszponzivitás, következzen néhány érdekes adat, melyek megerősítik miért is elengedhetetlen a reszponzív webdizájn használata.

1. A globális internetforgalom több mint fele mobil készülékekről érkezik

Valójában már 2017 – ben 52 % volt a mobil készülékek aránya az összes internetforgalmon belül. Ez az arány tovább nőtt az idei évben is, és minden bizonnyal jövőre is növekedést fogunk tapasztalni.

Magyarán, ha nem működik tökéletesen a weboldalad minden képernyő felbontáson, elveszítheted akár több mint a látogatóid felét.

2. 2017 – ben az interneten történő vásárlások felét mobil készülékekről végezték

Az adat az Amerikai Egyesült Államokból származik, azonban ugyanez a trend tapasztalható hazánkban is. Ráadásul ahogy nő a mobilkészülékek aránya az összes internetes forgalmon belül, logikusan következtethetünk arra, hogy a vásárlások aránya is hasonlóan fog alakulni.

3. Az internetezők közel 60% -a vásárlás előtt mobil készülékének segítségével keres rá az eladóra

Amennyiben a weboldalad nem megfelelően jelenik meg a felhasználóknak, arra következtetnek, hogy nem vagy megbízható. „Hiszen a mai világnak kinek nincs jól működő weboldala?” – gondolhatja a felhasználó. És igaza van!

4. A vásárlók 80% - a azonnal elhagyja azt a weboldalt ami nem jelenik meg tökéletesen a mobilkészülékén

5. A Google szerint a felhasználók 60% - a soha többet nem keresi fel azokat a weboldalakat, amelyeknél nehézségbe ütközött a böngészése során; és 40% felkeresi a versenytársak weboldalát

6. A Google kutatása szerint a felhasználók 83% - a tartja fontosnak azt, hogy minden készülékről zökkenőmentesen tudjon böngészni egy weboldalon

7. A mobil készülékeken 64% - al magasabb a konverziós arány, mint az asztali számítógépek esetében

8. A weboldallal rendelkező vállalkozások közel negyede egyáltalán nem rendelkezik mobilbarát weboldallal

A reszponzív weboldalak 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. 

2018-ra 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 website-okra

Több mint valószínű, hogy a weboldalad reszponzív; vagy most tervezed elkészíteni a megfelelő weboldaladat. Attól függetlenül, hogy milyen a saját weboldalad, nem árt tisztában lenni azzal, hogy melyek azok a honlapok, amik kifejezetten szépek és közben megfelelően alkalmazzák a reszponzív technológiát. Lehet, hogy olyan ötleteket találsz rajtuk, melyeket fel tudsz használni a saját weboldalad esetében.

EBags

Garmin

HubSpot

Sony

Time

Smashing Magazine

Tree House

Harvard University

Starbucks

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ó.

Hogyan befolyásolja a reszponzivitás a keresőoptimalizálást (SEO)

Növeli a weboldal használhatóságát (Usability)

Abban az esetben, ha a felhasználók könnyen navigálnak a weboldaladon, nem valószínű, hogy hamar bezárják a böngészőablakot. A Google algoritmusa figyelembe veszi a felhasználók által a weboldaladon eltöltött időt, és minél magasabb ez a szám, a felhasználói élmény (UX) annál nagyobb, és ez meg fog látszani a keresési és találati oldalon elfoglalt helyezésedben is.

A felhasználó élmény (UX) és a használhatóság (Usability) pozitív hatását nem lehet elég alkalommal elismételni, de ez a két szempont egyre nagyobb hatással van a Google kereső algoritmusára.

Növeli a weboldal sebességét

A weboldal betöltési sebessége egy szinte mindenki által ismert, fontos rangsorolási tényező a keresőalgoritmusokban. A reszponzív weboldalak már mobilra vannak optimalizálva, ami az oldal betöltési sebességének a csökkenését is magában kell hogy foglalja. Magyarán, a reszponzív weboldalak általában gyorsabbak, mint a nem mobilra optimalizáltak, ezért a Google algoritmusa is előkelőbb helyen jeleníti meg őket, a keresési és találati oldalon.

Csökkenti a visszafordulási arányt

A visszafordulási arány közvetlen kapcsolatban van, az oldalon eltöltött idővel. A magas visszafordulási arányt a Google algoritmusa úgy értelmezi, hogy a weboldal nem volt releváns a felhasználók számára, ezért egyre kevesebb alkalommal jeleníti meg nekik. Mivel a reszponzív weboldalak használhatósága és felhasználó élménye növekszik, ezáltal az oldal elhagyók száma csökkenésnek indul.

Kevesebb duplikált tartalom

A Google algoritmusa bünteti azt, amikor többször ugyanazzal a tartalommal találkozik. Abban az esetben, ha egy weboldalnak van külön asztali és külön mobil készülékekre optimalizált része; habár más és más webcímük van; a rajtuk található tartalom megegyezik. Ez pedig súlyosan károsítja a weboldal rangsorolását.

Ezzel ellentétben a reszponzív webdizájn esetében csak egy tartalom van, ami más és más formában jelenik meg a különböző képernyőfelbontásokon!

6 hasznos, az alapokat bemutató oktatóanyag reszponzívitás témában

Napjainkban a reszponzív weboldalak tervezése könnyebb, mint azt bárki gondolta volna akár egy évvel ezelőtt. Rengeteg hasznos eszköz és oktatóanyag áll a rendelkezésünkre, melyek segítenek a weboldalunk létrehozásában és tesztelésében. Ezek az oktatóanyagok 99% - ban angol nyelven érhetőek el. A következőkben bemutatunk néhányat, melyek segítséget nyújtanak abban, hogy weboldalunk jól működjön és minden eszközön megfelelően jelenjen meg. 

1. Útmutató a reszponzív webdizájnhoz

James Avery által írt, profi webdizájnerek segítségével megalkotott leírás, a reszponzivitás alapjairól és azok megfelelő használatáról.

2. Hogyan készítsünk reszponzív űrlapokat

Útmutató az űrlapok megfelelő és hatékony elkészítéséhez.

3. Reszponzív elrendezés készítése CSS rács (CSS Grid) segítségével

4. Reszponzív dizájn készítése a való világ számára

Videó arról, hogyan készítsük el úgy a weboldalunkat, hogy az ne csak technikailag legyen tökéletes, de a felhasználók is hasznosnak találják.

5. A megfelelő technikai reszponzív webdizájn

6. Lábléc készítésének 5 módja

Ragadós (sticky) láblécet készíteni egyszerű, mondják a legtöbben. Azonban ez nem teljesen fedi a valóságot. Nem egyszerű létrehozni olyan láblécet, ami minden képernyőfelbontáson tökéletesen jelenik meg. Az oktatóanyagból azonban megtudhatod, hogyan kell jól megcsinálni.

Hasznos linkek reszponzív weboldal készítés témában

Cikkünket folyamatosan bővítjük az aktualitásokkal, azonban mint minden témában, a reszponzív weboldal készítés esetében is nehéz nyomon követni a változásokat, és teljes mélységében kifejteni azokat. Következzen néhány hasznos link, melyek segítséget nyújtanak a témában.

w3schools.com

Wikipedia - Responsive web design

50 Examples of Responsive Web Design

Responsive Web Design Checker

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!