Progressive Prototyping w/HTML5 and CSS3

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

We like to taste the food we’re making.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

GUIDING PRINCIPLES Know your audience and intent.

Slide 8

Slide 8 text

What’s the right level of fidelity?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

GUIDING PRINCIPLES Set expectations.

Slide 11

Slide 11 text

GUIDING PRINCIPLES The best tool is the one you know.

Slide 12

Slide 12 text

GUIDING PRINCIPLES Prototype only what you need.

Slide 13

Slide 13 text

HTML AS A PROTOTYPING TOOL PROS & CONS

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

YES, THAT QUESTION. PRODUCTION VS. NON- PRODUCTION

Slide 16

Slide 16 text

HTML VS. HTML5

Slide 17

Slide 17 text

HTML Doctypes

Slide 18

Slide 18 text

HTML5 Doctype

Slide 19

Slide 19 text

HTML Tags

,

<ﬁeldset>

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HTML5 Tags

,

<ﬁeldset> ,

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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}

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Pro tip: Smack IE Into Shape

Slide 26

Slide 26 text

FORMS ANYONE?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Pro tip: HTML5 Search Input

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

HTML5 Registration Form

Slide 31

Slide 31 text

http://bit.ly/h5mobile

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Fancy Buttons .fancy-button { } Fancy Button

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

-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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Hit me with some jQuery!

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

toggle add-number toggle alt-number

Slide 43

Slide 43 text

What just happened?

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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