A webes űrlapokcsodálatos világa      Bobor Szabolcs    sz.bobor@mito.hu
A folyamat általábanügyfél   pm   ux   gfx   sb   dev
Problémák• kevés az idő, tegnapra kell elkészülni• állandóan változnak az igények• elveszik az információ• ahány böngésző,...
Uniform         <3uniformjs.com
Uniform              uniformjs.com• elég sok minden megoldható vele• de NEM csodaszer• a grafikusoknak mutassuk meg, mit l...
Példa
File input = macerás Igény:
File input = macerás Igény:Valóság:
File input = macerás Igény:Valóság:
Must have #1 assets.psd »» sprite-ok!legózni könnyebb, mint homokvárat építeni
Must have #2• gombok :hover és :active állapota • szükség esetén disabled is• inputmezők :focus állapota• hibaüzenetek! • ...
CSS3• ügyféltől kérdezzük meg, hogy  használhatjuk-e? • magyarázzuk el az előnyeit és a hátrányait • mi a min. browser köv...
Submit után• a user nem szeret várni, legalább  könnyítsük meg az életét• írjuk ki, hogy mit csinálunk• tiltsuk le a submi...
IE• IE9-ben van egész használható developer  tool, visszaválthatsz IE7-re és IE8-ra is• TEDD MEG!• force IE7/IE8 rendering...
Sok mindenrelehetne még figyelni• autofill  kikapcsolható: input:-webkit-autofill• webfontok (Fontsquirrel, Fontspring)• i...
Sok mindenrelehetne még figyelni• felejtsük el a lorem ipsumot• használjunkhttp://placekitten.com/ valódi                p...
Ja és a Facebook• minden iFrame-ben fut• szélesség fix, magasság rugalmas• mindig foglalkozzunk a resize-zal  pl. inline h...
Ja és a Facebook• minden iFrame-ben fut• szélesség fix, magasság rugalmas• mindig foglalkozzunk a resize-zal  pl. inline h...
Mindjárt vége• igazából minden megoldható, de megéri?• gondoljunk a jövőre, bármikor beeshet egy  módosítás
Mindjárt vége• igazából minden megoldható, de megéri?• gondoljunk a jövőre, bármikor beeshet egy  módosítás• elkerülhetjük...
Tanulság
Tanulság• ne legyél robot, gondold végig a folyamatot!
Tanulság• ne legyél robot, gondold végig a folyamatot!• ülj le a kollégákkal sűrűn, beszélgessetek,  rágjátok át a dolgoka...
Tanulság• ne legyél robot, gondold végig a folyamatot!• ülj le a kollégákkal sűrűn, beszélgessetek,  rágjátok át a dolgoka...
Köszönöm a figyelmet!Kérdés jöhet emailben is:  sz.bobor@mito.hu
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Upcoming SlideShare
Loading in …5
×

Bobor Szabolcs: A webes űrlapok csodálatos világa

1,013 views
912 views

Published on

Bobor Szabolcs előadásfóliái

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,013
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bobor Szabolcs: A webes űrlapok csodálatos világa

  1. 1. A webes űrlapokcsodálatos világa Bobor Szabolcs sz.bobor@mito.hu
  2. 2. A folyamat általábanügyfél pm ux gfx sb dev
  3. 3. Problémák• kevés az idő, tegnapra kell elkészülni• állandóan változnak az igények• elveszik az információ• ahány böngésző, annyi megjelenés• Internet Explorer
  4. 4. Uniform <3uniformjs.com
  5. 5. Uniform uniformjs.com• elég sok minden megoldható vele• de NEM csodaszer• a grafikusoknak mutassuk meg, mit lehet és mit nem
  6. 6. Példa
  7. 7. File input = macerás Igény:
  8. 8. File input = macerás Igény:Valóság:
  9. 9. File input = macerás Igény:Valóság:
  10. 10. Must have #1 assets.psd »» sprite-ok!legózni könnyebb, mint homokvárat építeni
  11. 11. Must have #2• gombok :hover és :active állapota • szükség esetén disabled is• inputmezők :focus állapota• hibaüzenetek! • ha lehet, akkor új sorba kerüljenek
  12. 12. CSS3• ügyféltől kérdezzük meg, hogy használhatjuk-e? • magyarázzuk el az előnyeit és a hátrányait • mi a min. browser követelmény?• nagyobb kód, de kevesebb kép• progressive enhancement • először legyen csúnya, de működjön, aztán jöhet a csicsa
  13. 13. Submit után• a user nem szeret várni, legalább könnyítsük meg az életét• írjuk ki, hogy mit csinálunk• tiltsuk le a submit gombot• legyen loading spinner• cancel?• hibakezelést oldjuk meg
  14. 14. IE• IE9-ben van egész használható developer tool, visszaválthatsz IE7-re és IE8-ra is• TEDD MEG!• force IE7/IE8 rendering - néha életmentő <meta http-equiv="X-UA-Compatible" content="IE=7"> <meta http-equiv="X-UA-Compatible" content="IE=8">• conditional stylesheets <!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" media="screen, projection" /><![endif]-->
  15. 15. Sok mindenrelehetne még figyelni• autofill kikapcsolható: input:-webkit-autofill• webfontok (Fontsquirrel, Fontspring)• inline módosításokat jelezzük valahogy (effekt, sárga bg, akármi)
  16. 16. Sok mindenrelehetne még figyelni• felejtsük el a lorem ipsumot• használjunkhttp://placekitten.com/ valódi placeholder képeket méretben• Macen alapból vastagabbak a fontok, ez okozhat problémát, lsd. példa
  17. 17. Ja és a Facebook• minden iFrame-ben fut• szélesség fix, magasság rugalmas• mindig foglalkozzunk a resize-zal pl. inline hibaüzenet megjelenése után
  18. 18. Ja és a Facebook• minden iFrame-ben fut• szélesség fix, magasság rugalmas• mindig foglalkozzunk a resize-zal pl. inline hibaüzenet megjelenése utánofftopic tipp: sandbox mód bekapcsolása!
  19. 19. Mindjárt vége• igazából minden megoldható, de megéri?• gondoljunk a jövőre, bármikor beeshet egy módosítás
  20. 20. Mindjárt vége• igazából minden megoldható, de megéri?• gondoljunk a jövőre, bármikor beeshet egy módosítás• elkerülhetjük a felesleges fejfájást, ha egyeztetünk
  21. 21. Tanulság
  22. 22. Tanulság• ne legyél robot, gondold végig a folyamatot!
  23. 23. Tanulság• ne legyél robot, gondold végig a folyamatot!• ülj le a kollégákkal sűrűn, beszélgessetek, rágjátok át a dolgokat, ne utólag derüljenek ki a problémák
  24. 24. Tanulság• ne legyél robot, gondold végig a folyamatot!• ülj le a kollégákkal sűrűn, beszélgessetek, rágjátok át a dolgokat, ne utólag derüljenek ki a problémák• nem kell megelégedni a középszerűséggel, mutasd meg az ügyfeleidnek, hogy milyen lehetőségek vannak (hátulütőkkel együtt!)
  25. 25. Köszönöm a figyelmet!Kérdés jöhet emailben is: sz.bobor@mito.hu

×