Reszponzív weboldal: hogyan lehet mobilbarát a honlapod?

Szerző: 2019. máj. 20.honlapkészítés, WordPress

Egy reszponzív weboldal 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 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.

 

1. Miért fontos a mobilbarát megjelenés? 

 

Az első ok természetesen a mobileszközök 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, rövid időn belül Magyarországon is igaz lesz, hogy

a teljes internetforgalom mintegy felétől megfosztod magad, ha nem reszponzív a weboldalad.

Ugyanis a többség nem hajlandó okostelefonról olyan oldalt böngészni, amely nem tud kényelmesen és esztétikusan megjelenni egy kisebb méretű kijelzőn.

Egyébként az előrejelzések szerint 2020-ban az okostelefont használók száma világszerte el fogja érni a 2,87 milliárdot, ez több mint 700 milliós növekedést jelent 2016 óta. Magyarországon 2018-ban 6,35 millió okostelefonos internethasználót regisztráltak. Ezeknek a számoknak a tükrében nem vitás, hogy a közeljövőben még tovább fog nőni a reszponzív honlapkészítés jelentősege.

 

2. A Google és a reszponzív 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 és vállalkozásod számára.

Ez az ok pedig a Google, a világ legnépszerűbb keresőmotorja. (Már írtam arról, hogy mit jelent a keresőoptimalizálás 2019-ben)

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 elsősorban az adott weboldal mobilos változatát használja fel a keresési eredmények listázásakor. 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. 

 

3. 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: 

 

A weboldal reszponzivitását a Google mobilbarát tesztjével is ellenőrizheted.

 

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 mobiletest.me, a mobilemoxie.com vagy a responsivedesignchecker.com oldalon teszteled a kész honlapod. Ezeken az oldalakon lehetőséged van végigpróbálgatni, hogyan mutat a weboldalad különböző márkájú/típusú okostelefonokon.

Egy másik lehetőség, ha a 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. Plusz érdekesség: ugyanezzel a módszerrel tudsz asztali számítógépről vagy laptopról Instagramra posztolni.

 

A böngészőben a vizsgálat lehetőséget használva könnyen megnézhetjük, hogyan fest a weboldalunk mobilnézetben.

 

4. Hogyan lehet reszponzív honlapom?

 

Ha WordPress-t használsz, ma már viszonylag egyszerűen lehet minőségi reszponzív weboldalad. (A WordPress alapokról már volt szó a blogon)  A “titok” egyszerű: megfelelő sablont kell választanod.

Szerencsére az ingyenes sablonok között is egyre több a mobiltelefonon is 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.

 

5. 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ű 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 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. 

 

Divi esetén illeszt be a kódrészletet az Egyéni CSS mezőbe.

 

(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.)

Nálam remekül működik. Ha a te sablonod sem képes önmagától 100 százalékosan kezelni a hosszú szavakat, szerintem próbáld ki. 

Remélem hasznosnak találtad a cikket. Nagyon kíváncsi vagyok, vajon neked is megfelelően működik a fenti kód, ezért kérlek hozzászólásban jelezd a tapasztalataidat.

 

0 hozzászólás

Egy hozzászólás elküldése

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Üzleti honlap készítés egy éves teljes körű garanciával

Profi honlap akár egy nap alatt  30 napos garanciával

2019 © Honlapszaki.hu 

andras@honlapszaki.hu

Rólam

Ajándék emailtanfolyam

Saját weboldal vállalkozásoknak:

az ötlettől a megvalósításig

Szükséged lenne egy ügyfélcsalogató honlapra, de nem tudod, hogyan kezdj neki?

Akkor neked szól a négyrészes mini emailtanfolyam! Próbáld ki, teljesen ingyenes!

Köszönöm! Hamarosan megkapod az email tanfolyam első részét!

Pin It on Pinterest

Share This