Responsive Webdesign (RWD) - tökéletes megjelenés minden eszközön

A Responsive Webdesign lényege, hogy egy adott honlap minden megjelenítő eszközön (Asztali számítógép, laptop, tablet, okostelefon, internet tv) tökéletes formában jelenik meg.

A Responsive Webdesign (RWD) lényege, hogy egy adott honlap minden megjelenítő eszközön (Asztali számítógép, laptop, tablet, okostelefon, internet tv) tökéletes formában jelenik meg.

A 2016-os év "Varázs mondata" a Responsive Webdesign bevezetése volt. A témában rengeteg hasznos és alaposan kidolgozott cikk található az interneten (lásd: ajánlott oldalak ), ezért inkább egy gyakorlati példán keresztül, alkalmazásának előnyeire helyezném a hangsúlyt.

Az ok: a megjelenítők felbontása

A megjelenító eszközök felbontása a 3" kijelzővel rendelkező mobil telefonok 320x480-as felbontásától a 27" 2560x1440pixeles szuper kijelzőkön át a 3840x2160 felbontású UltraHD televíziókig nagyon széles skálán mozog.

A felbontások kezelésében további nehézséget jelent, az elforgatható - azaz webDesign szempontjából két felbontással rendelkező - megjelenítő eszközök elterjedése, hiszen az elforgatás során az oldal nem frissül.

Responsive Webdesign (nagyon) rövid története

A sokféle felbontás és megjelenítési mód miatt a Responsive Webdesign nem a korábban alkalmazott, - az egyes felbontások kezelésre irányuló - megoldások végtelen bővítésére, hanem az egyes képernyőelemek (képek szövegdobozok, betűméretek, stb.) rugalmas, helyzetérzékeny megjelenítésére törekszik.

A legtöbb esetben elegendő volt az egyes elemeknél korábban alkalmazott fix méreteket százalékosan megadni, azonban egyes esetekben - például a kisebb felbontások esetén a navigációhoz szükséges menürendszer alkalmazása során, - az egyes elemek működését is a felbontásnak megfelelően kellett megvalósítani (lásd a képen).

Az egyéb aktív elemek (Kérdőívek, gombok, galériák) responsive megjelenítését tovább nehezíti, hogy azok megjelenítése legtöbb esetben független az alap keretrendszertől, és a megjelenítő script kódja csak kódolt formában áll rendelkezésünkre.

A különböző kliens oldali (böngészőben futó) keretrendszerek (css, JQuery, stb.) fejlődésével a megoldások egyre szélesebb körben állnak a webfejlesztők rendelkezésére.

A Közösségi média térhódításával az ott alkalmazott keretrendszerek nyilvánossá váltak, kezelésük működésük általánosan elfogadottá vált.

Legyünk Responsive-ak!

Új honlap készítése során a webfejlesztők már alapvetően a legújabb keretrendszereket és eljárásokat alkalmazzák, így gyakorlatilag a Responsive megjelenés nem jelent problémát. A legtöbb cég és honlap azonban már évek óta jelen van az Interneten, és gyakran a már meglévő honlap szerkezetének átalakítása nem várt eredménnyel jár.

Sajnos nem elég csupán néhány új szkriptet és linket elhelyezni a honlap kódjában, meg kell változtani a honlap teljes szerkezeti felépítést, kódját.Ez sokszor csak hibás megjelenést, de a legrosszabb esetben akár tartalomvesztést és ezáltal komoly leminősítést is okozhat.

Régi oldal Responsive Designja

Az alábbi gyakorlati példában -a megrendelő hozzájárulásával - részletesen bemutatom egy honlap modernizálás részeként megvalósított Responsive Webdesign-t.

A honlap modernizálása során a megrendelő nem akart a régi, bevált designon változtani. A honlapot méglévő működését további elmekkel (Ajánlatkérés, kérdőív) kellett bővíteni.

Az alábbi képeken jól látható, hogy a honlap megjelenése normál felbontások (pl 1920x1080) esetén nem mutat jelentős eltérést. Ne felejtsük el azonban, hogy a régi oldal néhány elemének megjelenítési beállításait nem lehet teljes mértékben a Responsive Design eszközeivel reprodukálni.

Az azonban már ebben a nézetben is szembe tűnik, hogy modernizálást követően az oldal tartalma szellősebb, jobban kihasználja a felbontás nyűjtotta előnyöket (szélesebb, nagyobb képek, nagyobb, olvashatóbb betűk).

A honlap modernizálás Full HD (1920x1080) nézetben

A honlap modernizálás Apple IPhone 3GS (320x480) nézetben

A honlap modernizálás Apple IPhone 6 (375x667) nézetben

A valódi különbség a mobil telefonok esetén érzékelhető igazán. A régi oldal vizszintes irányban "kilóg" a képernyőről, a normál felbontásban látványos háttér és hivatkozás csak részben jelenik meg.

A modernizálás során a jobb felső sarokban elhelyezett Asztalfoglalás gomb mobilos megjelenítés esetén kiemelve, teljes szélességében jelenik meg.

Nincs is annál bosszantóbb, mint amikor egy "két körömnyi" gombocskát kell megnyomnunk a mobil telefonon...