Reszponzív webdesign borítókép

Hogyan legyen
vevőszerző weboldalam?

Ingyenes
E-book Letöltése!

Heti 1 db marketing cikk ami hozzásegít a vállalkozásod fejlődéséhez!

Kérem a heti cikket!

Olvasási idő: 5 perc

Mi az a reszponzív webdesign? Hogyan tervezz mobilbarát oldalt?

Manapság szinte mindenki használ okostelefont vagy laptopot, ezért már nem elég, ha egy statikus weblappal rendelkezünk, ami csak a számítógépek képernyőjén néz ki jól. A reszponzív webdesign használatával tudjuk elérni, hogy a lehető legjobb formáját nyújtsa a honlapunk a legkisebb mobilok képernyőin és a szélesvásznú monitorokon is egyaránt. Hiszen ne felejtsük, egy mobilbarát weboldal készítése elégedettebb ügyfeleket és megnövekedett konverziót fog eredményezni. Nézzük tehát, hogy miként kezdjünk bele a reszponzív weboldal készítés menetébe! 🙂

1. Mi az a reszponzív webdesign?

A reszponzív design egy olyan megközelítése a grafikus felhasználói felületnek, amelynek célja a weboldalon megjelenő tartalmak gördülékeny hozzáigazítása különböző képernyőméretekhez.

A Google meghatározása szerint akkor beszélhetünk reszponzív weblapról, ha a szerver ugyanazt a HTML kódot használja az összes készülék esetében egy oldal megjelenítésére, és CSS segítségével van renderelve a megjelenése eltérő méretű képernyőkön.

A UI/UX designerek a honlap alkotóelemeit százalékos méretekben tervezik meg és média-lekérdezések által igyekeznek úgy beállítani a webhelyek designját, hogy azok automatikusan illeszkedjenek a böngészőablak méreteihez különböző típusú készülékeken.

A reszponzív weboldal készítés egészen 2001-ig nyúlik vissza, amikor az Audi.com webhely különböző szélességű böngészőablakokhoz adaptált sablonnal jött létre.

De igazán csak a 2010-es évek elején kezdődött el az a folyamat, hogy egyre több internetező kezdte használni a hordozható készülékeit az otthoni számítógépe helyett. Emiatt a webdesignereknek két választása volt.

Vagy megtervezik ugyanazon design több verzióját, mindet fix beállításokkal és méretekkel (ez az adaptív design).

Vagy pedig egyetlen design verziót készítenek, ami teljesen rugalmas és alkalmazkodik a képernyőmérethez (ez lett a reszponzív design).

Ez nagyon megkönnyítette a weboldaltervező grafikusok munkáját, mivel már nem kellett egyetlen abszolút értékhez (pixelszámhoz) kötniük minden egyes design elemet, hanem elegendő volt egy verziót készíteni és az önmagát konfigurálta.

Ha látni szeretnénk a gyakorlatban is, hogyan nézhet ki ugyanazon weboldal több eltérő méretű verziója, nyissuk meg a Media Queries oldalát, ahol sok érdekes példával találkozhatunk.

Reszponzív webdesign példák

Érdemes okostelefonról és számítógépről is megtekinteni az oldalakat, hogy jobban lássuk a különböző elrendezéseket.

2. A reszponzív weboldal készítés három alapelve

A mobilbarát weboldal készítése ezzel a 3 alappillérrel valósítható meg.

2.1. Rugalmas elrendezések

A tartalmi elemek mindig ugyanannyi százalékot foglalnak el a képernyő méretéből, függetlenül attól, hogy milyen nagy vagy kicsi méretű kijelzővel rendelkező eszközt használnak a felhasználók.

Ez azt jelenti, hogy meghatározzuk a pixelek megjelenítési helyét, és hozzárendelünk egy adott méretet az elrendezéshez (layout), amihez az elemek maguktól igazodni fognak. Fontos, hogy ez százalékos formában történjen, és ne konkrét pixelszámokat használjunk!

Legcélszerűbb, ha CSS-t (Cascading Style Sheets), vagyis egymásba ágyazott stíluslapokat használsz alapul.

Minden modern weboldal két kódtípusra épül:

  • HTML: a honlap alapvető felépítéséért, elrendezéséért és tartalmaiért felelős;
  • CSS: a tartalmi elemek stílusos megjelenését és beállításait biztosítja.

El kell osztanunk a designunk maximum szélességét a felhasználók böngészőjének maximum szélességével, ezzel megkapjuk azt a százalékot, amit beállíthatunk a CSS szkriptekben.

