Invalid RSS feed!

Bevezetés a responsive tervezésbe – Első lépések

-

Ismerkedjünk meg a responsive tervezés világával. A sorozatban átvesszük a tervezési szemlélethez kapcsolódó fogalmakat, területeket. 

rwd-cover1

Korábban már készült egy rövid RWD bemutató, azonban ebben a sorozatban kicsit magasabbra tesszük a lécet. Igyekszünk áttekinteni a módszer fő területeit, mint a folyékony rácsszerkezet, média lekérdezések és a folyékony média elemek. Mindezek mellett kitérünk a kapcsolódó témákhoz is, mint a retina optimalizálás, fejlesztői eszközök, vagy a teljesítmény. A sorozat végén remélhetőleg egy biztos alappal rendelkezünk majd a responsive tervezésről!

Történeti áttekintés

Az internet, mint médium nagyon fiatal. Számos dátumot emlegetnek úgy, mint az internet születése, azonban abban egyet érthetünk, hogy a napjainkban használt internetnek nevezett megoldás, vagyis a Word Wide Web 1991-ben született, azaz 22 éves múlt. Összehasonlításként, a könyv évszázados múltjához képest még sehol sincs. Új médiumként a meglévő, vagyis a nyomtatásban szerzett tapasztalatokra hagyatkoztak azok a tervezők, akik ott voltak a kezdeteknél, így innen ered a fix szélesség. A weboldalakat úgy jó 2-3 évvel ezelőttig úgy kezeltük, mint egy nyomtatott kiadványt, amit egyszer elkészítünk, kinyomtatunk, majd fizikai valójában használjuk. Egy könyv esetében egyértelmű, hogy miután kinyomtattuk/bekötöttük nem módosíthatunk a megjelenésén. Ellenben egy weboldalt eltérő tulajdonságú eszközökkel is megtekinthetjük, mint a telefon, tablet, vagy számítógép. Mindennek tudatában már könnyű belátni, hogy ezeknek a nyomtatott megoldásoknak az átvétele nem bizonyult a legjobb megoldásnak, hiszen a mobil piac bővülésével, ha nem is elesünk a látogatóktól/felhasználóktól (a legtöbb oldal nézhető, igaz nem teljesen kényelmes), annyi biztos, hogy felhasználás szempontjából kényelmetlen egy nagy kijelzőre tervezett oldalt, mobil eszközön böngészni. Napjainkban történik a váltás, a két módszer között. Ma már biztosan kijelenthetjük, hogy a responsive tervezés, nem csak egy trend, hanem egy használható megoldás. Természetesen, a váltás sosem egyszerű, az internet jó pár évig, csak a böngészők háborújáról szólt, így nincs mit csodálkozni azon, hogy ez a megoldás csak a közel múltban jött a világra.

A statikus oldal struktúra tervezés során kialakultak azok a méretek, amikre a designerek szívesen terveznek. Még napjainkban is sokan úgy tartják, hogy az 1024-es kijelző méret a standard. Ebből ered a 960px széles szabvány. A dologban természetesen az érdekes az, hogy azért tervezünk erre a méretre, hogy a lehető legtöbb felhasználó képernyő méretét támogassuk, ami ma már nem állja meg a helyét, hiszen a kisebb kijelzővel rendelkező készülékek kiesnek a szórásból. Itt jön képbe a responsive tervezés, pont erre találták ki!

Mi az a responsive tervezés?

A responsive tervezés lényege, hogy a tervezett oldal alkalmazkodik a felhasználó kijelző méretéhez, mindig az adott eszköz kijelző méreteihez igazodva.  Manapság nem nehéz belátni a technika előnyeit, mivel nap mint nap jelennek meg újabb mobil eszközök más-más felbontással és természetesen lehetetlen, hogy minden kijelző méretre egyenként készítsük el a fix szerkezetes oldalunkat. Így született a megoldás, vagyis az RWD, amit Ethan Marcotte alkotott meg 2011-ben.

Akárcsak az AJAX esetében úgy itt sem egy új megoldásról beszélünk, hanem a meglévők megfelelő kombinációjáról.

A responsive tervezés kifejezést még nem igazán fordítottuk magyarra. A leghelyesebb fordítás talán a válaszoló tervezés lenne, de ez hangzatra és nyelvileg nem az igazi, így a következő írásban, mind az angol nevén: responsive, mind rövidítve: RWD (Responsive Web Design), mind saját fordításban, vagyis mint: alkalmazkodó tervezési módszer (mivel a terv alkalmazkodik a kijelző méretekhez), említem majd.

Nézzük a számokat!

Az alkalmazkodó tervezés népszerűségét a mobil eszközök fejlesztésének köszönheti. 2007 előtt telefonon böngészni nem volt nagy élmény. Kezdetleges böngészők, lassú sávszélesség, használhatatlan navigáció és persze WAP. A mobil oldal készítés nem igazán volt opció. Aztán 2007-ben megjelent az iPhone, ami elindította a lavinát. Az első telefon, aminek a segítségével elérhetővé vált az internet a mobil felhasználóknak is. Jó böngésző, érintés vezérelt navigáció, nagy kijelző méret.

