A Responsive webdesign, vagyis „érzékeny” weboldalak

Ma az internetező magyarok 44%-a rendelkezik már okostelefonnal, így a mobil eszközös böngészés népszerűsége folyamatosan nő. Egyre kézenfekvőbb és keresettebb a responsive webdesign. Célja, hogy a weboldal minden platformon jól használható és optimális vizuális élmény legyen.

Az egyik legnagyobb haszna, hogy nincs szükség átirányításokra, illetve a funkcionális dolgok változatlanok maradnak, csak a megjelenés igazodik az eszközökhöz.

Miért van rá szükség? Sajnos a képernyőre optimalizált weboldalak kis száma kellemes látvány telefonon is. Egy weboldal kb. 960-1040 pixel széles. Annak elrendezése nem alacsonyabb felbontású, vagy más tájolású képernyőkre lett kitalálva. Ha van egy 20 pixel magas gombunk, arra telefonon elég nehézkes rákkattintani.

A felhasználók legalább 10%-a talán nem is látja számítógép képernyőn a honlapodat, csak tableten vagy telefonon. Nem engedheted meg magamnak, hogy a felhasználók egy részéről egyszerűen lemondj, így hát nem kérdés, hogy szükség van-e mobilra optimalizált változatra is. Kell, hogy a mai modern világban a weboldalad kompatibilis legyen több eszközzel, mint például Netbookok, Blackberry, iPhone, iPad, tabletek, könyv olvasók és okostelefonok.

responsive design

A responsive webdesign tulajdonképpen egy tervezési technika, amely középpontjában a felhasználói környezet és a viselkedés alapján való tájékozódás áll. Magyarán a honlap automatikusan átméretezi magát, hogy illeszkedjen a készülék képernyőjéhez. De honnan tudjuk, hogy a felhasználó épp milyen felbontás alatt nézi a weboldalunkat? Nem tudjuk.

CSS média lekérdezések segítségével tudunk tájékozódni és kiszolgálni az eszközöket a képernyő mérete, tájolása, felbontása, és egyéb jellemzői alapján. A responsive webdesign nem csak a szabályozható képernyő felbontásban, és az automatikusan átméretezhető képekben merül ki, hanem használhatósági kérdések is felvet. Attól, hogy egy weboldat összenyomunk 480 pixel szélesre az még nem lesz teljesen felhasználóbarát okostelefonon.

Fontos, hogy a weboldal felülete nem fix méretű és pozíciójú grafikai elemekből áll. Rugalmas layoutot kell tervezni.

A responsive webdesign legfontosabb követelményei

  • Nincs hely 10-15 menüpontot felsorolni. Optimalizálni kell a navigációs rendszert.
  • Linkek és gombok felnagyítása, átméretezése, hogy érintés-barát legyen.
  • Táblázatok, betűméretek megfelelő átméretezése.
  • Retina érzékeny képek használata, hogy más felbontásban is élesek legyenek.
Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.