Így jöhet létre egy olyan elrendezés, amely növekszik vagy összemegy, igazodva a felhasználók készülékeinek képernyőméretéhez.

2.2. Rugalmas képméretezés

A szövegekkel ellentétben a képek nem annyira rugalmasak, hiszen nehezebb őket tagolni és méretre szabni.

Alapesetben ugyanabban a méretben fognak megjelenni minden képernyőn, ami sok problémát vet fel.

A weboldalad egyenlőtlenül fog kinézni a különböző készülékeken, mert a képek nem fognak illeszkedni az oldalakhoz, ezért nem lesznek összhangban a többi tartalmi elemmel.

Ennek megelőzése érdekében kell használnod egy CSS parancsot, amely a képek maximális szélességét 100%-ban határozza meg, így szükség esetén alkalmazkodnak a képernyőméretekhez, és csak a meghatározott százalékát töltik ki a mobil kijelzőjének.

2.3. Média-lekérdezések

A média-lekérdezések (media queries) olyan szűrők, amelyeket a felhasználói készülékek dimenzióinak felderítésére használunk (pl. kijelző felbontása, mérete), így biztosítva a megfelelő megjelenítést a weboldalunk számára.

Megpróbáljuk pontosan meghatározni, hogy mekkora látogatónk képernyőmérete. Ez az érték pedig hozzáigazítja az elrendezéseket a kellő feltételekhez.

Ezeket szintén a CSS-en keresztül lehet használni. Leggyakoribb értékek a maximum/minimum szélességet és magasságot határozzák meg.

A képernyő szélességének, magasságának és elrendezésének hála meg tudjuk tervezni, hogy miként fog kinézni a honlapunk reszponzív design szempontjából.

Emellett szükségünk van még töréspontok meghatározására: olyan képernyőszélességek, amelyekbe csoportosítani tudjuk az internetezők készülékeit. Ha egy bizonyos szélességet elér a képernyőjük, akkor azt a reszponzív felépítést fogják látni, amelyet az adott törésponthoz rendeltünk.

3. Hogyan vágj bele a reszponzív weboldal készítésbe?

A mobilbarát tervezés magában foglalja a képek, szövegek és elrendezések rugalmasságát. Hogy ez elérhető legyen, fogadjuk meg ezeket a tanácsokat.

1) Kövessük az “elsőként mobilra” elvet: mindig tartsuk szem előtt, hogy az internethasználók több mint fele okostelefonról látogat el a weboldalunkra. Mobilokon szükség van a nagyobb méretű CTA gombokra, és a hatékony tartalomtervezésre az érintőképernyők miatt.

2) Hozz létre rugalmas elrendezéseket: a képeket használd natív felbontásukkal együtt, szükség esetén vágd körbe őket, ha nincs elegendő hely a képernyőn.

3) Használj skálázható vektor-grafikákat: az SVG (Scalable Vector Graphics) formátumú 2D ábrák támogatják az interaktivitást és az animációkat.

4) Dolgozz legalább 3 törésponttal: vagyis tervezz minimum 3 eltérő készülékre.

5) Rangsorold a tartalmad: állíts fel egy hierarchiát, és elsőként a legfontosabb tartalmi elemeket jelenítsd meg a látogatóid előtt, míg a kiegészítő adalékokat rejtsd el mondjuk egy másik ablakba.

6) Törekedj a minimalizmusra: mobil képernyőkön nem lehet minden elképzelésünket megvalósítani, ezért inkább működjön jól egy weboldal, mintsem teli legyen pakolva használhatatlan design elemekkel.

7) Használj könnyen olvasható betűtípusokat: a szöveg méretét, színét és típusát úgy építsd fel, hogy jól látható legyen a weboldalad hátteréhez viszonyítva, valamint a főcímek is legyenek könnyen felismerhetőek.

8) Ismerkedj meg eltérő UI design mintákkal: a felhasználók dolgát megkönnyíti, ha mobilbarát design mintázatokkal igazítjuk a tartalmat a képernyőméretekhez.

4. A reszponzív webdesign előnyei és hátrányai

Nyilván rendkívül előnyös, ha a számítógépek mellett megfelelően jelen tudunk lenni hordozható eszközökön is, de vannak azonban hátrányai is a reszponzív design elkészítésének.

