prototyping w/html5 and css3
DESCRIPTION
Tips and tricks for prototyping with HTML5, CSS3 and jQuery from the Big D Design Conference 2011.TRANSCRIPT
![Page 1: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/1.jpg)
PROGRESSIVE PROTOTYPING
TODD ZAKI WARFEL / BIG D / #html5
![Page 2: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/2.jpg)
“Interaction design without prototyping is like cooking without tasting.” - Craig Villamore cvil.ly
http://bit.ly/pb5Xec
![Page 3: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/3.jpg)
I DON’T WIREFRAME
![Page 4: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/4.jpg)
I want to taste the food I’m making.
![Page 5: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/5.jpg)
DESIGN PROCESSPROTOTYPING IS A
![Page 6: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/6.jpg)
WORK THROUGH AND VALIDATE YOUR DESIGN
PROTOTYPING OFFERs A BETTER WAY TO
![Page 7: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/7.jpg)
“You can fix it on the drafting board with an eraser, or on the construction site with a sledgehammer.” - Frank Lloyd Wright
![Page 8: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/8.jpg)
FAIL IN A LOW COST ENVIRONMENTPROTOTYPES ALLOW YOU TO
![Page 9: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/9.jpg)
IF YOU AREN’T FAILING, YOU’RE NOT TRYING HARD ENOUGH.
![Page 10: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/10.jpg)
Hi Visual/Hi FunctionalLo Visual/Hi Functional
Lo Visual/Lo FunctionalHi Visual/Lo Functional
FIDELITY
![Page 11: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/11.jpg)
It might end up like this, but...
![Page 12: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/12.jpg)
It always starts with a sketch
![Page 13: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/13.jpg)
![Page 14: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/14.jpg)
Designing with data first
![Page 15: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/15.jpg)
Next, a few rounds in grayscale
![Page 16: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/16.jpg)
Finish it off with some sex appeal
![Page 17: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/17.jpg)
![Page 18: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/18.jpg)
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">
![Page 19: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/19.jpg)
HTML5 Doctype<!DOCTYPE HTML>
![Page 20: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/20.jpg)
HTML5 TAGS<address>
<audio>
<article>
<aside>
<canvas>
<datalist>
<div>
<p>
<dl>, <dt>, <dd>
<ol>, <ul>, <li>
<fieldset>
<footer>
<header>
<hgroup>
<input><meter>
<nav>
<progress>
<section>
<table>, <th>, <tr>, <td>
<time>
<video>
![Page 21: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/21.jpg)
HTML5 TAGS<address>
<audio>
<article>
<aside>
<canvas>
<datalist>
<div>
<p>
<dl>, <dt>, <dd>
<ol>, <ul>, <li>
<fieldset>
<footer>
<header>
<hgroup>
<input><meter>
<nav>
<progress>
<section>
<table>, <th>, <tr>, <td>
<time>
<video>
![Page 22: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/22.jpg)
![Page 23: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/23.jpg)
![Page 24: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/24.jpg)
html page structureA 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
![Page 25: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/25.jpg)
HTML5 page structureHTML5 gives semantic meaning to these structures, which previously required IDs and Classes.
footer
asidesection/article
header
nav
![Page 26: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/26.jpg)
PRO TIP: UPDATE YOUR RESET.CSSarticle, aside, footer, header, hgroup, nav, meter, progress, section {display:block; margin:0; padding:0; border:0; font-‐weight:inherit; font-‐style:inherit; font-‐size:100%; font-‐family:inherit; vertical-‐align:baseline; list-‐style:none; outline:none}
![Page 27: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/27.jpg)
What about thIS LITTLE BASTARD?IE needs a little help from our friend JavaScript.Modernizer/HTML5shiv to the rescue.http://modernizr.com
http://html5shiv.googlecode.com/svn/trunk/html5.js
![Page 28: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/28.jpg)
Pro tip: Smack IE Into Shape<!DOCTYPE html><html><head><!-‐-‐[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]-‐-‐></head>
![Page 29: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/29.jpg)
NEW HTML5 Input Typescolordatedatetimedatetime-‐localemailnumbermonthrangesearchtel
timeweekurl
![Page 30: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/30.jpg)
NEW HTML5 Input Typescolordatedatetimedatetime-‐localemailnumbermonthrangesearchtel
timeweekurl
![Page 31: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/31.jpg)
Email URL
Instant mobile advantage
![Page 32: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/32.jpg)
Gettin’ Sexy with CSS3It’s the New Photoshop, YO!
![Page 33: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/33.jpg)
CSS3 SELECTORS*E.class#idE FE > FE + FE[attribute]E[attribute=value]E[attribute~=value]E[attribute|=value]:first-‐child:lang():before::before:after::after
:first-‐letter::first-‐letter:first-‐line::first-‐lineE[attribute^=value]E[attribute$=value]E[attribute*=value]E ~ F:root:last-‐child:only-‐child:nth-‐child():nth-‐last-‐child():first-‐of-‐type:last-‐of-‐type:only-‐of-‐type:nth-‐of-‐type()
:nth-‐last-‐of-‐type():empty:not():target:enabled:disabled:checked
![Page 34: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/34.jpg)
CSS3 SELECTORS*E.class#idE FE > FE + FE[attribute]E[attribute=value]E[attribute~=value]E[attribute|=value]:first-‐child:lang():before::before:after::after
:first-‐letter::first-‐letter:first-‐line::first-‐lineE[attribute^=value]E[attribute$=value]E[attribute*=value]E ~ F:root:last-‐child:only-‐child:nth-‐child():nth-‐last-‐child():first-‐of-‐type:last-‐of-‐type:only-‐of-‐type:nth-‐of-‐type()
:nth-‐last-‐of-‐type():empty:not():target:enabled:disabled:checked
![Page 35: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/35.jpg)
![Page 36: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/36.jpg)
Fancy Button
![Page 37: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/37.jpg)
Border Radius-‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; border-‐radius:6px;
Fancy Button
![Page 38: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/38.jpg)
TExt Shadowtext-‐shadow: 1px 1px 0 #d2572b;}
Fancy Button
![Page 39: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/39.jpg)
Box Shadow-‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px;
box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px;
Fancy Button
![Page 40: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/40.jpg)
Background Gradientbackground:-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b); background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b));
Fancy Button
![Page 41: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/41.jpg)
Anatomy of a CSS3 Button.btn-‐primary {padding:.5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:#ddd 0 0 0 2px; -‐webkit-‐box-‐shadow:#ddd 0 0 0 2px; font-‐size: 1.375em; font-‐weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
![Page 42: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/42.jpg)
Anatomy of a CSS3 Button.btn-‐primary {padding:.5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; font-‐size: 1.375em; font-‐weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
![Page 43: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/43.jpg)
Anatomy of a CSS3 Button.btn-‐primary {padding:.5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; font-‐size: 1.375em; font-‐weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
![Page 44: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/44.jpg)
Anatomy of a CSS3 Button.btn-‐primary {padding:.5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
![Page 45: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/45.jpg)
Hi-fi color/Hi-fi functional
![Page 46: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/46.jpg)
Build all the pieces first
![Page 47: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/47.jpg)
Add some interaction with jQuery
![Page 48: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/48.jpg)
Show me some of that sexy self heal
![Page 49: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/49.jpg)
![Page 50: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/50.jpg)
Resourceshttp://www.w3.org/TR/html5
http://www.w3.org/Style/CSS/current-‐work.en.html
http://html5shiv.googlecode.com/svn/trunk/html5.js
http://modernizr.com
http://diveintohtml5.org
http://realworldcss3.com/resources/
http://getreframer.com
HTML5 Spec
CSS3 Spec
HTML5SHIV
Modernizer
Dive Into HTML5
HTML5/CSS3
REFRAMER APP
![Page 51: Prototyping w/HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022051312/546776caaf79599b108b54f3/html5/thumbnails/51.jpg)
Prototyping: a Practitioner’s Guidehttp://bit.ly/protobk
T hrifty, Fast, and Effective User Experience Resear ch Techniques
R us s UngerT odd Zaki Warfel
G uer r illaU XR es ear c hM et ho d s
Guerrilla UX Research Methods Fall of 2011
@zakiwarfel