Reszponzív weboldal (avagy mobil barát) – ha nem akarod kidobni a bevételed felét

Ugye nem akarod kidobni az ablakon a vásárlód, ezáltal pedig a bevételed nagy részét?

Akkor ez a mostani cikk neked szól! A reszponzív (azaz mobilbarát) weboldalakról fogok írni. Elmesélem, hogy egyáltalán mi is az a reszponzivitás, eszik-e vagy isszák, és, hogy miért annyira bődületesen fontos egy vállalkozó számára, ha weboldalt készíttet.

Jobban szereted nézni, mint olvasni? Itt a videós verzió, és egy sort sem kell olvasnod 😉

Manapság már rengeteg különböző eszköz létezik, melyről tudunk böngészni az interneten. Mobiltelefon, tablet, laptop… sőt már az okosóra is ide sorolandó. Ezeken belül pedig különböző képernyő felbontások léteznek. 

Ami azt eredményezi, hogy ha egy oldal ugyanúgy jelenik meg az összes eszközön, akkor az baromi rosszul néz ki. 

Hiszen az, ami a számítógépen egy nagy monitoron szépen néz ki, egy picike kis mobil képernyőjén kilóghat, összecsúszhat, tehát nem néz ki jól. Mindez kiküszöbölhető a reszponzivitással. 

A reszponzív (responsive) szó jelentése egyik részről „felelő, válaszoló”, másik részről pedig „érzékeny, fogékony, befolyásolható”. Ezek a jelentések nagyon jól leírják, hogy miről is van szó egy reszponzív weboldal esetén. Ilyenkor nem azt nézi a weboldal kódja, hogy a látogató telefonról, tabletről, vagy milyen egyéb eszközről szemléli a honlapod, hanem a képernyő szélességét és esetleg a magasságát érzékeli és ehhez mérten HTMLl és CSS nyelvezettel megváltoztatja az adott elemek kinézetét.

Tegyük fel, hogy van egy asztali nézetben 30 pixeles címsorod. Ha mobil nézetben ez ugyanúgy 30 pixeles maradna, akkor az kényelmetlenül nagy lenne, alig lehetne elolvasni. A böngésző érzékeli, ha a képernyő mobil méretűre változott és ilyenkor, a 30-as helyett 15-ösre csökkenti a betűméretet. Ez érvényes ugyanúgy a képekre és minden egyéb elemre is.

A reszponzivitás lényegében nem egy programozási nyelv, hanem egy tervezési, fejlesztési módszertan, amely a megjelenítő eszközhöz rugalmasan igazodó weboldalt eredményez.

Mi a különbség a mobilra optimalizált weboldal és a reszponzív weboldal között?

Igazából a reszponzív weboldal is mobilra optimalizált. 

Régebben népszerűbbek voltak, manapság egyre csökkenő számban vannak az úgynevezett kifejezetten mobilra készült weboldalak. A különbség a „mobilra optimalizált weboldal” és a „reszponzív weboldal” között az, hogy amíg a reszponzív weboldal esetében egyetlen egy honlapról beszélünk, melynek elemei dinamikusan változnak attól függően, hogy milyen képernyő felbontásban nézi a látogató a weboldalt, addig a kifejezetten mobilra készült weboldal esetében lényegében 2 weboldalt alkalmazunk, egyet asztali és egyet mobil nézetre. 

Szerencsére most már olyan fejlettek a reszponzív megoldások, hogy nincs szükség külön mobilra optimalizált weboldalra, hiszen azt külön le kell fejleszteni, külön karban kell tartani, szóval egyértelműen egy hátrányosabb megoldás.

Miért fontos, hogy reszponzív legyen a weboldalad? 

Manapság már nagyon sokan mobilról interneteznek. Tőlünk nyugatra pedig mindez hatványozottan igaz, hiszen ott nem hogy többen, hanem szinte mindenki mobilról teszi ezt.

Mutatom, hogy ezek az adatok a saját ügyfeleimnél hogyan néznek ki:

  • A látogatók átlagban 55% mobilról érkeznek a weboldalakra – volt, ahol alacsonyabb ez a szám (35% körül), viszont volt olyan, ahol sokkal magasabb (akár 80%).
  • Kb. 3%-a látogatóknak tabletről érkezik a weboldalakra.

Amellett, hogy ott van egy 35-80%-os mobil nézettség, a többiek által használt képernyő nézetek sem egyformák. Most már egyre szélesebb skálán mozog az, hogy milyen képernyő felbontást használnak az emberek, és érdemes a nagy részükre külön-külön optimalizálni. Nyilván nem kell mindre, mert több száz képernyő felbontás létezik, viszont a legsűrűbben használtak képernyőfelbontásokra nagyon érdemes.

Éppen ezért, amikor én weboldalt, landing oldalt készítek, mindig megnézem 7 különféle asztali képernyő felbontáson, 2 tablet felbontáson és 3 mobil képernyő felbontáson. A tablet és mobil felbontásokban nincsen olyan nagy szórás, ott azért alacsonyabb ez a szám. Az összes oldalt külön-külön meg szoktam nézni ezekben a felbontásokban. Csak így lehetsz biztos abban te is, hogy tuti jól néz ki minden, nem lóg ki semmilyen elem a képernyőről, minden jól olvasható, nem túlságosan nagy, nem túl kicsi, nem csúsznak össze elemek, stb.

