Webdesign minden felbontásra

A Responsive Web Design (RWD) olyan webdesign, amely képes rugalmasan igazodni a felhasználó eszközéhez. Használatával lehetővé válik, hogy az oldal automatikusan és attól függően rendeződjön át, hogy a weboldal látogatója azt milyen eszközön éri el.

Az új weboldal tervezési szemlélet legfőbb célja, hogy az oldalak különböző mobil platformokon is optimálisan jelenjenek meg. A RWD használatával elkerülhető a különálló weboldalak fejlesztése a különböző méretű kijelzővel és felbontással rendelkező eszközökre – viszont nem kerülhető el a régi weboldalak újratervezése az új tervezési irányelvek és szabályok alapján.

A Responsive Web Design használatával megvalósítható, hogy a tartalom jól olvasható, az oldal navigációja pedig egyszerű maradjon akkor is, ha a felhasználó egy asztali számítógép monitorát figyelve, s akkor is, ha egy okostelefon kisméretű kijelzőjét nézve keresi fel az adott weboldalt.

A rendszer kulcs elemei közül a legfontosabb a napjainkra szabvánnyá vált CSS 3 Media Query modul, amelyet még 2001-ben javasolt bevezetni a W3C nevű webes ajánlásokat kidolgozó szervezet. Ennek segítségével ugyanahhoz a HTML tartalomhoz különböző stíluslapok, stílus szabályok rendelhetők a modul – elsősorban a képernyő felbontásának – lekérdezései alapján.

A webdesign tervezéskor jellemzően fluid, azaz nyúlós elrendezéssel és többnyire méretezhető képekkel dolgoznak. A layout kialakításánál gyakran használják az úgynevezett Responsive Grid rendszereket, amelyek segítségével bizonyos felbontásig összenyomódó, az alatt pedig meghatározott sorrendben egymás alá becsúszó elemeket lehet tervezni.

A sitebuild során a CSS kialakításánál kerülendő a fix méretek megadása, helyette a százalékos mód használatos. Szintén kerülendő a karakterek pontban vagy pixelben történő megadása, helyette az értékek em mértékegysége preferált.

A mobil alkalmazásokkal szemben a Responsive Web Design használatának előnye az, hogy az ismert HTML és CSS nyelvek használatával mindössze egy weboldalt kell fejleszteni, azaz pontosan egy darab weboldalt, így azon túl, hogy nem kell új dolgokat megtanulni, még a karbantartása is jóval egyszerűbb, mintha különböző IOS vagy Android alkalmazásokat fejlesztenénk. Annak ellenére, hogy a CSS értelmezése lassabb és a mobil rendszerek szolgáltatásainak csak egy része érhető el, egyszerűbb tartalmak megjelenítéséhez sokkal jobb választás, mint a mobil app fejlesztése.

Az RWD keresőoptimalizálás szempontjából is sokkal szerencsésebb választás, mint a mobil alkalmazás vagy a speciális hordozható eszközök számára kifejlesztett weboldal, amely a hagyományos weboldal tartalmának részbeni duplikálásával készül, és szolgáltatásait tekintve lényegesen szegényesebb annál.

Ingyenes resposive webdesign tutorial: W3 School - HTML Responsive Web Design

Vissza design, grafika és webdesign cikkekhez