9. HTML Doctypes
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
12. HTML helps you think about the
Organization / Structure
DESIGN
13. html page structure
A typical HTML page will
div id=header
use divs with IDs and
Classes to create the div id=nav
structure.
div id=content div id=
sidebar
div id=footer
14. HTML5 page structure
HTML5 gives semantic
meaning to these structures, header
which previously required
IDs and Classes.
section/article
aside
footer
17. html5 Recursiveness
HTML5 allows for multiple
header
sections and articles within
a single page. Each section/ nav
article can have its own
header, footer, aside and section aside
nav.
header
article
footer
footer
18. html5 Recursiveness
HTML5 allows for multiple
header
sections and articles within
a single page. Each section/ nav
article can have its own
header, footer, aside and section aside
nav.
header
article
footer
footer
19. html5 Recursiveness
HTML5 allows for multiple
header
sections and articles within
a single page. Each section/ nav
article can have its own
header, footer, aside and section aside
nav.
header
article
footer
footer
20. What about the problem child?
IE needs a little help from
our friend JavaScript.
Modernizer/HTML5shiv to
the rescue.
http://modernizr.com
http://
html5shiv.googlecode.co
m/svn/trunk/html5.js
44. http://bit.ly/protobk
Russ Unger
Todd Zaki Warfel
Guerrilla
UX
Research
Methods
Thrifty, Fast, and Effective User Experience Research Techniques
on The Twitters
@zakiwarfel