Honnan tudhatod, hogy a te weboldalad mobilbarát?

A legegyszerűbb, ha ennek meghatározására a Google Mobile Friendly tesztet használod. Annyit fontos tudnod, hogy ilyenkor nem a teljes weboldalt vizsgálja, hanem azt az egy konkrét aloldalt, amit te magadtál neki. Ebből – hogy a Google egy külön eszközt készített a reszponzív weboldal vizsgálatára – talán már sejtheted, hogy a Google-nak is fontos, hogy mobilbarát legyen az oldalad. Amiből pedig az következik, hogy ez egy SEO szempont is egyben.

2015-től a Google hivatalosan is vizsgálja azt, hogy mennyire mobil barát egy oldal.

Tehát, ha nem mobilbarát a weboldalad, akkor sokkal hátrébb fogsz kerülni a Google keresőjében.

Alapból rendkívül fontos, hogy reszponzív legyen a weboldalad, de ha szeretnél előre kerülni a keresőben akkor még sokkal-sokkal fontosabb.

Reszponzív weboldal előnyei

1.Jobb Google helyezéseket tudsz elérni vele, ezáltal több látogatóra számíthatsz.

2.Alacsonyabb lesz a visszafordulási arány. Hiszen azok, akik megérkeznek a honlapodra – nagy eséllyel mobilról – nem egy teljesen szétcsúszott weboldalt fognak látni, ezáltal nem fognak egyből lelépni.

3.Gyorsabb lesz a weboldal fejlesztése, mintha külön mobil weboldalról beszélnénk. Ezáltal sokkal olcsóbb is, a későbbi karbantartása is alacsonyabb költségekkel jár.

4.Magasabb konverziókat fogsz elérni, több bevételed lesz.

Végszó 

Remélem most már érted miért rendkívül fontos, hogy a weboldalad, főleg a landing oldalad, amire még pénzt is költesz, reszponzív legyen és minden képernyőn jól nézzen ki. Én rettenetesen nagy hangsúlyt szoktam erre fektetni, letesztelni az összes oldalt, a legtöbbek által használt képernyő felbontásban.

Remélem hasznos volt számodra ez a cikk. Ha segítségre van szükséged vagy csak érdekel a téma, lépj be a ProduktON! közösség Facebook csoportjába, ahol bővebben tudsz erről beszélgetni, nem csak velem, de a többi csoporttaggal is.

Sikeres és produktív vállalkozást kívánok neked!

Ha tetszett a cikk, és szeretnél értesülni hasonlókról, akkor kövess az alábbi felületeken:

Szerző:

Gaál Melinda

Szervusz! Gaál Melinda vagyok, a ProduktON! alapítója. Igyekszem rendszeresen olyan hasznos webfejlesztéssel és online marketinggel kapcsolatos tudásanyagokkal szolgálni Számodra, amelyek előre viszik a vállalkozásodat. Ha bármi kérdésed, ötleted van a témával kapcsolatban, kérlek, írd meg itt kommentben! KommentON! 🙂

Gaál Melinda

Gaál Melinda

Szervusz! Gaál Melinda vagyok, a ProduktON! alapítója. Igyekszem rendszeresen olyan hasznos webfejlesztéssel és online marketinggel kapcsolatos tudásanyagokkal szolgálni Számodra, amelyek előre viszik a vállalkozásodat. Ha bármi kérdésed, ötleted van a témával kapcsolatban, kérlek, írd meg itt kommentben! KommentON! 🙂

Vélemény, hozzászólás?

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

Kérsz még ilyen hasznos infókat?

Facebook oldalamon keresztül értesülhetsz minden újdonságról és Számodra értékes információról (nem csak blog bejegyzésekről).
Kattints a [Kedvelés] gombra!

Kövess Instán a laza tartalmakért!

Az Instás sztorikba olyan egyedi tartalmak is felkerülnek, amelyekkel más felületeimen nem találkozhatsz. Kövess be: @produkton.melinda

Légy tagja a ProduktON! közösségnek!

ProduktON! közösség - Facebook csoport Ezen Facebook csoporton belül jelenleg teljesen ingyenesen tudlak támogatni. Bármit kérdezhetsz, ami vállalkozással, online marketinggel kapcsolatos. Természetesen én egyedül nem fogom tudni mindenre a választ, de sok tagunk van már, akik között valószínűleg lesz olyan, aki fog tudni segíteni neked. Ez a csoport egy alapvetően szakmai, ámde annál lazább, kötetlenebb közösség, ahol barátságok és üzleti kapcsolatok is születnek. A főbb témák a honlap, landing oldal, Facebook marketing, motiváció… és még amire igény van 🙂 Gyere, és csatlakozz ebbe a támogató közösségbe!  

Ezek is érdekelhetnek: