Prototyping w/HTML5 and CSS3

PROGRESSIVE PROTOTYPINGTODD ZAKI WARFEL / BIG D / #html5

“Interaction design withoutprototyping is like cookingwithout tasting.”- Craig Villamore cvil.lyhttp://bit.ly/pb5Xec

I DON’T WIREFRAME

m aki ng. e food I’m to t ast e thIwant

PROTOTYPING IS ADESIGN PROCESS

PROTOTYPING OFFERs A BETTER WAY TOWORK THROUGH AND VALIDATEYOUR DESIGN

“You can fix it on the draftingboard with an eraser, or on theconstruction site with asledgehammer.”- Frank Lloyd Wright

PROTOTYPES ALLOW YOU TOFAIL IN A LOW COST ENVIRONMENT

IF YOU AREN’T FAILING, YOU’RENOT TRYING HARD ENOUGH.

FIDELITYHi Visual/Hi Functional Lo Visual/Lo FunctionalLo Visual/Hi Functional Hi Visual/Lo Functional

, bu t... p like this ig ht e nd uIt m

ha ske tch sta rts witIt always

data fi rst nin gw ithDesig

graysc ale ro und s in ex t, a fewN

ex app eal th som es h it off wiF inis

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">

HTML5 Doctype<!DOCTYPE HTML>

HTML5 TAGS<address> <header><audio> <hgroup><article> <input><aside> <meter><canvas> <nav><datalist> <progress><div> <section><p> <table>, <th>, <tr>, <td><dl>, <dt>, <dd> <time><ol>, <ul>, <li> <video><fieldset><footer>

html page structureA typical HTML page will div id=headeruse divs with IDs andClasses to create the div id=navstructure. div id=content div id= sidebar div id=footer

HTML5 page structureHTML5 gives semantic headermeaning to these structures,which previously required navIDs and Classes. section/article aside footer

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}

What about thIS LITTLE BASTARD?IE needs a little help fromour friend JavaScript.Modernizer/HTML5shiv tothe rescue.http://modernizr.comhttp://html5shiv.googlecode.com/svn/trunk/html5.js

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>

NEW HTML5 Input Typescolor timedate weekdatetime urldatetime-‐localemailnumbermonthrangesearchtel

Email URL advant age ant mobile Inst

Gettin’ Sexy with CSS3 It’s the New Photoshop, YO!

CSS3 SELECTORS* :first-‐letter :nth-‐last-‐of-‐type()E ::first-‐letter :empty.class :first-‐line :not()#id ::first-‐line :targetE F E[attribute^=value] :enabledE > F E[attribute$=value] :disabledE + F E[attribute*=value] :checkedE[attribute] E ~ FE[attribute=value] :rootE[attribute~=value] :last-‐childE[attribute|=value] :only-‐child:first-‐child :nth-‐child():lang() :nth-‐last-‐child():before :first-‐of-‐type::before :last-‐of-‐type:after :only-‐of-‐type::after :nth-‐of-‐type()

Fancy Button

Border Radius-‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; border-‐radius:6px; Fancy Button

TExt Shadowtext-‐shadow: 1px 1px 0 #d2572b;} Fancy Button

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

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

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;}

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;}

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;}

fun ctio nal olo r/H i-fiHi- fi c

ece s fi rst all the piBu ild

ith jQu ery t eracti on w dd som e inA

se lf h eal f th at s exy e som eoShowm

ResourcesHTML5 Spec http://www.w3.org/TR/html5CSS3 Spec http://www.w3.org/Style/CSS/current-‐work.en.html HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.jsModernizer http://modernizr.comDive Into HTML5 http://diveintohtml5.orgHTML5/CSS3 http://realworldcss3.com/resources/REFRAMER APP http://getreframer.com

Prototyping: a Practitioner’s Guide R us s U ngerhttp://bit.ly/protobk T odd Zaki W ar f el G uer r a UX R es ear c h M et ho d s T hr i f t y, Fas t , and Ef f ect i v e U s er Ex per i ence R es ear ch T echni ques Guerrilla UX Research Methods Fall of 2011 @zakiwarfel

http://lanyrd.com	236
http://www.stereoprototype.com	118
http://digitalflaneur.posterous.com	47
http://twitter.com	4
http://johannesbaeck.com	2
http://www.linkedin.com	2
https://twitter.com	1
http://translate.googleusercontent.com	1
http://querweb.wordpress.com	1

Prototyping w/HTML5 and CSS3

by Todd Zaki Warfel

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 412

Statistics

Prototyping w/HTML5 and CSS3 Presentation Transcript