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. A cikkből megtudod, hogy mi a reszponzív weboldal jelentése, és, hogy miért annyira bődületesen fontos egy vállalkozó számára, a reszponzivitás és hogy mobilbarát weboldala legyen.
Jobban szereted nézni, mint olvasni? Itt a videós verzió, és egy sort sem kell olvasnod 😉
![Így segít a 📱 reszponzív 💻 weboldal bevételed növelésében [MOBILBARÁT HONLAP KÉSZÍTÉSE]](https://produkton.hu/wp-content/cache/flying-press/dwKc1rqFc0g-hqdefault.jpg)
Reszponzív weboldal jelentése
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 teljesen ugyanúgy jelenik meg az összes eszközön, akkor az eszméletlen 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 a probléma azonban kiküszöbölhető a reszponzivitás használatával, azaz, ha reszponzív / mobilbarát weboldalt hozunk létre.
A reszponzív jelentése egyrészt „felelő, válaszoló”, másrészt „é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 HTML és CSS nyelvezettel megváltoztatja az adott elemek kinézetét a reszponzív weboldalon.
Tehát ha szigorú értelemben vesszük, akkor a reszponzivitás módszereinek használatával a reszponzív weboldal nem szimplán egy mobilbarát weboldal lesz. Hisz nem csak a mobiltelefonok képernyőjének kedvez. Hanem – ha valóban jól van megcsinálva a reszponzivitás, akkor – az összes felbontású monitornak és tabletnek is.
Még egyszer: Ha szigorú értelemben vesszük azt, hogy mi a reszponzivitás jelentése. De ezt egy picit lejjebb bővebben is kifejtem.
Nézzünk egy konkrét példát mobilbarát weboldalra!
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.
Reszponzivitás jelentése: 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.
Na akkor most fordítsuk le magyarra is ezt, hogy mit is jelent a reszponzivitás… Lássuk!
Mi a különbség a mobilbarát weboldal és a reszponzív weboldal között?
Igazából a reszponzív weboldal is mobilbarát weboldal.
Egészen pontosan: Minden reszponzív weboldal mobilbarát weboldal is egyben. De nem minden mobilbarát weboldal reszponzív weboldal 🙂 Régen legalábbis ez abszolút ez volt. Manapság, a technológia fejlődésével leginkább teljesen egybe mosódott a kettő, és egyre inkább ugyanazt jelentik.
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.
Ezért mára már a „reszponzív weboldal” és a „mobilra optimalizál weboldal” vagy „mobilbarát weboldal” kifejezések teljesen összemosódtak és gyakorlatilag ugyanazt jelentik. Ezért a cikk további részében én is hol az egyik, hol a másik jelentést fogom alkalmazni (a túl sok szóismétlés elkerülése érdekében), de innentől tudd, hogy gyakorlaatilag ugyanarról beszélünk.
Ami még lényeges, hogy mobilbarát weboldal készítése esetén nem csak azt kell nézni, hogy egy monitor képernyőn és egy mobil képernyőn megfelelően nézzen ki a weboldal. Hanem a leggyakoribb képernyőméreteken jól kell teljesítenie a weboldalnak. Csak ekkor mondható teljesen reszponzívnak a weboldal.
Manapság már rengeteg reszponzív weboldal sablon létezik, így ez ma már nem lehet akadály 🙂
Miért annyira fontos, hogy reszponzív weboldalad legyen?
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 nálam kizárólab reszponzív weboldal készítése történik. Ugyanis én amikor 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?
Ennek meghatározására a legnépszerűbb reszponzív weboldal tesztet, a Google Mobile Friendly tesztet ajánlom. 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 mobilbarát 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.
Mobilbarát 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.
Szívesen olvasnál még hasonlókról? Rendszeresen megjelenő hírleveleimben ilyen és egyéb, vállalkozással, online marketinggel, web-/landing oldal készítéssel kapcsolatos fontos tudnivalókat osztok meg. Ha szeretnéd kimaxolni a vállalkozásodban lévő potenciált, akkor iratkozz fel ezekre a hasznos levelekre!
Összefoglalás
A reszponzív weboldal tehát több oldalról is segíti vállalkozásodat, hogy bevételt tudj termelni honlapodon. Bár pontosabb talán inkább azt írni, hogy hatványozottan hátrányos helyzetbe kerülsz a versenytársakkal szemben, ha nincsen mobilbarát weboldalad.
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.
Ha pedig szeretnél segítséget abban, hogy hogyan tehetnéd jobban reszponzívvá a weboldaldat, akkor keress fel:
Sikeres és produktív vállalkozást kívánok neked!
