Prototyping with HTML5: Short guide

PROTOTYPING
with
TODD ZAKI WARFEL / UXLONDON /#HTML5

Grab the files
Set Expectations
Guiding Principles
The Best Tool is the one you know
Guiding Principles
Prototype Only What you Need
Guiding Principles
Pros and Cons
HTMl as a prototyping tool
Production vs. Non-production
About that code thing
html vs. html5
HTML Doctypes
!"#$%&'()*+, *(/012%*345567%55#&#*89&:1*;<;55)=3
*3+,,>?55@@@<@7<ABC5&D5E+, ;;5#&#5E+, ;;<F,F3G
!"#$%&'()*+, *(/012%*345567%55#&#*89&:1*;<H*I,BJK,55)=3
*3+,,>?55@@@<@7<ABC5&D5E+, ;5#&#5E+, ;4L,BJK,<F,F3G
!"#$%&'()*+, *(/012%*345567%55#&#*9&:1*M<H;*&BNOLJ,JAON.55)=3
***3+,,>?55@@@<@7<ABC5&D5+, M5.AALP<F,F3G
!"#$%&'()*+, *(/012%*345567%55#&#*89&:1*;<H*QBN-PLP,55)=3
*3+,,>?55@@@<@7<ABC5&D5E+, ;5#&#5E+, ;4RBN-PLP,<F,F3G
!"#$%&'()*+, *(/012%*345567%55#&#*9&:1*M<H;*I,BJK,55)=3
***3+,,>?55@@@<@7<ABC5&D5+, M5L,BJK,<F,F3G
!"#$%&'()*+, *(/012%*345567%55#&#*9&:1*M<H;*&BNOLJ,JAON.55)=3
***3+,,>?55@@@<@7<ABC5&D5+, M5.AALP<F,F3G
HTML5 Doctypes
!"#$%&'()*9&:1G

HTML Tags
!FJSG
!>G
!F.GT*!F,GT*!FFG
!A.GT*!U.GT*!.JG
!RJP.FLP,G
!JO>U,G
!NB,JK.PG
!NLJFPG
!LPK,JAOG
!+PNFPBGT*!+CBAU>G
!ONSG
!RAA,PBG
!FN,N.JL,G
!>BACBPLLG
!,J-PG
HTML5 Tags
Organization / Structure
HTML helps you think about the
DESIGN
html page structure
A typical HTML page will
use divs with IDs and
Classes to create the
structure.
FJS*JFV+PNFPB
FJS*JFVRAA,PB
FJS*JFV*
LJFPWNB
FJS*JFVKAO,PO,

FJS*JFVONS
HTML5 page structure
HTML5 gives semantic
meaning to these structures,
which previously required
IDs and Classes.
+PNFPB
RAA,PB
NLJFP
LPK,JAO5NB,JK.P
Pro tip: Update your reset.css
NB,JK.PT*NLJFPT*RAA,PBT*+PNFPBT*
+CBAU>T*ONST*LPK,JAO*
XFJL>.NY?W.AKZ[*-NBCJO?H[*>NFFJOC?
H[*WABFPB?H[*RAO,4@PJC+,?JO+PBJ,[*
RAO,4L,Y.P?JO+PBJ,[*RAO,4LJ\P?
;HH][*RAO,4RN-J.Y?JO+PBJ,[*
SPB,JKN.4N.JCO?WNLP.JOP[*.JL,4
L,Y.P?OAOP[*AU,.JOP?OAOP^
Pro tip: Update your reset.css
NB,JK.PT*NLJFPT*RAA,PBT*+PNFPBT*
+CBAU>T*ONST*LPK,JAO*
XFJL>.NY?W.AKZ[*-NBCJO?H[*>NFFJOC?
H[*WABFPB?H[*RAO,4@PJC+,?JO+PBJ,[*
RAO,4L,Y.P?JO+PBJ,[*RAO,4LJ\P?
;HH][*RAO,4RN-J.Y?JO+PBJ,[*
SPB,JKN.4N.JCO?WNLP.JOP[*.JL,4
L,Y.P?OAOP[*AU,.JOP?OAOP^
html5 Recursiveness
HTML5 allows for multiple

sections and articles within
a single page. Each section/
article can have its own
header, footer, aside and
nav.
RAA,PB
NLJFPLPK,JAO
+PNFPB
ONS
+PNFPB
RAA,PB
NB,JK.P
html5 Recursiveness
HTML5 allows for multiple
sections and articles within
a single page. Each section/
article can have its own
header, footer, aside and
nav.
RAA,PB
NLJFPLPK,JAO
+PNFPB
ONS
+PNFPB
RAA,PB
NB,JK.P
html5 Recursiveness
HTML5 allows for multiple
sections and articles within
a single page. Each section/

article can have its own
header, footer, aside and
nav.
RAA,PB
NLJFPLPK,JAO
+PNFPB
ONS
+PNFPB
NB,JK.P
RAA,PB
What about the problem child?
IE needs a little help from
our friend JavaScript.
Modernizer/HTML5shiv to
the rescue.

+,,>?55
+, _L+JS<CAAC.PKAFP<KA
-5LSO5,BUOZ5+, _<`L
Pro tip: Smack IE Into Shape
!"#$%&'()*+, G
!+, G
!+PNFG
!"44aJR*.,*2)*bcG
!LKBJ>,*LBKV3+,,>?55+, _L+JS<CAAC.PKAFP<KA-5LSO5
,BUOZ5+, _<`L3*,Y>PV3,PE,5`NSNLKBJ>,3G!5LKBJ>,G
!"aPOFJRc44G
!5+PNFG

HTML5 Input Types
FN,P
FN,P4,J-P
P-NJ.
,P.
BNOCP
LPNBK+
,J-P
UB.
Pro tip: HTML5 Search Input
!RAB-G
**!JO>U,*,Y>PV3LPNBK+3*ON-PV3d3*
>.NKP+A.FPBV3IPNBK+3*NU,ARAKULG
**!JO>U,*,Y>PV3LUW-J,3*SN.UPV3IPNBK+3G
!5RAB-G