4.1. A mobilbarát weboldal készítés előnyei

  • SEO-barát megoldás, amit már a Google Search Console is külön elemez weboldalunk rangsorolásánál.
  • Növeli és egységesíti a felhasználói élményt (UX design) minden készüléken.
  • Elősegíti az egyszerű és könnyen kezelhető weboldalak készítését, amelyek mindig a megfelelő méretben jelenítik meg a képeket, szöveget, videókat és más HTML elemeket minden képernyőméret esetén.
  • Alacsonyabb lesz a visszafordulási arány a látogatóink körében.
  • Viszonylag olcsón és gond nélkül elérhető a mobilbarát design.
  • Sok CMS rendszer biztosítja már a reszponzív elrendezéseket, pl. WordPress (bár ez leginkább az alkalmazott weboldal-sablontól függ).
  • Nincs szükség külön asztali és mobilos URL címekre, mert ugyanazon oldalnak lehet egyszerre több készülékre optimalizált verziója is.
  • Könnyebb a Google-nek indexelnie a weboldalunkat, mivel egyetlen Google bot is elegendő az oldal tartalmának elemzéséhez.

4.2. A mobilbarát weboldal készítés hátrányai

  • A tartalmi elemek maguktól változtathatják méretüket vagy elhelyezkedésüket (ezt egyébként a Google PageSpeed Insights külön vizsgálja is az oldalak betöltésénél).
  • Kisebb a ráhatásunk az elrendezések méretére a mobilos képernyőkön, mivel azok automatikusan illeszkednek.
  • A hirdetések elhelyezésének és formátumainak problémái.
  • Általában hosszabb betöltési idővel kell számolni okostelefonokon.
  • Kutatómunkát és utólagos tesztelést igényel, hogy a megfelelő minőséget tudjuk eljuttatni a mobilos felhasználókhoz.
  • Bonyolultabb kódolással jár a tartalom képernyőmérethez viszonyítva történő skálázása. Ezért is ajánlatos egy profi weboldal készítő csapatra bízni a reszponzív webdesign elkészítését! 🙂

5. Reszponzív a weboldalad? Derítsd ki!

Létezik egy nagyon egyszerű billentyűparancs, amelynek alkalmazásával láthatjuk, hogyan néz ki a weboldalunk okostelefonokon.

Chrome böngészőben a következőket kell tennünk:

  1. Nyissuk meg az ellenőrizni kívánt weboldalt.
  2. Chrome DevTools megnyitása: Ctrl + Shift + I.
  3. Mobilnézet megjelenítése: Ctrl + Shift + M.
  4. Tekintsük meg a mobilos elrendezést.

Ezt egy másik módszerrel is megnyithatjuk: kattintsunk a jobb egérgombbal a weboldalon bárhová, és válasszuk a Vizsgálat lehetőséget.

Mobilbarát megjelenés Chrome-ban

Van más lehetőség is, hogy kiderítsük, mobilbarát-e a weblapunk. A Google-nek működik egy Mobilbarát teszt nevezetű eszköze, amelyet ingyenesen kipróbálhat bárki.

Elegendő a vizsgálni kívánt URL-t bemásolnunk, és már láthatjuk is az eredményeket.

Mobilbarát teszt

Amennyiben viszont saját webhelyünk minden egyes oldalát le akarjuk tesztelni, és kideríteni az esetlegesen fennálló problémákat a mobilbarát megjelenéssel kapcsolatban, akkor a Google Search Console használata ajánlott.

Itt is van lehetőségünk egyenként ellenőrizni az URL-eket, hogy lássuk, elérhetőek-e a Google keresőjében, vagy szükséges indexelési kérelmet indítványoznunk, valamint a mobilbarát problémákat is kijelzi.

A Mobilos használhatóság menüpont alatt érjük el a reszponzív webdesign elemzésének eredményeit.

Reszponzív webdesign ellenőrzése

A Google tehát okostelefonos feltérképező robotokat használ a webcímek reszponzivitásának vizsgálatára, ami kiemelkedő fontossággal bír SEO szempontjából is.

6. Tervezzünk külön tartalmakat mobilra és asztali verzióra?

Manapság elterjedt a mobile first szemlélet, amelynek az az alapja, hogy egy weboldalt elsőként mobiltelefonokra kell megtervezni, és utána ezt az elrendezést felskálázni könnyebb lesz az asztali számítógépek képernyőire.

Ez valóban jól működik, hiszen így jobban átláthatod, hogy mely tartalmi elemek a legfontosabbak megjelenés szempontjából.

Felvetődik azonban a kérdés, hogy szükséges-e külön mobilos tartalmakat készítenünk?

