Ez a számláló a poszt nézettségét mutatja. Mindenképp olvasd el ezt a posztot a részletekért.
 

Reszponzív webdizájn: hogyan, miért, kinek?

responsive web design

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: 

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
2012.03.06. 20:22. írta: hírbehozó

A bejegyzés trackback címe:

http://webisztan.blog.hu/api/trackback/id/tr554293274

Kommentek:

A hozzászólások a vonatkozó jogszabályok értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a Felhasználási feltételekben.

// Gery Greyhound · http://greyhound.blog.hu 2012.03.06. 21:05:08

Én például kifejezetten rühellem az erőszakosan mobilra "optimalizált" (vagy inkább butított) oldalakat, főleg azokat, amelyek nem képesek megjegyezni, hogy én nem akarom látni.

Nem is kell messzire menni, itt van például a bloghu. A világon semmi gondom nem volt a mobilverzió létezése előtt, de amióta megjelent, teljesen leszoktam a telefonról való kommentelésről, mert átláthatatlan a kommentek megjelenése, az inda login 80 százalékban nem működik, ha meg a "teljes verzió" linkre kattintok, sokszor végtelen ciklusba kerül a cucc: mint ha át akarna irányítani a teljes verzióra, az meg rögtön vissza a mobilra, ez így váltakozik egy darabig, utána feladja a harcot a telefon és hibát ír.

Szóval macerás, bezzeg amíg csak a desktop verzió volt, az vígan ment a Galaxy S-en, ami ma már egy igencsak belépő szintű készüléknek számít - meg lehet nézni a most barcelonában bemutatott leggyengébb HTC telefont, már abban is másfélszer erősebb proci van. Egy négymagos atomerőműnek pláne nem okozhat gondot egy normál weboldal megjelenítése... Szóval szerintem tök fölösleges ez a régi wap-os korszakot idéző mobilverzió-mánia.

robi · http://playground.blog.hu 2012.03.06. 23:00:02

@Gery Greyhound (project ELE^EN): egy rossz példán keresztül általánosítasz.

Nézzed onnan, hogy nemcsak a telefon és a desktop van, hanem különböző felbontások, különböző fizikai méretek (egy tvnek akkora felbontása van mint egy harmad akkora tabletnek), különböző színmélységek (ebook olvasók) és persze mindegyiket másképpen irányítod: ujjal, egérel, billentyűzettel, távirányítóval.

Az lenne a jó, ha kicsi és jól kontrollált változásokkal tudna ugyanaz a tartalom megjelenni az eszközökön anélkül, hogy zoomolni vagy valami varázsgesztusokat kéne bemutatni.

Ennek a szép, hosszú fejlődésnek az első lépése a reszponzív dizájn.

láblógató 2012.03.07. 11:25:00

Megemlíteném még fluid sitebuildhez a Twitter Bootstrapjét.

Kaleb 2012.03.07. 13:09:54

Én írtam neked a levelet a sok kérdésemmel és örülök, h egy egész postot szenteltél a témának. Köszönöm a kimerítő választ, bele is vetem magam az ajánlott cikkekbe :)

_uSeLeSS_ 2012.03.08. 18:41:12

Ha a hirdetések meghatározott blokkokba kerülnek, akkor egy egyszerű user agent lekérdezéssel megoldható, hogy az adott felülethez passzoló hirdetést jelenítse meg.

markusbird 2012.03.12. 20:28:56

Megcsíptem pár munkát, ahol már kész oldalakat módosítok reszponzívra. Van olyan kód, amit jobban megírtak, van amikor a teljes navigációt újra kell írni, de alapvetően nagyon élvezhető ezekkel a szempontokkal dolgozni. 2, 3, esetleg 4 media query általában elég (default, tablet, mobile, small mobile.) Retinán szarul kinéző képek azért bebasznak, ott kell kompromisszumokat kötni sajna, de trükközéssel minimalizálható a fájdalom.


Blog, azoknak, akik a weben élnek, és már elfelejtették, hogy merre van Offlájnia.

A szerző (Szabó Gergely) design/ux és product vonalon tevékeny. Most épp a Ringier-nél is.

Email: webisztan at gmail

wwbutton.png

Hirdetés

Ezt olvassátok ti

Munkához friss linkek

Témák

android (109) app (40) apple (82) beharangozó (53) bloggerek (126) blogok (129) blogszolg (33) böngészők (34) bulvár (159) copyright (30) dev (83) dizájn (51) facebook (204) feed (30) filozomatika (120) firefox (34) gmail (83) google (515) google maps (49) hirdetés (34) how to (44) ingyen (31) ipad (31) iphone (87) iwiw (102) kávéhoz (84) keresők (51) kommuniti (133) konferenciák (51) lol (91) magyar (383) marketing (71) mashup (45) média (113) meetup (39) microsoft (95) mobil (115) myspace (46) politika (34) social network (161) startup (124) stat (111) térképalkalmazások (50) twitter (164) üzlet (129) videó (150) videómegosztók (94) wikipedia (35) yahoo (57) youtube (94) zene (63) MÉG TÖBB TÉMA

Olvasó szez

A Webisztánon még

Feedek