Progressive
Prototyping
with
TODD ZAKI WARFEL / MATT VENTRE / EdUIConf /#HTML5
Slide 2
Slide 2 text
GRAB THE FILES
http://bit.ly/strappr
Slide 3
Slide 3 text
Interaction design without
prototyping is like cooking without
tasting.
Craig Villamore, cvil.ly
“
Slide 4
Slide 4 text
We like to taste the
food we’re making.
Slide 5
Slide 5 text
You can x it on the drafting board
with an eraser, or on the
construction site with a
sledgehammer.
Frank Lloyd Wright, Architect
“
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
GUIDING PRINCIPLES
Know your audience
and intent.
Slide 8
Slide 8 text
What’s the right level
of fidelity?
Slide 9
Slide 9 text
Hi Visual / Hi Functional
Low Visual / Hi Functional
Lo Visual / Low Functional
Hi Visual / Low Functional
Levels of Fidelity
Slide 10
Slide 10 text
GUIDING PRINCIPLES
Set expectations.
Slide 11
Slide 11 text
GUIDING PRINCIPLES
The best tool is the one
you know.
Slide 12
Slide 12 text
GUIDING PRINCIPLES
Prototype only what
you need.
Slide 13
Slide 13 text
HTML AS A PROTOTYPING TOOL
PROS & CONS
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
YES, THAT QUESTION.
PRODUCTION VS. NON-
PRODUCTION
Slide 16
Slide 16 text
HTML VS. HTML5
Slide 17
Slide 17 text
HTML Doctypes
Slide 18
Slide 18 text
HTML5 Doctype
Slide 19
Slide 19 text
HTML Tags
,
,
,
,
<fieldset>
Slide 20
Slide 20 text
Typical HTML Page Structure
A typical HTML page will use divs
with IDs and Classes to create the
structure.
div id=header
div id=footer
div id=
sidebar
div id=content
div id=nav
Slide 21
Slide 21 text
HTML5 Tags
,
,
,
,
<fieldset>
,
Slide 22
Slide 22 text
Updated HTML5 Page Structure
HTML5 gives semantic meaning to
these structures, which previously
required IDs and Classes.
header
footer
aside
section/article
What about the problem child?
IE needs a little help from our friend
JavaScript.
Modernizer/HTML5shiv to the rescue.
• modernizr.com
• html5shiv.googlecode.com/
svn/trunk/html5.js
Slide 25
Slide 25 text
Pro tip: Smack IE Into Shape
Slide 26
Slide 26 text
FORMS ANYONE?
Slide 27
Slide 27 text
HTML5 Input Types
date
date-time
email
tel
range
search
time
url
Slide 28
Slide 28 text
Pro tip: HTML5 Search Input
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
HTML5 Registration Form
Slide 31
Slide 31 text
http://bit.ly/h5mobile
Slide 32
Slide 32 text
IT’S THE NEW PHOTOSHOP, YO!
Gettin’ Sexy with CSS3
Slide 33
Slide 33 text
Fancy Buttons
.fancy-button { }
Fancy Button
Slide 34
Slide 34 text
Those Vendor Prefixes
-moz for Firefox
-ms for Microsoft
-0 for Opera
-webkit for Webkit (Safari and Chrome)