Egy reszponzív, vagy más néven mobilbarát honlap képes rugalmasan alkalmazkodni a különféle kijelzők méretéhez és felbontásához. Ez azt jelenti, hogy minden eszközön, legyen az asztali számítógép, okostelefon, tablet vagy laptop, tökéletesen, az adott képernyő sajátosságaihoz igazodva jelenik meg.
Az okostelefonok és tabletek felívelő népszerűsége miatt a reszponzív webdesign hosszú évek óta slágertéma a honlapkészítők körében.
Ennek ellenére még ma is rengeteg olyan weblap működik, köztük ráadásul sok új, amelyet kizárólag asztali számítógép vagy laptop kijelzőjén lehet normálisan böngészni. Mobiltelefonról megnyitva szétesik, olvashatatlan a szöveg, túl kicsik a kattintható felületek, vagy éppen jobbra-balra kell húzogatni a képernyőt, hogy minden jól látható legyen.
Hogyan lehet olyan honlapod, amely teljes értékű böngészési élményt nyújt kisebb méretű kijelzőkön is? Ehhez igyekszem mankót nyújtani ebben a cikkben.
A bejegyzés legvégén mutatok egy kódot is, amely segít, hogy a weboldalad a magyar nyelvre oly jellemző hosszú szavakat is tökéletesen, önkényes szétdarabolás nélkül legyen képes megjeleníteni okostelefonokon és tableteken.
Miért fontos a reszponzív design?
Az első ok természetesen a mobileszközök már említett, folyamatosan növekvő népszerűsége. A statisztikák szerint 2015 első negyedévében a világ teljes internetforgalmának 31,1 százalékát adta a mobilos böngészés (a tabletes internetforgalom nincs beleszámítva!).
2019 első negyedévében ez a szám már 48,7 százalék. A magyarországi statisztikában is egyértelmű a trend: bár 2018-ban a teljes webforgalom 33 százalékát adták az okostelefonok, ez 61 százalékos növekedést jelent 2017-hez képest.
Vagyis ha ez így folytatódik (és miért ne folytatódna), rövid időn belül Magyarországon is igaz lesz, hogy
a teljes internetforgalom mintegy felétől megfosztod magad, ha nem mobilbarát a weboldalad.
Ugyanis a többség nem hajlandó okostelefonról olyan oldalt böngészni, ami nem képes kényelmesen és esztétikusan megjelenni egy kisebb méretű kijelzőn.
A reszponzív honlapkészítés jelentősége tehát még tovább fog nőni.
Ennek ellenére számítások szerint a vállalkozói weboldalak több mint 20 százaléka még ma sem reszponzív. Vagyis akár komoly versenyelőnyt is jelenthet, ha egy-egy olyan szegmensben, ahol még „nem divat” a reszponzív honlap, az első között készíttetsz magadnak mobilbarát honlapot.
Még egy érdekes adat, amiről jó, ha tudsz. Bár az emberek egyre jobban elvárják a reszponzivitást, érdekes módon a mobil készülékeken sokkal alacsonyabb a konverziós arány, mint az asztali számítógépek esetében. Az erről készült kutatások szerint az embereknek elsősorban biztonsági aggályaik vannak a mobil vásárlással szemben, de zavarja őket a nehezebb navigáció és a kisebb képméretek is.
A Google és a mobilbarát honlapok
Ha ez eddig nem lett volna elég meggyőző, még egy nagyon jó okod van arra, hogy reszponzív (angolosan responsive) weboldalt készíts, vagy készíttess magadnak.
Ez az ok pedig a Google, a világ legnépszerűbb keresőmotorja.
A Google algoritmusa okostelefonról indított keresés esetén már 2015 óta előnyben részesíti a mobilbarát honlapokat azokkal a weboldalakkal szemben, amelyek nem reszponzívek.
Ráadásul 2018 nyarán a Google elkezdett átállni az asztaliról a mobiltelefonos indexelésre. Ez azt jelenti, hogy a Google keresőrobotja először a weboldal mobilos változatát térképezi fel. 2018. decemberben bejelentették, hogy az összes keresés felét már mobile-first index alapján szolgálja ki a keresőmotor.
Mivel ez az arány a jövőben csak nőni fog, nem úszhatod meg az átállást a reszponzív webdesignra.
Ellenkező esetben hiába minden SEO erőfeszítés, hatalmas hátrányt fogsz szenvedni a Google keresőjében.
Ezért, ha szakemberre szeretnéd bízni a honlapod felépítését, mindenképpen olyat válassz, aki tisztában van a reszponzív weboldal készítés jelentőségével, kihívásaival és lehetőségeivel. Kérdezz rá bátran erre, és ha nem kapsz egyértelmű választ, inkább keress mást.
A reszponzív webdesign előnyei
Régebben az volt az elterjedt megoldás a mobileszközös böngészésre, hogy minden weboldalnak készült egy asztali és egy külön mobilos változata is, amit általában egy „m” betű jelölt az URL címben (például m.hvg.hu). Ennek azonban volt egy csomó hátránya.
Egyrészt egyszerre két külön oldalt kellett fejleszteni és üzemeltetni. Módosítás esetén mindkét oldalra külön fel kellett vinni a változtatásokat. Ráadásul a két külön oldal szóról-szóra pontosan ugyanazzal a tartalommal akár duplikációnak (tartalom másolásnak) is minősülhetett a Google szemében, és ezt általában nem szokta jutalmazni a keresőmotor.
Ezzel szemben a reszponzív design esetében egyetlen honlap van, minden módosítás automatikusan a weboldal mobilos megjelenés része is lesz. Emellett a reszponzív weboldalon mobileszközről böngészve a képek automatikusan a kisebb méretre optimalizálva jelennek meg. Így esztétikus marad a külcsín, plusz kisebb lesz a letöltendő adatmennyiség is, amikor valaki a weboldalra kattint. A kisebb adatmennyiség pedig növeli a weboldal sebességet.
És a legfontosabb:
a reszponzív design növeli a weboldaladra mobilról érkező látogatóit elégedettségét, és csökkenti a visszafordulási arányt.
Az elégedett felhasználó sokkal nagyobb valószínűséggel tér vissza máskor is a honlapodra, és természetesen sokkal hajlamosabb lesz a te szolgáltatásodat vagy termékeidet választani a konkurenciáddal szemben.
Néhány mondatban szeretnék arra is kitérni, milyen szempontok fontosak a reszponzív honlap kialakításakor.
Először is nagyon lényeges, hogy a mobilos verzió legyen gyors. Ugyanilyen jelentősége van a felhasználói élmény (UX) szempontjából, hogy a mobilos változat navigációja legyen egyszerű, könnyen elérhető és áttekinthető.
Kulcsfontosságú a megfelelő betűméret, sorköz és betűköz kiválasztása is. Ezt a kérdést nem lehet egyszerűen elintézni azzal, hogy legyen kisebb, mint az asztali számítógépes verzión. Persze, legyen kisebb, de nem mindegy mennyire, mert a túl kicsi betűket ugyanolyan nehéz olvasni, mint a túl nagyokat.
Szintén lényeges a kattintható felületek, például cselekvésre felhívő (CTA) gombok megfelelő, „ujjbarát” méretezése. Nincs idegesítőbb, mint amikor egy gomb túl kicsi ahhoz, hogy a hüvelykujjunkkal kényelmesen eltaláljuk egy mozgó buszon állva.
Honnan tudom, hogy reszponzív-e a weboldalam?
Hogy mobilbarát-e a honlapod, ellenőrizheted a Google saját tesztjével. Ha ez a kép fogad, miután lefuttatod a tesztet, akkor nagy gond nincs:
Persze ezt manuálisan is ellenőrizheted. A legegyszerűbb, ha megnyitod a honlapod mobiltelefonról vagy tabletről. De akár asztali monitorról vagy laptopról is képet alkothatsz arról, hogyan fest kisebb kijelzőn a honlapod, ha elkezded kicsinyíteni a böngésző ablak méretét.
Ennél sokkal profibb módszer, ha a Am I Responsive?, mobiletest.me, vagy a responsivedesignchecker.com oldalon teszteled a kész honlapod. Ezek közül több portálon lehetőséged van végigpróbálgatni, hogyan mutat a weboldalad különböző típusú és méretű okostelefonokon.
Egy másik lehetőség, ha a Google Chrome böngészőben megnyitod az adott oldalt, jobb gombot nyomsz és rákattintasz a Vizsgálat lehetőségre. A megjelenő jobboldali doboz bal felső sarkában lesz egy kis ikon (lásd a lenti képet), amivel mobilnézetre tudsz váltani. Ugyanez persze működik más böngészőben is, csak az elnevezések kicsit mások. Ha keresed, könnyen meg fogod találni.
Plusz érdekesség: ugyanezzel a módszerrel tudsz asztali számítógépről vagy laptopról Instagramra posztolni.
Hogyan lehet mobilbarát honlapom?
Ha WordPresst használsz, ma már viszonylag egyszerűen lehet minőségi reszponzív weboldalad. A „titok” egyszerű: megfelelő sablont kell választanod.
Szerencsére az ingyenes sablonok között is egyre több a mobiltelefonon is alapból szépen megjeleníthető darab. Például választhatsz a Theme Isle oldaláról, vagy, ha a minimalista stílus kedvelője vagy, a WP Explorer reszponzív sablonjai közül is.
A fizetős sablonok közül mindenképpen ki kell emelni az általam is használt Divit, amelyben az asztali monitoros verziótól szinte teljesen függetlenül külön is szerkesztheted a weboldalad mobilos változatát.
Például eldöntheted, a honlap pontosan mely elemei és részei jelenjenek meg kisebb kijelzőkön. Sőt, olyan elemeket is létrehozhatsz, amelyek kifejezetten csak mobilon láthatóak. Ez nagyon hasznos, például amikor bizonyos képek, a háttér, vagy mondjuk egy táblázat jól néz ki az asztali képernyőn, de okostelefonon már nem annyira, ezért jobb „elrejteni”.
A Divi ebben verhetetlen: szinte teljes irányítást kapsz a weboldalad mobilos változata felett is. Ha olyan vállalkozásod van, ahol kiemelten fontos az okostelefonos megjelenés (mert például fiatalok alkotják a célközönséged), mindenképpen érdemes tenni vele egy próbát.
Egy hasznos kód
A magyar nyelv tele van hosszú szavakkal. Ezeket, hiába reszponzív a weboldalad kialakítása, sok esetben, főleg nagyobb betűméret esetén nehéz szépen megjeleníteni kisebb kijelzőkön.
Még az olyan prémium sablonoknál is, mint a Divi, gyakori, hogy a rendszer a saját feje után menve egyszerűen kettévág egy-egy hosszabb szót, és a második felét egy új sorban jeleníti meg. Ez elég bénán néz ki, és az olvashatóságnak sem tesz jót.
Erre a problémára jelenthet megoldást ez a rövid és egyszerű CSS kód:
h1, h2, h3, h4, h5, h6 { overflow-wrap: normal;}
A lényege, hogy megtiltja a címekben szereplő szavak széttördelését (általában a címeknél használunk nagy betűméretet). Ha használod, már csak a megfelelő betűméretekre kell figyelned, (mert ha túl nagyra növeled, a szöveg egy része egyszerűen „kifolyik” jobboldalt) és többet nem lesz problémád a hosszú szavakkal.
Hogy működjön, a fenti három sort be kell másolnod a sablonod kódkészletébe.
Ha például Divit használsz, az általános sablon beállításoknál az egyéni CSS részbe illesztheted be a kódot, és akkor az egész honlapodra érvényes lesz.
(A Divi Visual Builderben is be lehet másolni az éppen szerkesztett oldal kódjába, de akkor csak arra az egy aloldalra lesz érvényes.)
Ha a te sablonod sem képes önmagától 100 százalékosan kezelni a hosszú szavakat, tegyél egy próbát vele.
És persze írd le a hozzászólásban a tapasztalataidat! 🙂
Vélemény, hozzászólás?