Progressive Prototyping w/HTML5 and CSS3

Progressive Prototyping with TODD ZAKI WARFEL / MATT VENTRE /
EdUIConf /#HTML5

GRAB THE FILES http://bit.ly/strappr

Interaction design without prototyping is like cooking without tasting. Craig
Villamore, cvil.ly “

We like to taste the food we’re making.

You can x it on the drafting board with an
eraser, or on the construction site with a sledgehammer. Frank Lloyd Wright, Architect “

GUIDING PRINCIPLES Know your audience and intent.

What’s the right level of fidelity?

Hi Visual / Hi Functional Low Visual / Hi Functional
Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity

GUIDING PRINCIPLES Set expectations.

GUIDING PRINCIPLES The best tool is the one you know.

GUIDING PRINCIPLES Prototype only what you need.

HTML AS A PROTOTYPING TOOL PROS & CONS

YES, THAT QUESTION. PRODUCTION VS. NON- PRODUCTION

HTML VS. HTML5

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>

HTML Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>
<ﬁeldset> <input>

Typical HTML Page Structure A 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

HTML5 Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>
<ﬁeldset> <input> <aside> <section> <header>, <hgroup> <nav> <footer> <datalist> <progress> <time>

Updated HTML5 Page Structure HTML5 gives semantic meaning to these
structures, which previously required IDs and Classes. header footer aside section/article

Pro Tip: Update your reset.css article, aside, footer, header, hgroup,
nav, 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 the problem child? IE needs a little help
from our friend JavaScript. Modernizer/HTML5shiv to the rescue. • modernizr.com • html5shiv.googlecode.com/ svn/trunk/html5.js

Pro tip: Smack IE Into Shape <!DOCTYPE html> <html> <head>
 </head>

FORMS ANYONE?

HTML5 Input Types date date-time email tel range search time
url

Pro tip: HTML5 Search Input <form> <input type="search" name="q" placeholder="Search"
autofocus> <input type="submit" value="Search"> </form>

HTML5 Registration Form <form> <input name="Full Name" placeholder="Enter your full
name" autofocus required> <input type="email" name="Email" placeholder="Enter your email address" required> <input type="url" name="URL" placeholder="What’s your website address?"> <input type="submit" value="Register"> </form>

http://bit.ly/h5mobile

IT’S THE NEW PHOTOSHOP, YO! Gettin’ Sexy with CSS3

Fancy Buttons .fancy-button { } Fancy Button

Those Vendor Prefixes -moz for Firefox -ms for Microsoft -0
for Opera -webkit for Webkit (Safari and Chrome)

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

Background: Linear Gradient background:-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

text-shadow: #d2572b 1px 1px 0; Text Shadow Fancy Button

-moz-box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px;
-webkit-box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px; box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px; Box Shadow Fancy Button

http://www.colorzilla.com/gradient-editor/

Hit me with some jQuery!

toggle add-number toggle alt-number

What just happened?

Simple JavaScript Function $('.flash').click(function() { $(this).slideUp('fast'); }); $('.flash').fadeIn( function() {
setTimeout( function() { $('.flash').fadeOut('fast'); }, 3000); });

Simple JavaScript Function $('.new-number').click(function(){ $('.alt-number').fadeIn('fast'); });

Resources http://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://getreframer.com/ http://html5strappr.com/ HTML5 Spec
CSS3 Spec HTML5SHIV Modernizer Dive Into HTML5 Reframer HTML5 Strappr

Todd Zaki Warfel Matt Ventre Slides @zakiwarfel @mventre http://bit.ly/eduiconf http://bit.ly/protobk

Progressive Prototyping w/HTML5 and CSS3

Progressive Prototyping w/HTML5 and CSS3

More Decks by Todd Zaki Warfel

Other Decks in Design

Featured

Transcript