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

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

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

640x480 800x600

1024x768

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

DE

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

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)

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

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

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

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

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

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

Miért nem jó ez?

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

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

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

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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ő!

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

Töréspontok

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

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

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

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.

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

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.

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.)

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

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.

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

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ő

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

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ő + egyre erősebb hardver

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

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ő + egyre erősebb hardver + jellemzően otthoni vagy zárt helyen való felhasználás

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

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ő + 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

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

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ő + 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

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

Hasznos oldalak:yiibu.comfuturefriend.lylukew.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

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

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

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

Köszönöm a figyelmet!Csík Gyula - @gyulacsik - info@gyulacsik.hu - gyulacsik.hu - drone.hu