• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Form Design (Web Visions 2009)
 

Web Form Design (Web Visions 2009)

on

  • 6,351 views

A look at 8 Web form elements, 20 CSS properties and 22 browsers-- which form elements and CSS properties allow for the greatest design control.

A look at 8 Web form elements, 20 CSS properties and 22 browsers-- which form elements and CSS properties allow for the greatest design control.

Statistics

Views

Total Views
6,351
Views on SlideShare
6,184
Embed Views
167

Actions

Likes
1
Downloads
46
Comments
0

7 Embeds 167

http://christopherschmitt.com 102
http://www.christopherschmitt.com 38
http://www.webvisionsevent.com 21
http://webvisionsevent.com 3
http://www.hanrss.com 1
http://translate.googleusercontent.com 1
http://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Form Design (Web Visions 2009) Web Form Design (Web Visions 2009) Presentation Transcript

    • WEB FORM ELEMENTS Christopher Schmitt | @teleject on twitter
    • ( )= / ( )
    • FORM ELEMENTS • Checkboxes • Select: • Input: • Multiple Items • File • Single Item • Radio • Submit Button • Text • Textarea
    • 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
    • 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
    • 3,520 screengrabs
    • RADIO BUTTONS
    • CSS HEIGHT FF 2 FF 2 FF 3 Chrome 1
    • CSS WIDTH FF 3 FF 3 Safari 3 Safari 3 Safari 4b Safari 4b
    • CSS TEXT INDENT Chrome 1 Safari 4b Safari 4b Opera 9 Opera 9
    • CSS BACKGROUND COLOR IE 6 IE 7 IE 8b2 Opera 9 Opera 9
    • CSS BACKGROUND IMG Firefox 2 Firefox 2 IE 6 IE 7 IE 8b2 Opera 9 Opera 9
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Radio Check File Select Select Input Text Buttons Boxes Uploads (Multi) (One) Text Area
    • 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
    • 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
    • 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
    • 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
    • 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
    • LET BROWSER VENDORS KNOW WHAT YOU WANT • Web Form Elements Design Quiz • Part 1: http://tr.im/lp2k • Part 2: http://tr.im/lp2g • 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
    • 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
    • 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.
    • THANK YOU! Christopher Schmitt schmitt@heatvision.com @teleject on twitter
    • 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/