Az utóbbi egy évben sokan kérezték meg, hogy miért és hogyan érdemes reszponzív webdizájnban (sitebuildben) gondolkodni. Ugye a kérdést elsősorban az okostelefonok és táblagépek terjedése implikálja: milyen jó lenne, ha egyetlen sitebuilddel mindhárom kijelzőn rugalmasan működő webdizájnja lehetne a szájtunknak. 

A helyzet sokat bonyolódott és egyszerűsödött is az elmúlt hónapokban. Két szempontot szeretnék most itt megemlíteni, plusz pár hasznos tippet. 

Az egyik szempont, hogy azok a szájtok, melyek számára fontos az online hirdetési bevétel, sokszor külön értékesítik a mobilra optimalizált weboldaluk mobilra optimalizált hirdetési felületeit. Ilyen szempontból a reszponzív webdizájn nem olyan jó választás. Hiszen a különféle kijelzőméreteken és -felbontásokon nem fog ugyanolyan jól mutatni a hirdetéskreatív. Ezt a szempontot (mobil hirdetések) mindenképpen érdemes végiggondolni, mielőtt belecsapunk a lecsóba. 

A másik szempont, ami viszonylag újkeletű, hogy az újabb generációs, nagyképernyős, nagyfelbontású, erős hardveres képességű okostelefonokon már nem annyira fontos a mobilverziók erőltetése. Kiváló példa az iPhone 4 vagy a Galaxy Nexus. Utóbbi esetében a 4,65 hüvelykes (118 milliméteres) kijelzőn 720x1280 pixel (316 ppi) jelenik meg. Ekkora felületen pedig már inkább a szájtok teljes verzióját szereti nézegetni az ember, és kevésbé az egyszerűsített, mobilra optimalizált layoutokat.

Avagy: a desktop kijelző méretek, a táblagépek és okostelefonok mellett immár a nagyképernyős, erős hardveres okostelefonokra is optimalizálni kellene. Ugyanakkor nincs érdemi különbség egy iPad 2 és egy iPhone 4 kijelzőélménye között. Persze, az iPad fizikailag nagyobb kijelző, de az olvashatóság, navigációs szempontok közötti szakadékok kezdenek szűkülni. Úgyhogy sokkal szofisztikáltabban kell hozzáállni egy reszponzív sitelayouthoz, mint korábban. 

És akkor néhány hasznos link, még mielőtt belekezdtek: 

• Reszponzív navigációs minták
• Ethan Marcotte: Responsive Web Design
• Szövegátméretezés, tipográfia
• Use case: reszponzív webdizájn implementálása
• Fluid grid
• @media query
• Adapt.js
• Tiny Fluid Grid
• Gridless
• Skeleton
• 320 and up
• Lettering
• FitText
• Modernizr
• Mobilize

A fenti cikkek és eszközök végigmolyolását követően én a lehető legegyszerűbb grideléssel kezdenék bele a tervezésbe. Ha egyszerű, mondjuk két hasábos layoutok esetében nem csak a tartalmak megjelenését, de a navigációt, menüszerkezetet, betűméreteket, képátméretezéseket, videómegjelenítéseket sikerül megoldani, akkor érdemes második körben nekiállni az egész szénné optimalizálásának.

Ne az legyen a vége, hogy egy nagyon reszponzív, ám nagyon nehézkesen betöltődő weboldallal végül felbosszantjuk a júzereket, rontunk az összélményen. Tehát minimalizált layout, majd szigorúan meghatározott alaplogikák, utána pedig optimalizálás. És ha ezek megvannak, esetleg újratervezhetjük az egészet eggyel összetettebb szinten is. 

Ezen a ponton pedig ismétcsak szembesülni fogunk a böngészőkompatibilitási problémákkal, valamint az egyes mobileszközök hardveres és böngészőt érintő korlátaival. Jön majd a felismerés, hogy az iPad 1 és iPad 2 között is van akkora különbség hardveresen, ami fejfájást okozhat a javascriptek nyakló nélküli alkalmazása miatt.

A mobiltelefonok böngészőjénél pedig a cache vagy a javascript futtatási képességek korlátaival. De ha már itt tartuk, nem fogunk visszafordulni. Mert reszponzív oldalakat tervezni alapvetően jó dolog: logikailag szigorúan koherens szemléletet kíván. Nincs más dolgunk, mint fluid gridekben, flexibilis képekben és media querykben gondolkodnunk. 

A reszponzív webdizájn a weboldaltervezés azon vetületéről szól, hogy a weben ésszerűtlen dolog egyetlen felbontásra, egyetlen, merev layoutra apellálnunk. Ha képesek vagyunk dinamikus oldalfelépítések tervezésére, akkor egyben a saját kontentünket, annak belső logikáit is jobban fogjuk érteni. Avagy: jobban fogjuk érteni a web igazi nyelvét. 

Címkék: webdesign felbontás sitebuild okostelefonok retina display reszponzív webdizájn responsive display resolution képernyőméret