a grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · i. rész - a grafikus és...
TRANSCRIPT
![Page 1: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/1.jpg)
A grafikus, az ügyfél és a responsive webdesignCsík Gyula - Drone Creative
![Page 2: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/2.jpg)
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)
![Page 3: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/3.jpg)
I. rész - A grafikus és a responsive webdesign
grafikus
Egy kapcsolat apróbb bukkanókkal...
responsive webdesign
![Page 4: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/4.jpg)
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
![Page 5: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/5.jpg)
I. rész - A grafikus és a responsive webdesign
DE
![Page 6: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/6.jpg)
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)
![Page 7: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/7.jpg)
I. rész - A grafikus és a responsive webdesign
Hogyan tervezünk mobil eszközökre ma?
![Page 8: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/8.jpg)
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
![Page 9: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/9.jpg)
I. rész - A grafikus és a responsive webdesign
Miért nem jó ez?
![Page 10: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/10.jpg)
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).
![Page 11: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/11.jpg)
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.
![Page 12: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/12.jpg)
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.
![Page 13: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/13.jpg)
I. rész - A grafikus és a responsive webdesign
Hogyan tervezzünk mobil eszközökre a jövőben?
![Page 14: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/14.jpg)
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
![Page 15: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/15.jpg)
I. rész - A grafikus és a responsive webdesign
“Mobile forces you to focus.”Luke Wroblewski - lukew.com
![Page 16: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/16.jpg)
I. rész - A grafikus és a responsive webdesign
Mire figyeljünk egy mobil oldal készítésekor?
![Page 17: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/17.jpg)
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
![Page 18: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/18.jpg)
I. rész - A grafikus és a responsive webdesign
![Page 19: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/19.jpg)
I. rész - A grafikus és a responsive webdesign
![Page 20: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/20.jpg)
I. rész - A grafikus és a responsive webdesign
![Page 21: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/21.jpg)
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.
![Page 22: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/22.jpg)
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ő!
![Page 23: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/23.jpg)
I. rész - A grafikus és a responsive webdesign
Töréspontok
![Page 24: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/24.jpg)
I. rész - A grafikus és a responsive webdesign
Media-Query-kMár a tervezéskor érdemes rangsorolni őket.
![Page 25: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/25.jpg)
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.
![Page 26: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/26.jpg)
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.)
![Page 27: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/27.jpg)
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.
![Page 28: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/28.jpg)
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ő
![Page 29: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/29.jpg)
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
![Page 30: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/30.jpg)
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
![Page 31: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/31.jpg)
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
![Page 32: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/32.jpg)
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
![Page 33: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/33.jpg)
I. rész - A grafikus és a responsive webdesign
Hasznos oldalak:yiibu.comfuturefriend.lylukew.com
![Page 34: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/34.jpg)
II. rész - Az ügyfél és a responsive webdesign
Az ügyfél responsive webdesign
Esettanulmány - Vertikális átrendeződés
![Page 35: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/35.jpg)
II. rész - Az ügyfél és a responsive webdesign
![Page 36: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/36.jpg)
II. rész - Az ügyfél és a responsive webdesign
![Page 37: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/37.jpg)
II. rész - Az ügyfél és a responsive webdesign
![Page 38: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/38.jpg)
II. rész - Az ügyfél és a responsive webdesign
![Page 39: A grafikus, az ügyfél és a responsive webdesign · 2011. 12. 1. · I. rész - A grafikus és a responsive webdesign Rögzített fejléc vagy lábléc - position: fixed Sokáig](https://reader035.vdocuments.pub/reader035/viewer/2022081615/5fe56985f1ad1a19c14399f1/html5/thumbnails/39.jpg)
Köszönöm a figyelmet!Csík Gyula - @gyulacsik - [email protected] - gyulacsik.hu - drone.hu