Responsive Design – 1. rész

ekkor: 2012-07-19 · Kategória: Webdesign

Mit is jelent, hogy Responsive Design?

Nos, a válasz egy új trend a webdesign területén. Szó szerint a fordító “érzékeny web-design-t” dobna, vagy valami hasonlót, de itt most a “böngésző méretéhez igazodó” webdesign-ról lesz szó. Mivel nem találtam kifejezetten erről szóló magyar nyelvű cikket, egy gyors rákeresésre, ezért gondoltam, akkor itt kivesézhetnénk a témát.

Minek ez?

Az első kérdés talán rögtön a fent látható: “Miért is van erre szükség?”. A válasz abban rejlik, hogy mára rengeted eszköz jelent meg a piacon, melyek képesek böngészésre, és az optimalizáció mindig is nehéz volt. Ahhoz, hogy minden böngészőn, minden felbontáson tökéletesen használható és stílusos legyen a lapunk, elég komoly tervező munkára van szükség. Sajnos a webdesign nem olyan, mint az építész szakma, ahol egyszer az angol Christopher Wren azt mondta, hogy neki egyetlen célja van, az épületeivel: az “örökkévalóság”.

Itt, amit 5 éve felépítettünk, bizony nagyon könnyen elavul és használhatatlan lesz. Ezért van szükség azokra a stílusokra, amelyek kiszolgálják a mai piacot is, és a jövőt egyaránt. Itt jön képbe a Responsive Design. A jövőben, ha tippelnem kellene, 3-5 éven belül a mobil eszközökön történő böngészés meghaladja a desktop típusú böngészést, arról nem is szólva, hogy mindig jönnek új játékosok a képbe, felhozhatnám példának a játék konzolokat, melyekből 2 képes a böngészésre, és ebből egy ráadásul elég jól optimalizált (Nintendo WII), de ez a jövőben csak bővülni fog, hiszen eddig még kiaknázatlan piac volt. Aztán jön folyamatosan a TV-képernyőkön történő böngészés, különféle platformokon, szerintem pár éven belül már egy egyszerű media-lejátszót is fel lehet majd dugni a netre. Beszélhetnék továbbá az érintőképernyős platformok elterjedéséről is, de nem teszem. Szerintem mindenkinek világossá kezd válni, hogy egyre több eszköz lesz, és már most is rengeteg van, amire egy általános megoldást kellene találni a webdesign területén.

Az előző trendek

Az előző trendek természetesen még jó ideig megmaradnak, mindig is lesz egy olyan szegmens a weboldalaknál, amik nem fognak változni. A lényeg, hogy nem kell mindenkinek ezt tennie, hiszen a lehetőség már adott és egyre többen élnek vele. Nem is olyan régen (és még napjainkban is) a nagyobb lapok hazánkban külön aldomainként hoztak létre a mobil böngészőknek lapot, amire automatikusan megtörtént az átirányítás. Ez egy jó megoldásnak tűnik, ám nem túl költséghatékony, és természetesen a külön telefon-platformok, külön kódokat is igényelnek. Ezért volt olyan, hogy külön iPhone-oknak csináltak egy lapot és külön nem-iPhone-oknak. Az ilyen mértékű fejlődéssel viszont nem lehet felvenni a harcot, ez csak a webdesignerek és site-builderek munkáját nehezíti meg, ami természetesen plusz költségekkel jár.

Nézzük meg példákkal

Tudom, mindenki a példákat várja, ezért vágjunk is bele. A legegyszerűbben onnan tudod, hogy itt egy Responsive Design-ról van szó, hogy ha összehúzod a böngésződet, változik az egész honlap (ezért hívjuk magyarul “a böngésző méretéhez igazodó designnak”).

Első példa design

Első példánkban egy olyan lapot nézhetünk meg, amely már alkalmazkodik a felbontáshoz, azonban teljesen fix elrendezésekkel dolgozik. Kiszolgálja a különböző kért méreteket, azonban a megjelenítésekben még hibák vannak.

Ha közelebbről megnézzük, itt a feltöltött képek mérete indulásnál akkora lesz, amekkorában kifér a kijelzőn. Kisebb felbontásban viszont már összefolynak a kijelölt divek és egymást takarhatják, itt special a logó mögötti képes terület teljesen összeomlik, mivel a logó van csak meghatározva konkrétan. A navigáció is eltorzul 800×600-as felbontás környékén. De ne is álljunk meg itt, hiszen óriási felbontásnál a képek akkorák lesznek, hogy teljesen elvonják a figyelmet a szövegekről és természetesen a minőségük is rohamosan romlik a nagyítás mértékével egyetemben.

Röviden használhatóbb, mint egy átlagon non-responsive design, ám az optimalizáció manapság nem áll meg ennyiben.

Működés

Szerencsére a programozást megkönnyítendő, a WC3 létrehozta a nagyon hasznosak bizonyuló media query-t, azaz média lekérdezést. Ez teszi lehetővé, hogy már nem csak különféle eszköz-osztályokat kérdezzünk le, hanem egyből a fizikai karakterisztikáját is megtudhatjuk az oldalunkat böngésző eszköznek (Így például pixel pontosan a felbontást is). Ezt a technikát természetesen minden nagyobb cég támogatja, legyen az akár iPhone, akár Android, hiszen mindenkinek érdeke, hogy a böngészés élvezhető legyen, illetve zökkenőmentes.

{code type=codetype}<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”shetland.css” />{/code}

A lekérdezésnek két komponense van:

  • 1) média típus (sreen) és
  • 2) egy külön zárójelezett média funkció (max-device-width), ami a maximális szélességét jelöli az eszköznek.

Működése tehát valahogy így hangzik: Ha az eszköz horizontális felbontása kisebb, vagy egyenlő, mint 480px, akkor a lekérdezés igaz, tehát betölti majd a sheetland.css-t. (Ez ugye valami kisebb mobil eszközre lenne igaz, mondjuk egy iPhone)

Természetesen csinálhatunk multi-lekérdezéseket is, íme egy példa erre is:

Itt az “and” használatával több lekérdezés is mehet egyszerre, a pontosabb, vagy tágabb meghatározások érdekében.

{code type=codetype}<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px) and (resolution: 163dpi)” href=”shetland.css” />{/code}

Ezen felül használhatjuk a CSS részeként a @media szabályt is:

{code type=codetype}@media screen and (max-device-width: 480px) { .column { float: none; } }{/code}

Illetve akár @import szabályon belül is:

{code type=codetype}@import url(“shetland.css”) screen and (max-device-width: 480px);{/code}

Akárhogy is, a lényeg az, hogy a lekérdezésen az eszköz áthaladjon, és mi megkapjuk a szükséges adatokat, amivel már felépíthetjük a designt, ha mindent jól csinálunk, akkor mindig a releváns CSS fog betöltődni az eszközök böngészőjén…

Hamarosan folytatódik!

Ez volt az első cikk a témáról, akit érdeke bővebben is a dolog, annak üzenném, hogy hamarosan kész a második felvonás, ahol tökéletesítjük az eddig felhozott példát. Addig emésztgessük ezt, de akit bővebben érdekel a dolog, nyugodtan tegyen fel kérdéseket, megpróbálok válaszolni.

Itt a folytatás!