Designing with HTML5, CSS3, and jQuery

Designing with HTML5, CSS3, and jQuery TODD ZAKI WARFEL @zakiwarfel

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

I like to taste the food I’m making.

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

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

HTML5 as a design tool PROS & CONS

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>
<fieldset> <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>
<fieldset> <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 IE?

What about the problem child? IE needs a little help
from our friend JavaScript. • modernizr.com • html5shiv.googlecode.com/ svn/trunk/html5.js • github.com/scottjehl/ Respond/

Pro tip: Smack IE Into Shape <!DOCTYPE html> <html> <head>
<!-‐-‐[if lt IE 9]> <script src="/assets/javascripts/ modernizr.min.js"></script> <![endif]-‐-‐> </head>

Responsive / Adaptive

Media Queries /* Smartphones (portrait and landscape) ----------- */ @media
only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }

On forms and mobile

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

http://bit.ly/h5mobile

It’s the new Photoshop, Yo! Gettin’ Sexy with CSS3

Fancy Buttons .fancy-button { } Fancy Button

-‐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/

http://daneden.me/animate/

Hit me with some jQuery!

jQuery: Self Heal $('.flash').click(function() { $(this).slideUp('fast'); }); $('.flash').fadeIn( function() {
setTimeout( function() { $('.flash').fadeOut('fast'); }, 3000); });

jQuery: Progressive Reveal $('.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://colorzilla.com/gradient-editor/ http://0to255.com/ http://getreframer.com/ http://html5strappr.com/
HTML5 Spec CSS3 Spec HTML5SHIV Modernizer Dive Into HTML5 CSS3 Generator 0to255 Reframer HTML5 Strappr

Designing with HTML5, CSS3, and jQuery

Designing with HTML5, CSS3, and jQuery

More Decks by Todd Zaki Warfel

Other Decks in Design

Featured

Transcript