Responsive webdesign

fokep

Avagy válaszoló honlaptervezés

Ugye, milyen furcsán hangzik a cím? Pedig magyarul ezt jelenti a responsive webdesign, röviden RWD. Az angol megnevezést nyilván már sokkal többen hallottátok. De mit is takar ez a kifejezés egy honlap esetében?

A legfrissebb felmérések szerint a felhasználók nagy többsége már nemcsak asztali számítógépen böngészi a világhálót, hanem okostelefonon vagy tableten is. Ezeknek az eszközöknek a képernyőmérete jelentősen eltér egymástól, ezért manapság nagyon fontos tényezővé vált a weboldalak tervezésénél, hogy minden felületen jól olvasható és értelmezhető legyen a honlapok tartalma.

Ezt a rugalmas kialakítást nevezzük reszponzív webdesignnak, ami számos előnnyel bír mind a felhasználó, mind a weboldal tulajdonosa számára:
•    weboldal tartalma igazodik az internetező eszköz képernyőjéhez
•    a szövegek betűmérete jól olvasható marad
•    a képek és egyéb tartalmak rugalmasan átméreteződnek, átrendeződnek
•    az oldal elrendezése igazodik az adott mérethez

Fontos!
A Google támogatja, előrébb sorolja a reszponzív oldalakat. Ezért is kiemelten fontos, hogy a TE oldalad is reszponzív legyen.

Hogyan tudod mindezt lecsekkolni?

Manuálisan:
Nyisd meg asztali gépen vagy laptopon a weboldalad. A böngészőablakot az egyik sarkánál fogva kezdd el összehúzni kisebbre. Ha az oldal reszponzív, akkor a szöveges és képi elemek átrendeződnek, egymás alá csúsznak. Mint láthatod, a logo2go blog is reszponzív! A nem reszponzív oldalak erre a tesztelési módra nem reagálnak, a tartalom egyszerűen eltűnik a kisebbre húzott böngészőablakban.

Webes teszteléssel:
Manapság már élőben is tudod tesztelni a honlapodat különböző felületeken, íme erre egy remek oldal: responsivetest

A fenti módszerrel érdemes ellenőrizned a már meglévő weboldaladat, és ha esetleg nem reszponzív a felület, keress fel bennünket bátran. Ne keseredj el, hiszen ezt is át lehet alakítani úgy, hogy eszközfüggetlen (mobilon és tableten is jól használható) legyen! 🙂

Ha viszont most szeretnéd elindítani egyedi honlapodat/webáruházadat, mindenképpen javasoljuk, hogy már a tervezésnél legyél előrelátó! Az egyes eszközökre (desktop, tablet és mobil) külön-külön terveztesd meg az oldalakat a webdesignerrel, hogy a látogatóid, vásárlóid ugyanazt a felhasználói élményt kaphassák, bárhonnan is nézik a weboldaladat. Ezzel időt és pénzt spórolhatsz meg magadnak!

Érdekesség

A reszponzív weboldalt a designer egy úgynevezett rácsalapú (grid) elrendezéssel tervezi meg, ahol a képek és médiaelemek rugalmasan alakíthatóak az adott felülethez. Ez teszi lehetővé, hogy a honlapod vagy a webáruházad minden eszközön alkalmazkodjon a képernyő méretéhez és felbontásához.

kep1

Sok honlap esetében találkozhatunk azonban egy másik megoldással:
Ha például mobiltelefonon nyitjuk meg a HVG weboldalát, akkor a webcím egy „m” előtagot kap (a HVG esetében m.hvg.hu lesz). Ez azért van így, mert az alkalmazott technológia felismerte az eszközt, amin böngészünk és automatikusan átirányított a mobiltelefonra kifejlesztett weboldalra. Itt ugyan kevesebb tartalmat találunk egy-egy oldalon, mint az asztali verzióban, cserében viszont gyorsabban fog betöltődni az oldal.

Az üzemeltető szempontjából hátrányt jelenthet, hogy a programozás ebben az esetben drágább lehet és több időt vesz igénybe.

kep2

Teszteld le, hogy a weboldalad mobilbarát-e:

mobilbaratteszt

Mérlegelj! Bármelyik megoldást választod, a lényeg, hogy ne veszítsd el a látogatóidat/vásárlóidat amiatt, hogy az oldalad nem reszponzív! 🙂

Ha a meglévő weboldalad áttervezésében, illetve az új honlapod vagy webáruházad kialakításában profi segítségre van szükséged, keresd a renographic csapatát!

Advertisements

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

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s