1. DESIGNING OUR WAY
THROUGH WEB FORMS
Christopher Schmitt
http://twitter.com/@teleject
Kimberly Blessing
http://twitter.com/@obiwankimberly

8. ( )=
/ ( )

11. FORM ELEMENTS
• Checkboxes • Select:
• Input: • Multiple Items
• File • Single Item
• Radio • Submit Button
• Text • Textarea

12. CSS PROPERTIES
• background-color • height
• background-image • letter-spacing
• border • line-height
• border-color • margin
• border-style • padding
• border-width • text-align
• color • text-decoration
• font-family • text-indent
• font-size • width
• font-weight • word-spacing

13. 7.2 5 8.5 1.5 3 1
5.5 9 2.0 4b
6 3.0
7
8b2
7.2 9 1.5 2
2.0 3
3.0 4b

14. 3,520
screengrabs

19. RADIO BUTTONS

20. CSS HEIGHT
FF 2
FF 2
FF 3
Chrome 1

21. CSS WIDTH
FF 3
FF 3
Safari 3
Safari 3
Safari 4b
Safari 4b

22. CSS TEXT INDENT
Chrome 1
Safari 4b
Safari 4b
Opera 9
Opera 9

23. CSS BACKGROUND COLOR
IE 6
IE 7
IE 8b2
Opera 9
Opera 9

24. CSS BACKGROUND IMG
Firefox 2
Firefox 2
IE 6
IE 7
IE 8b2
Opera 9
Opera 9

26. CSS & TEXTAREA
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

27. CSS & INPUT TEXT FIELDS
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

28. CSS & SUBMIT BUTTON
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

29. CSS & SELECT BOXES (ONE)
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

30. CSS & SELECT BOXES (MULTI)
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

31. CSS & FILE UPLOADS
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

32. CSS & CHECKBOXES
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

33. CSS & RADIO BUTTONS
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

34. ☹Radio
Buttons
Check
Boxes
File
Uploads
Select
(Multi)
Select
(One)
☺
Input
Text
Text
Area

36. CSS PROPERTIES
100
75
50
25
0
height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing
Y N S N/A

37. CSS PROPERTIES
100
75
50
25
0
bkgd-color bkgd-image border border-color border-style border-width color font-family font-size font-weight
Y N S N/A

38. ☹ ☺
Text Indent Font Family Height Font Size Margin
Text Border Color Color Border Style Background
Decoration Color
Font Weight Background Letter Spacing
Image Width
Word Spacing Padding
Border

39. ☹ ☺
Radio Check File Select Select Input Text
Buttons Boxes Uploads (Multi) (One) Text Area
Text Indent Font Family Height Font Size Margin
Text Border Color Color Border Style Background
Decoration Color
Font Weight Background Letter Spacing
Image Width
Word Spacing Padding
Border

47. LET BROWSER VENDORS
KNOW WHAT YOU WANT
• Internet Explorer
• http://blogs.msdn.com/ie/contact.aspx
• Opera
• http://my.opera.com/community/forums/forum.dml?id=24
• http://groups.google.com/group/opera.wishlist/topics
• Safari
• http://lists.webkit.org/mailman/listinfo/webkit-dev
• Google Chrome
• http://groups.google.com/group/chromium-dev

48. LET BROWSER VENDORS
KNOW WHAT YOU WANT
• http://www.WebFormElements.com/
• 3,500 form element screen captures
• HTML form element look-up tables (free):
• http://oreilly.com/catalog/9780596527419/appendixd/appd.pdf

50. Take it away,
Kimberly!

51. TIPS ON
MOBILE FORMS

52. THOUGHTS ON
MOBILE FORMS
• Not everyone has an
iPhone, iPad (or even
Android!) making for a
sad panda

53. THOUGHTS ON
MOBILE FORMS
Does your form
work without
cowbell?

54. THOUGHTS ON
MOBILE FORMS
Do your users
need to hunt for
form elements?

55. THOUGHTS ON
MOBILE FORMS
Chop up your
form. Deliver the
important stuff.

56. http://www.lukew.com/ff/entry.asp?1014

59. TAKE AWAYS
• Designing for forms is hard for HTML+CSS
• Even the same browser, different platform render Web forms
differently
• To
help you discern the safety of CSS on a Web form, use
WebFormElements.com
• Reviewed which browsers are most hazardous

60. TAKE AWAYS
• Reviewed which CSS properties are supported the most.
• Reviewed what high-profile sites are doing to design for forms:
Nothing.
• Call to action!
• Letbrowser vendors hear you or they won’t care to fix the
problem.
• With HTML5 form elements, problem is going to get worse.

61. MORE INFO
• CSS3‘ingwith HTML5 forms:
http://24ways.org/2009/have-a-field-day-with-html5-forms
• Handcrafted CSS by Dan Cederholm
• Luke W’s book Web Form Design
• PPK’s blog: http://www.quirksmode.org/mobile/
• MsJen’s mobile link round up: http://www.blackphoebe.com/
msjen/2010/05/mobile-ux-resources.html

62. THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
@teleject on twitter

63. CREATIVE COMMONS CITATIONS
http://www.flickr.com/photos/lanuiop/2234239588/
http://www.flickr.com/photos/gaetanlee/1947424580/
http://www.flickr.com/photos/evapro/312900784/
http://www.flickr.com/photos/kekka/799060449/
http://www.flickr.com/photos/hiddedevries/2594048276/
http://www.flickr.com/photos/tomsaint/2992217972/