A válasz: NEM. A reszponzív webdesign lényege, hogy ugyanazt a felhasználói élményt nyújtsa minden eszközön.

Természetesen vannak olyan dolgok, amelyekre muszáj odafigyelnünk:

  • A szöveg hossza és a betűk mérete;
  • A képeken látható szöveg olvashatósága;
  • CTA gombok nagysága;
  • Menü könnyű elérhetősége;
  • Görgetés gyorsasága;
  • Navigáció az egyes alpontok között.

Ezek mind-mind fontosak a mobilbarát weboldalak készítésénél, valamint fel kell darabolnunk a tartalmunkat olyan kisebb részekre, melyek jól mutatnak egy okostelefonon is.

Nézzük példának a Wikipédia egyik cikkét! Az asztali verzióban van egy bevezető szöveg, tartalomjegyzék, és a vázlatpontok egyenként kifejtve szerepelnek ezt követően.

Reszponzív weboldal - asztali verzió

Ezzel szemben a mobilos verzióban máshogy tagolódik a szöveg és az egész cikk, mivel a vázlatpontok csak akkor jelennek meg, ha kiválasztjuk őket a legördülő menüből, a jobb olvashatóság érdekében.

Reszponzív weboldal - mobil verzió

Nincs szükség tehát eltérő tartalmak gyártására, csak másképpen kell felosztanunk a telefonos böngészők számára.

7. Hogyan érhető el a reszponzív webdesign?

A mai világban minden weboldalnak mobilbarátnak kell lennie. Ha ez jelenleg nem jellemző a Te oldaladra, vagy esetleg szeretnél egy reszponzív weboldalt építeni magadnak, akkor mindenképp konzultálj egy honlap készítéssel foglalkozó szakemberrel.

Nem mindig egyszerű reszponzívvá alakítani egy régi webdesignt, ezért néha költséghatékonyabb egy teljesen új alapokra épülő webhelyet létrehozni.

WordPress esetén például könnyebb a helyzet, mivel egy reszponzív sablon vagy témaépítő használatával megoldható a probléma. Ilyenek voltak a Divi és az Elementor is, amelyek mobilbarát jellegéről részletesen olvashattok a bejegyzésekben.

Vannak azonban megoldások, amelyekkel megvalósítható a mobilbarát weboldal. Tekintsük át most ezeket! 🙂

7.1. CSS és HTML kódok a reszponzív képekért

Ahogy korábban említettem, a CSS kódok módosítják a megjelenését és designját a HTML elemeknek, tehát a weboldal tartalmát és felépítését stilizálják.

Például, ha hozzáadunk egy képet a honlapunkhoz HTML kód formájában, akkor az így néz ki:

<img src="image.gif" alt="image" class=”full-width-img”>

Ezután a CSS kódokat felvehetjük a HTML dokumentum <style> részébe, vagy külön fájlként is. Módosíthatjuk a szélességét minden HTML képnek az alábbi kóddal:

img {width: 100%;}

Ugyanígy beállíthatjuk a képek magasságát és színösszetételét is, különböző kódokkal és parancsokkal.

7.2. Reszponzív töréspontok beállítása

A média-lekérdezések határvonalait tudjuk beállítani a töréspontok meghatározása által, így ha a weboldalunkra látogató felhasználó készülékének kijelzője elér egy bizonyos szélességet vagy felbontást, akkor az ahhoz tartozó változat jelenik meg számára a honlapunk reszponzív elrendezései közül.

A Bootstrap 5 töréspontokat ír elő például az eltérő méretű kijelzőkhöz:

  • xs = Extra small <576px: Max container width None (auto)
  • sm = Small ≥576px: Max container width 540px – mobiloknál
  • md = Medium ≥768px: Max container width 720px – tableteknél
  • lg = Large ≥992px: Max container width 960px – laptopoknál
  • xl = Extra large ≥1200px: Max container width 1140px – számítógépek monitorainál
  • xxl = Extra large ≥1400px: Max container width 1320px – szélesvásznú monitoroknál

Ezeket az alábbi módon lehet beállítani média-lekérdezések (media queries) kódrészleteiként:

@media (min-width: 576px) {....}
@media (min-width: 768px) {....}
@media (min-width: 992px) {....}
@media (min-width: 1200px) {....}
@media (min-width: 1400px) {....}

Létrehozhatunk egyéni töréspontokat is, ha felveszünk két média-lekérdezés változatot. Az egyik a töréspont alatti kijelzőméretekre, a másik pedig az attól nagyobbakra vonatkozik majd.

