Responsive Design – 2. rész

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

Responsive Design folytatás

×Ez a cikk, egy előző cikk folytatása, ajánlott az 1. résszel kezdeni!

Folytassuk tehát a témát, ahol abbahagytuk. Ha leülepedtek a dolgok, akkor elő is rukkolok az előző példa tökéletesítésével, hiszen az még koránt sem volt kész.

Csomópontok létrehozása a designban

Sajnos jobb címet nem találtam a dolognak, ezért csomópontoknak neveztem el azokat a helyeket, amelyek felbontás-specifikusan változnak a designunkon belül. A Responsive Design ugyanis nem merül ki annyiban, hogy a képek mérete, illetve a szöveges boxok mérete csökken a felbontás zsugorodásával. Az ördög mindig a részletekben rejlik. Ha nem mutat jól alacsony felbontáson az adott elrendezés, akkor készítsünk több elrendezést a különböző méretekre. A lekérdezés része már megvan, tehát egy kis CSS programozással a lehetőségek (elrendezések) végtelen tárháza nyílik meg a designerek előtt. Most ezekre a “csomópontokra” fogok hozni egy példát:

A csomópont létrehozása a lekérdezéssel együtt már nem okoz semmilyen bonyolultságot. A CSS végére nyugodtan beilleszthetjük saját kódunkat:

{code type=codetype}@media screen and (max-width: 600px){ .mast, .intro, .main, .footer { float: none; width: auto; } }{/code}

Így ebben a példánkban, ha lecsökkentjük a böngésző méretét 600px alá, átrendezi az oldalt található menüelemet a könnyebb olvashatóságért (és jobb design-ért) lapunk tetejére. A kód eltávolítja a float tulajdonságokat, de természetesen felbontás-specifikusan.

×Fontos megemlíteni, hogy a jó Responsive Design mind a két irányban jól működik! Figyeljünk az óriás felbontásokra és a miniatűr felbontásokra egyaránt!

Az óriási felbontásokhoz újabb kódot iktathatunk be. A példánkon jól mutat, ha egy sorban vannak a képek, és csak alacsonyabb felbontáson rendeződik vissza a 3 oszlopos megjelenítéshez. Ehhez nincs más dolgunk, hogy beillesszük az alábbi kódot:

{code type=codetype}@media screen and (min-width: 1300px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 13.902053712480252764%; /* 88px / 633px */ } {/code}

Ne aggódjunk a százalékos értékek miatt, ezek az un. fluid grid számítás miatt jöttek így ki, amiről még tervezem, hogy készítek egy fordítást. Tulajdonképpen itt százalékosan vannak megadva a különféle referenciapontok, amelyekhez a design egyes részei csatlakoznak.

Ez természetesen csak a kezdet. Átrakosgathatjuk a menüket is és bármilyen elemet felbontás-függő elrendezésre kényszeríthetünk ezzel az aránylag egyszerű technikával.

Nincs határ

Ahogy azt utolsó példánk is mutatja, bármi létrehozható és jelenleg ez a legidőtállóbb webdesign típus, amit láttam.

Responsive Design ellenőrzése

Mivel gondolom nincs mindenkinek minden fajta okos-telefonból otthon egy példány, (a többi platformról nem is beszélve) no és persze a böngészőt sem lehet mindig húzogatni, ezért elmondok egy módot ennek a webdesign stílusnak az ellenőrzésére: Responsive Design Tesztelése. Egyszerű és nagyszerűen működik, egyetlen hátránya, hogy lapunkat fel kell tölteni, hogy meg tudjuk nézni az eredményt.

forrás