Prototyping w/HTML5 and CSS3
Upcoming SlideShare
Loading in...5
×
 

Prototyping w/HTML5 and CSS3

on

  • 9,398 views

Tips and tricks for prototyping with HTML5, CSS3 and jQuery from the Big D Design Conference 2011.

Tips and tricks for prototyping with HTML5, CSS3 and jQuery from the Big D Design Conference 2011.

Statistics

Views

Total Views
9,398
Views on SlideShare
8,925
Embed Views
473

Actions

Likes
30
Downloads
303
Comments
1

10 Embeds 473

http://lanyrd.com 279
http://www.stereoprototype.com 118
http://digitalflaneur.posterous.com 47
http://www.linkedin.com 9
http://querweb.wordpress.com 8
http://twitter.com 4
http://johannesbaeck.com 3
https://www.linkedin.com 3
http://translate.googleusercontent.com 1
https://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Prototyping w/HTML5 and CSS3 Prototyping w/HTML5 and CSS3 Presentation Transcript

  • 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>
  • 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  
  • 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()
  • 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: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