Például, ha szeretnéd 600px-nél elválasztani weboldalad megjelenítését két változatként, akkor ezt így teheted meg:

@media (max-width: 600px) {....}
@media (min-width: 601px) {....}

Ilyenkor egy reszponzív elrendezés jelenik meg a 600px-nél kisebb kijelzőkön, és egy másik layout lesz a 601px és attól nagyobb képernyőkre szabva.

7.3. Százalékos méretezés a tartalmi elemeknél

Weboldalunk szerkezete attól függ, hogy hány tartalmi elemet és sablon elrendezést állítunk be. Olyan részekre gondolok, mint:

  • A weboldal fejléce (header);
  • Navigációs menü (menu);
  • Oldalsó görgethető sáv (sidebar);
  • Fő tartalmi rész (content);
  • A weboldal lábléce (footer).

Ezt az egészet pedig magában foglalja egy tartalmi blokk (wrapper).

Ezekhez külön-külön százalékos értékeket és töréspontokhoz igazított minimum / maximum szélességet kell megállapítanunk.

#wrapper {width:95%;  margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)
@media (min-width: 768px)

Ehhez hasonló CSS kódokban kell gondolkodnunk, amit nyilván nem egyszerű programozói tapasztalat nélkül helyesen összeállítanunk. Ezt nem is nagyon ajánljuk önállóan elvégezni, mert több kárt okozunk vele, mint gondolnánk.

7.4. Reszponzivitás tesztelése

Ezt elvégezhetjük az 5. vázlatpontban ismertetett módszerek egyikével. Ha le szeretnénk tesztelni több eszközön is a weboldal kinézetét, használjuk a Chrome DevTools eszközeit.

Ahogy korábban említettem, nyissuk meg a vizsgálni kívánt weboldalt, majd nyomjuk meg a Ctrl+Shift+I kombinációt, és előjönnek a fejlesztői eszközök.

Weboldal reszponzivitásának tesztelése

Teszteld le weblapod mobilbarát jellegét eltérő méretű eszközökön! Ezután látni fogod, hogy hol érdemes még változtatásokat eszközölnöd.

A bal felső sarokban kiválaszthatjuk, hogy melyik eszközön szeretnénk megtekinteni a mobilos nézetét a honlapunknak (pl. iPhone 12 Pro, Samsung Galaxy S20 Ultra, vagy éppen Pixel 5).

Azonban, ha van egy konkrét képernyőméret, amit ki szeretnénk próbálni, akkor az manuálisan is beállítható egyedi értékekkel a felbontás megadásával.

8. Összefoglaló

A reszponzív webdesign a 21. századi weboldal készítés egyik nagy vívmánya, amit az eltérő méretű kijelzővel rendelkező okos készülékek tettek szükségessé.

Lényege, hogy ugyanazon weboldal különböző elrendezésekkel jelenik meg a kisebb képernyőjű mobiltelefonokon, mint a szélesvásznú monitorokon.

Minden esetben optimalizált megjelenésről beszélhetünk, tehát nem lesznek hiányzó elemek vagy kevesebb tartalom, egyszerűen máshogy lesz feldarabolva az oldal felépítése, hogy könnyen kezelhető legyen érintőképernyőn is.

Ehhez a CSS kódok nyújtanak eszközöket, amelyekkel meghatározhatjuk a képek és egyéb tartalmi elemek százalékos nagyságát, valamint média-lekérdezéseket és töréspontokat állíthatunk be.

Te felfigyeltél már korábban arra, hogy miben különböznek egyes weboldalak mobilos és asztali verziói? Talán most már láthatod a mögöttes okokat és módszereket is. 🙂

Egy megosztással nagyban segítenéd a munkánkat, mivel fontos a pozitív visszajelzés. Köszönöm!

Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu

A weboldal készítő csapat egy tagját ábárzol

Dávid Ádám

Szia, Dávid Ádám vagyok a Kiszervezett Marketing Ügynökség alapítója. Több mint 120+ weboldalt építettünk már sikeresen az ügyfeleink számára. Az így szerzett tapasztalataimat blog formájában szeretném megosztani veled. Sok sikert számodra a megvalósításban!

Hogyan legyen
vevőszerző weboldalam?

Ingyenes
E-book Letöltése!

Heti 1 db marketing cikk ami hozzásegít a vállalkozásod fejlődéséhez!

Kérem a heti cikket!

Send this to a friend