bobor szabolcs: a webes űrlapok csodálatos világa
TRANSCRIPT
ügyfél pm ux gfx sb dev
A folyamat általában
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
Uniformuniformjs.com
<3
Uniform
• elég sok minden megoldható vele
• de NEM csodaszer
• a grafikusoknak mutassuk meg, mit lehet és mit nem
uniformjs.com
Példa
File input = macerásIgény:
File input = macerásIgény:
Valóság:
File input = macerásIgé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!
• ha lehet, akkor új sorba kerüljenek
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
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
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]-->
Sok mindenre lehetne még figyelni
• autofillkikapcsolható: input:-webkit-autofill
• webfontok (Fontsquirrel, Fontspring)
• inline módosításokat jelezzük valahogy (effekt, sárga bg, akármi)
Sok mindenre lehetne még figyelni• felejtsük el a lorem ipsumot
• használjunk placeholder képeket valódi méretben
• Macen alapból vastagabbak a fontok, ez okozhat problémát, lsd. példa
http://placekitten.com/
Ja és a Facebook
• minden iFrame-ben fut
• szélesség fix, magasság rugalmas
• mindig foglalkozzunk a resize-zalpl. inline hibaüzenet megjelenése után
Ja és a Facebook
• minden iFrame-ben fut
• szélesség fix, magasság rugalmas
• mindig foglalkozzunk a resize-zalpl. inline hibaüzenet megjelenése után
offtopic tipp: sandbox mód bekapcsolása!
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
egyeztetünk• elkerülhetjük a felesleges fejfájást, ha
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 dolgokat, ne utólag derüljenek ki a problémák
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!)