A telefonnal történő internet elérés azóta roham tempóban növekszik. Meg jelent a BlackBerry, az Android és a Windows Phone. A w3schools.com operációs rendszer statisztikáján remekül látható a fejlődés. A mobillal történő elérések majdnem a duplájára az elmúlt egy évben. Jelen pillanatban úgy néz ki, hogy még egy jó 8-9 hónap és megelőzi a Linux eléréseket. A mobilok között az Android vezet, majd követi az iOS. Ezek a számok hatalmasak, ahhoz képest, hogy a fejlődés igazán csak 2007 óta indult meg!

Az RWD összetevői

Az alkalmazkodó tervezéshez számos mellék területet is kapcsolhatunk (mint a retina optimalizálás, hiszen a mobil eszközök kijelzője jelenleg már jóval fejlettebb pixel sűrűséget tekintve, mint az asztali társaiké), de lényegében 3 összetevőre bontható, ezek pedig a folyékony rácsszerkezet (fluid grid), a média lekérdezések (Media Queries) és a folyékony média (fluid media). E három összetevő segítségével készíthetünk responsive oldalt.

Folyékony rácsszerkezet

Az összetevők közül valószínűleg ez a legidősebb. Már nagyon régóta téma volt webes körökben, az alkalmazkodó oldal (igaz, nem olyan megközelítéssel és szinten, ahogy Ethan megfogalmazta). A folyékony oldaltervek fix értékek (pixel) helyett százalékot használ a méretek beállításához. Azt gondolhatnánk, hogy százalékkal megadott értékekkel nem lehet pontosan oldalt építeni, pedig ez nem így van. Van egy nagyszerű képlet: (aktuális elem pixelben / befoglaló elem pixelben) x 100 = elem szélessége %. Ezzel a képlettel pontosan kitudjuk számolni az egyes elemek viszonyát, azaz a pontos százalékos értékét.

A responsive tervezés során egy régi, talán berögzült személetünktől búcsút kell vennünk (persze, ha követtük), ez pedig a pixel pontos oldal építés. Százalékkal kalkulálva egy kicsit nehezebb elérni ugyan azokat a méreteket, figyelembe véve, hogy itt már arányokkal dolgozunk, ami az adott kijelző függvénye.

A szerkezet kialakítása során nagy népszerűségnek örvendenek a keretrendszerek, mint a Bootstrap, vagy a Fundation. Ezeket nagyon jól tesztre szabhatjuk és nagyon egyszerűen hozhatunk létre velük szinte bármilyen szerkezetet.

Média lekérdezések

A Media Query nem más, mint egy megfelelő helyzetre vonatkozó formázás. Tegyük fel, hogy megszeretnénk változtatni a body hátterét 768px-nél kisebb kijelző méreten csupán erre a kódra van szükségünk:

See the Pen qcCDJ by Laki Ádám (@lakiadam) on CodePen.

Amint a böngésző ablak mérete 768px alá megy a body háttérszíne lilára változik. A Media Query-ben használt stílusra ugyan azok a szabályok vonatkoznak, mint a CSS-re, tehát ugyan úgy rangsorolt, mint a dokumentum többi része. Jelen esetben azért változik meg a háttérszíne, mert a 768px-nél kisebb oldalakhoz rendelt kód az eredeti body elemhez rendelt kód alatt van, a sorban mögötte. Ha például az eredeti kijelölő elé oda írjuk még a html szelektort, akkor a Media Query már nem működik ebben a felállásban. A megoldást jelenleg IE8-ban nem használhatjuk, viszont használhatunk kiegészítő, JavaScript megoldást, amivel elérhetjük ugyan ezt az eredményt.

Folyékony média

Folyékony médián a képek, videók responsive-an történő kezelését értjük. A képek és a videó beágyazás területén hatványozottan igaz a fix méret használata, hiszen még a validátor is megjegyzi nekünk, hogy bizony meg kell adnunk a HTML tag-ben a szélességet és a magasságot. Az alkalmazkodó tervezés egy érdekes és egyben az egyik legtöbb fejtörést okozó területe ez, hiszen a kép és egyéb média elemek mérete nagyon megszaladhat. A legnagyobb probléma talán az, hogy egy nagy felbontású monitoron és egy kisebb alap kijelzővel ellátott telefonon nem biztos, hogy szerencsés dolog ugyan akkora méretű képet felhasználnunk. Az oldal optimalizálását elősegítő eszközök ki is emelik nekünk, hogy ne használjunk nagyobb képeket egy kisebb méretű befoglaló elemben, mert növeli az oldal letöltés idejét, amikor nincs is szükségünk a nagyobb képekre.

Responsive tervezés korlátai

Mind sok más technika, ez sem jelenthet egyértelmű megoldást minden problémánkra.  Könnyen előfordulhat, hogy egy nagyobb oldal esetén ésszerűbb megoldás, ha készítünk egy mobil változatot. Mivel a technika még fiatal, még akadnak megoldásra váró hibák. Ezek közül a legkomolyabb talán a képek méretéből ered.

Oldal ajánló

A manapság már nincs nehéz dolgunk, ha responsive oldalakat akarunk böngészni. A népszerű webes galériákban, mint például az Awwwards, ahol szinte az összes oldal az. Továbbá érdemes inspirációért körül nézni a ThemeForest oldalán is.

Összegzés

A responsive tervezés már beköltözött a hétköznapjainkba, nem igazán van mentség, arra ha nem számolunk a mobil eszközökkel egy weboldal esetében. Ezzel a módszerrel optimalizálhatjuk az oldalainkat a legtöbb kijelzővel rendelkező, böngészésre alkalmas készülékre. Egy izgalmas és új technika, amiben még számos lehetőség rejlik.

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.