A reszponzív weboldal elrendezése rugalmasan igazodik a böngésző rendelkezésre álló szélességéhez: a szöveg, a képek és az oszlopok kisebb kijelzőn is használható rendbe kerülnek. A mobilbarát működéshez ez fontos alap, de az olvashatóságot, a menüt, a gombokat és az űrlapokat külön is tesztelni kell. A reszponzivitás önmagában nem garantál jobb keresőhelyezést vagy több bevételt.
A cikkben megmutatom a reszponzív megjelenés és a tényleges mobilos használhatóság különbségét, valamint azt, mit érdemes ellenőrizned a saját oldaladon.
Itt a korábbi videós változat. A változó Google-eszközökhöz és a pontosított állításokhoz a frissített szöveget is olvasd el.
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.
Egy rögzített szélességű asztali elrendezés kisebb ablakban kilóghat vagy nehezen használhatóvá válhat. Nem az a cél, hogy minden kijelzőn teljesen más oldal készüljön, hanem hogy a tartalom az adott helyhez igazodjon.
Kis kijelzőn például egymás alá kerülhetnek az oszlopok, más képkivágás lehet célszerű, és átrendeződhet a menü. A reszponzív megoldás ezeket segíti, de az eredményt a saját tartalommal kell ellenőrizni.
A reszponzív webdesign rugalmas elrendezéseket, képeket és CSS-szabályokat használhat. A szabályok jellemzően a böngésző látható tartalmi területéhez, a viewporthoz igazodnak, nem egyszerűen a fizikai kijelző pixeleit vagy a készülék nevét nézik.
A cél nem csak egy mobilméret kiszolgálása. A weboldalnak a köztes ablakméreteken, tableten, nagyobb kijelzőn és nagyított szöveggel is használhatónak kell maradnia.
A megfelelő elrendezés mellé valódi működési ellenőrzés kell: az összecsukható menü például csak akkor segít, ha megnyitható, bejárható és bezárható.
Nézzünk egy konkrét példát mobilbarát weboldalra!
Szemléltető példa: egy asztali nézetben egymás melletti három kártya mobilon egymás alá kerülhet. A címsor mérete is igazítható, de nem kötelező megfelezni. A CSS-ben vagy az oldalépítőben megadott szabály dönti el a változást; a böngésző nem talál ki magától egy általános 30 → 15 pixeles szabályt.
A reszponzivitás tervezési és fejlesztési megközelítés, nem önálló programozási nyelv. A megvalósítás eszköze lehet például a CSS Grid, a Flexbox és a médiakérdés.
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?
A reszponzív elrendezés segítheti a mobilbarát használatot, de a két fogalom nem azonos.
Egy oldal lehet rugalmasan tördelődő, miközben túl kicsik a gombjai vagy nem működik az űrlapja. A mobilbarát minősítéshez ezért a tényleges feladatot is végig kell próbálni.
A reszponzív megoldás általában ugyanazt az URL-t és HTML-t használja, CSS-sel igazítva az elrendezést. Ettől eltér a dinamikus kiszolgálás és a külön mobilos URL. A Google mobilos indexelési útmutatója külön kezeli ezeket.
A közös, rugalmas felület sok esetben egyszerűbben gondozható, mint két külön címen fenntartott oldal. Ez azonban tervezési szempont, nem minden meglévő rendszerre érvényes automatikus költöztetési javaslat.
A továbbiakban a reszponzív alatt a megjelenés alkalmazkodását, a mobilbarát alatt pedig a telefonon is jól használható teljes felületet értem.
Ne csak az asztali és egyetlen mobilméretet nézd. A tartalom által indokolt töréspontok körül, köztes szélességeken, fekvő nézetben és nagyítással is ellenőrizd a fontos oldalakat.
Egy reszponzív sablon jó kiindulópont lehet, de a saját képek, hosszabb címek, táblázatok és űrlapok új hibákat is előhozhatnak.
Miért annyira fontos, hogy reszponzív weboldalad legyen?
A mobilos használat aránya vállalkozásonként eltér. A saját analitikád eszközadatai segíthetnek megérteni a közönségedet; egy általános arány nem helyettesíti ezeket.
A korábbi változat ügyféloldalakra hivatkozó mobilos arányokat közölt, de nem rögzítette a mintát, az időszakot és a mérés módját. Ezért ezeket nem használom általános, mai bizonyítékként. A saját riportodban külön nézd:
- a mobilos látogatások és a fontos műveletek arányát, meghatározott időszakra;
- a táblagépes és asztali használatot, ugyanazzal a mérési definícióval.
Az eszközkategória és a viewport szélessége nem ugyanaz. A látogató átméretezheti az ablakot vagy nagyíthatja a szöveget is. Az elrendezést ezért ne kizárólag néhány konkrét telefonmodellre tervezd.
A landingoldal ellenőrzését is a tényleges tartalommal és funkciókkal végezd. A korábbi hét asztali, két tablet- és három mobilméret egy ellenőrzési minta volt, nem minden készülékre szóló bizonyíték vagy minden projekt automatikus vállalása.
Honnan tudhatod, hogy a te weboldalad mobilbarát?
A Google Mobile-Friendly Test és a Search Console Mobilos használhatóság jelentése 2023 decemberében megszűnt. Helyettük a tényleges felületet ellenőrizd mobilon és a böngésző átméretezhető nézetében. A különböző oldaltípusokat egyenként nézd meg; egy sikeres főoldali próba nem igazolja a teljes webhelyet.
A Google a mobilos tartalmat használja az indexeléshez. A lényegi szöveg, fontos képek, linkek és a tartalomhoz tartozó strukturált adatok mobilon is legyenek elérhetők.
A Google oldalélmény-útmutatója alapján nem lehet a mobilbarátságból önmagában biztos rangsorolási következményt számolni. A tartalom hasznosságát és a hozzáférhetőséget együtt vizsgáld.
A gyakorlati ellenőrzéshez legyen olvasható a szöveg, használható a menü és az űrlap, és ne lógjon ki indokolatlanul az oldal. A W3C reflow-útmutatója a nagyításkor újratördelődő tartalom fontosságát is bemutatja; a kétdimenziós táblázatnak lehet külön görgethető területe.
Mobilbarát weboldal előnyei
1. Könnyebben hozzáférhető tartalom: kisebb kijelzőn sem kell nagyítás nélkül olvashatatlan szöveggel vagy kilógó elemekkel küzdenie a látogatónak.
2. Használhatóbb kapcsolatfelvétel: a menü, a gombok és az űrlap akkor is elérhetők maradhatnak, ha kevés hely áll rendelkezésre. A lemorzsolódás változását saját mérésből állapítsd meg.
3. Közös tartalomkezelés: egy rugalmas felületnél nem feltétlenül kell külön mobilos oldalt fenntartani. A tényleges fejlesztési és karbantartási költség az adott rendszertől függ.
4. Kevesebb használati akadály: a látogató könnyebben eljuthat a kívánt műveletig. Ez segítheti az üzleti eredményt, de nem garantált konverzió- vagy bevételnövekedés.
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 itt! 👇
Összefoglalás
A reszponzív megjelenés fontos alap, amelyet működési teszt egészít ki. A betűméret, a menü, a gomb, az űrlap és a hosszabb tartalom használata együtt mutatja meg, hol maradt akadály.
A landingoldaladon próbáld végig a látogató valódi útját a tájékozódástól a kapcsolatfelvételig. Az elrendezést a saját tartalommal, több szélességen és valódi készüléken is ellenőrizd.
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!
