1. A grafikus, az ügyfél
és a responsive webdesign
Csík Gyula - Drone Creative

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

3. I. rész - A grafikus és a responsive webdesign
grafikus responsive webdesign
Egy kapcsolat apróbb bukkanókkal...

4. I. rész - A grafikus és a responsive webdesign
640x480 800x600
Fejlődtek a kijelzők... 1024x768
Több lett a hely és a tartalom is.

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

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

7. I. rész - A grafikus és a responsive webdesign
Hogyan tervezünk
mobil eszközökre ma?

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

9. I. rész - A grafikus és a responsive webdesign
Miért nem jó ez?

10. I. rész - A grafikus és a responsive webdesign
Elemek elrejtése
Attól hogy elrejtünk egy elemet, még letöltődik (display: none).

11. I. rész - A grafikus és a responsive webdesign
Elemek elrejtése
Attól hogy elrejtünk egy elemet, még letöltődik (display: none).
Felhasználási módok, szituációk
Utcán, boltban, tájékozódáskor, stb. nem mindig van időnk kivárni,
hogy lejöjjön egy oldal.

12. I. rész - A grafikus és a responsive webdesign
Elemek elrejtése
Attól hogy elrejtünk egy elemet, még letöltődik (display: none).
Felhasználási módok, szituációk
Utcán, boltban, tájékozódáskor, stb. nem mindig van időnk kivárni,
hogy lejöjjön egy oldal.
Tartalmi hierarchia
Az asztali verzióra kitalált hierarchia nem feltétlen működik mobilon.

13. I. rész - A grafikus és a responsive webdesign
Hogyan tervezzünk
mobil eszközökre a jövőben?

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

15. I. rész - A grafikus és a responsive webdesign
“Mobile forces you to focus.”
Luke Wroblewski - lukew.com

16. I. rész - A grafikus és a responsive webdesign
Mire figyeljünk
egy mobil oldal készítésekor?

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

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

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

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

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

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

23. I. rész - A grafikus és a responsive webdesign
Töréspontok

24. I. rész - A grafikus és a responsive webdesign
Media-Query-k
Már a tervezéskor érdemes rangsorolni őket.

25. I. rész - A grafikus és a responsive webdesign
Media-Query-k
Má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.

26. I. rész - A grafikus és a responsive webdesign
Media-Query-k
Má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.)

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

28. 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ő

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

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

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

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

33. I. rész - A grafikus és a responsive webdesign
Hasznos oldalak:
yiibu.com
futurefriend.ly
lukew.com

34. II. rész - Az ügyfél és a responsive webdesign
Az ügyfél responsive webdesign
Esettanulmány - Vertikális átrendeződés

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

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

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

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

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