Menü

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

2018. október 27. | 9839 |

A reszponzív weboldal ahogy 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 design mindig követi azt, hogy épp mekkora képernyőről nézik az oldalt, és aszerint épül fel.

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. 

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

Az Accelsiors reszponzív weboldala

Mi a reszponzív weboldal?

A reszponzív weboldal felbontásfüggetlen. Érthetőbbé válik, ha fogod a böngésződ ablakát és elkezded lekicsinyíteni. Nézd meg, hogy ez a blog oldalunk hogyan reagál a megváltozott képernyőméretre! Folyamatosan változik az éppen adott mérethez igazodva.

A reszponzív webdesign-t 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ívnak nevezzük azt a weboldalt, amely minden képernyőn jól jelenik meg.

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

Lux International reszponzív weboldalak

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, hogy weboldalad reszponzív –e és ha igen, akkor nem tartalmaz-e hibákat.

Érdekes adatok a reszponzív weboldalakkal kapcsolatban

Ha 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 weboldalak 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 reszponzív weboldallal

Az Ábris Kft. reszponzív weboldala

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 weboldallal 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 oldalunk, úgy a jövőben is alkalmazkodni fog.

A B+N Referencia Zrt. weboldala

Mit mond a Google a reszponzívitásról?

Kifejezetten ajánlják: elismerik, hogy a mobilra optimalizálás legelterjedtebb formája a reszponzív design (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 design 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. 

A reszponzív weboldalak típusai

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

Az alábbi listában összegyűjtöttünk néhány referencia értékű reszponzív weboldal mintát.

Az Accelsiors számára általunk készített weboldal:

Az Accelsiors reszponzív weboldala

A B+N Referencia Zrt-nek készített weboldalunk:

A B+N Referencia Zrt. weboldala

Az Ábris Kft. reszponzív weboldala:

Az Ábris Kft. reszponzív weboldala

A Lux International számára készített reszponzív weboldalak:

Lux International reszponzív weboldalak

A Process Solutions weboldala:

A Process Solutions weboldala

A Trocellen csoport reszponzív weboldala:

A Trocellen csoport reszponzív weboldala

Miért elengedhetetlen a reszponzív weboldalak 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 webdesign, 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ó.

Tetszett a cikk? Ne maradj le az újdonságokról!

Iratkozz fel és havonta egyszer küldünk egy összefoglaló e-mailt!