Progressive Prototyping w/HTML5, CSS3 and jQuery

PROTOTYPING
with

TODD ZAKI WARFEL / UXLISBON /#HTML5

Grab the files
http://bit.ly/HTML5_prototype

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 and Cons

About that code thing
Production vs. Non-production

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 Doctypes
<!DOCTYPE HTML>

HTML Tags HTML5 Tags
<div> <article>

<p> <aside>

<dl>, <dt>, <dd> <section>

<ol>, <ul>, <li> <header>, <hgroup>

<fieldset> <nav>

<input> <footer>

<datalist>

<progress>

<time>

HTML helps you think about the
Organization / Structure
DESIGN

html page structure
A typical HTML page will
div id=header
use divs with IDs and
Classes to create the div id=nav
structure.

div id=content div id=
sidebar

div id=footer

HTML5 page structure
HTML5 gives semantic
meaning to these structures, header
which previously required
IDs and Classes.
section/article
aside

footer

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}

html5 Recursiveness
HTML5 allows for multiple
header
sections and articles within
a single page. Each section/ nav
article can have its own
header, footer, aside and section aside
nav.
header

article

footer

footer

What about the problem child?
IE needs a little help from
our friend JavaScript.

Modernizer/HTML5shiv to
the rescue.

http://modernizr.com

http://
html5shiv.googlecode.co
m/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>

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/HTML5_mobile
Email URL

Gettin’ Sexy with CSS3
It’s the New Photoshop

.btn-‐fancy {}

Fancy Button

Border Radius
border:1px solid #bc6647; border-‐radius:
6px; -‐moz-‐border-‐radius:6px; -‐webkit-‐
border-‐radius:6px;

Fancy Button

Box Shadow
-‐moz-‐box-‐shadow: 4px 4px 8px #a2a2a2;
-‐webkit-‐box-‐shadow: 4px 4px 8px #a2a2a2;
box-‐shadow: 4px 4px 8px #a2a2a2;

Fancy Button

TExt Shadow
text-‐shadow: 1px 1px 0 #d2572b;}

Fancy Button

Background Gradient
background: #e67646; 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

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

CSS3 RGBA and Opacity
rgba (238,88,0,1.0);
#d2572b; opacity:1.0;

rgba (238,88,0,0.5);
#d2572b; opacity:0.5;

Simple JavaScript Function

$('#PostMessage').click(function() {

$('tr.new-comment').fadeIn();

return false;

});

Double Time

$('#PostMessage').click(function() {

$('#CommentForm').hide();

$('tr.new-comment').fadeIn();

return false;

});

Resources
HTML5 Spec http://www.w3.org/TR/html5/

CSS3 Spec http://www.w3.org/Style/CSS/current-‐work.en.html

HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.js

Modernizer http://modernizr.com/

Dive Into HTML5 http://diveintohtml5.org/

Reframer http://reframerapp.com

http://bit.ly/protobk

Russ Unger
Todd Zaki Warfel

Guerrilla
UX
Research
Methods
Thrifty, Fast, and Effective User Experience Research Techniques

on The Twitters
@zakiwarfel

Progressive Prototyping w/HTML5, CSS3 and jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Progressive Prototyping w/HTML5, CSS3 and jQuery

Similar to Progressive Prototyping w/HTML5, CSS3 and jQuery (20)

Recently uploaded

Recently uploaded (20)

Progressive Prototyping w/HTML5, CSS3 and jQuery