csík gyula - a grafikus, az ügyfél és a responsive webdesign

A grafikus, az ügyfél és a responsive webdesignCsík Gyula - Drone Creative

Az előadás tartalma:I. rész - A grafikus és a responsive webdesignII. rész - Az ügyfél és a responsive webdesign (esettanulmány)

I. rész - A grafikus és a responsive webdesign

grafikus

Egy kapcsolat apróbb bukkanókkal...

responsive webdesign


Fejlődtek a kijelzők...Több lett a hely és a tartalom is.

640x480 800x600

1024x768


DE


A következő 5 éven belül az USA-ban már többen fognak mobil eszközről netezni mint asztali gépről.* * Forrás: Beyond the mobile web by yiibu (http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu)

http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu

http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu


Hogyan tervezünk mobil eszközökre ma?


Hogyan tervezünk mobil eszközökre ma?

asztali változat táblagép változat mobil változat


Miért nem jó ez?


Elemek elrejtéseAttól hogy elrejtünk egy elemet, még letöltődik (display: none).



Felhasználási módok, szituációkUtcán, boltban, tájékozódáskor, stb. nem mindig van időnk kivárni, hogy lejöjjön egy oldal.



Felhasználási módok, szituációkUtcán, boltban, tájékozódáskor, stb. nem mindig van időnk kivárni, hogy lejöjjön egy oldal.

Tartalmi hierarchiaAz asztali verzióra kitalált hierarchia nem feltétlen működik mobilon.


Hogyan tervezzünk mobil eszközökre a jövőben?


Hogyan tervezzünk mobil eszközökre a jövőben?

mobil változat táblagép változat asztali változat


“Mobile forces you to focus.”Luke Wroblewski - lukew.com

http://www.lukew.com/



Mire figyeljünk egy mobil oldal készítésekor?


NavigációNincs bejáratott megoldás rá, sokféle elrendezés van, a tartalom dönt.

Leggyakoribb megoldások:- Az oldal tetején, horizontálisan vagy vertikálisan- Az oldal tetején gomb legördülő menüvel - a rendszer sajátja vagy egyedi- A tartalom működik navigációként (pl.: bevezető szöveg hivatkozásai), a menü jellemzően az oldal alján van


Rögzített fejléc vagy lábléc - position: fixed

Sokáig problémás volt megoldani, az iOS 5 óta a Mobile Safari is támogatja, így bátran használhatjuk.


Rögzített fejléc vagy lábléc - position: fixed

Sokáig problémás volt megoldani, az iOS 5 óta a Mobile Safari is támogatja, így bátran használhatjuk.

Oldalon belüli görgetés - overflow: scroll

Az iOS 5 óta működik az egy-ujjas scroll Mobile Safari alatt.FONTOS! Vizuálisan jelezni kell, hogy az adott elem tartalma görgethető!


Töréspontok


Media-Query-kMár a tervezéskor érdemes rangsorolni őket.



Fő Media-Query-k: A nagy szerkezeti változtatások szerint szétválaszthatóak külön fájlokba.Ez általában a mobile.css, tablet.css és a desktop.css.



Fő Media-Query-k: A nagy szerkezeti változtatások szerint szétválaszthatóak külön fájlokba.Ez általában a mobile.css, tablet.css és a desktop.css.

Mellék Media-Query-k:A fenti három nagy stíluslapon belül helyezkednek el, velük finomíthatjuk az oldal arányait (betűméret, sortáv, arányok, stb.)


Töréspontok táblagépeknél:A tablet-probléma: nem mobil, de nem is asztali gép.Gyakran a mobil stíluslapot kapják meg, de ez nem feltétlen jó megoldás.



A táblagépek jellemzői: + nagy kijelző



A táblagépek jellemzői: + nagy kijelző + egyre erősebb hardver



A táblagépek jellemzői: + nagy kijelző + egyre erősebb hardver + jellemzően otthoni vagy zárt helyen való felhasználás



A táblagépek jellemzői: + nagy kijelző + egyre erősebb hardver + jellemzően otthoni vagy zárt helyen való felhasználás + több idő jut a böngészésre mint a telefonoknál



A táblagépek jellemzői: + nagy kijelző + egyre erősebb hardver + jellemzően otthoni vagy zárt helyen való felhasználás + több idő jut a böngészésre mint a telefonoknál = ha nincs idő vagy energia külön táblagép változat készítésére, gyakorlatilag majdnem minden esetben megkaphatja az asztali gépekre szánt stíluslapot


Hasznos oldalak:yiibu.comfuturefriend.lylukew.com

http://yiibu.com/

http://yiibu.com/



II. rész - Az ügyfél és a responsive webdesign

Az ügyfél responsive webdesign

Esettanulmány - Vertikális átrendeződés

II. rész - Az ügyfél és a responsive webdesign

Köszönöm a figyelmet!Csík Gyula - @gyulacsik - [email protected] - gyulacsik.hu - drone.hu

mailto:[email protected]

mailto:[email protected]

csík gyula - a grafikus, az ügyfél és a responsive webdesign

Documents