I presented this talk at Mix '09 on 3/19/2009.
Prototyping can be challenging. Especially prototyping in DHTML. But over the last few years a number of tools, techniques, libraries and frameworks have emerged making the task easier. Drawing from years of experience at companies such as Yahoo! and Netflix, come hear Bill Scott discuss these solutions and best practices for laying out pages rapidly, injecting interactive behavior and simulating data for prototyping your Web applications in DHTML.
Video from live event: http://videos.visitmix.com/MIX09/C14F
20. Devil is in the Details
y! photos. anti-pattern. idiot boxes
21. Devil is in the Details
y! photos. anti-pattern. idiot boxes
y! maps. anti-pattern. mouse trap
22. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
23. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
24. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
25. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
26. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
27. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
33. Prototyping with DHTML
Bene ts
Start simple & add complexity
Higher delity
Closer to nal solution
Living example
Disadvantages
Requires technical savvy
Bugs can suck down time
Too much time spent ‘messing with code’
Hard to extract into documentation
Can get in the way of ideation if not rapid enough
34. 100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 weeks later
35. 100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 weeks later
36. Separation of Concerns
Content/Structure should be free of
style & behavior logic
Style should be layered in externally
Logic should be handled in
separate code
37. Separation of Concerns
Content/Structure should be free of
style & behavior logic
Structure
Style should be layered in externally
Logic should be handled in
separate code
38. Separation of Concerns
Content/Structure should be free of
style & behavior logic
Structure
Style should be layered in externally
Logic should be handled in
Style
separate code
39. Separation of Concerns
Content/Structure should be free of
style & behavior logic
Structure
Style should be layered in externally
Logic should be handled in
Style Logic
separate code
40. Separation of Concerns
Content/Structure should be free of
style & behavior logic
Structure
Style should be layered in externally
Logic should be handled in
Style Logic
separate code
“Keep structure, style and logic separate”
41. Prototyping Challenges
Layout
Getting the page laid out correctly (enough) & quickly
Behavior
Adding interactivity to the page
Data
Populating the prototype with fake or semi-realistic data
44. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
45. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
46. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
8 major
browsers
47. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
8 major
browsers
5 ways to layout
elements
48. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
8 major
browsers
5 ways to layout
elements
6+ ways to
vertically align
49. This Should Not Be Hard... But It Is
Confronted with many techniques Floats + Margins
Slows prototyping oat left oat right
Problem: Laying out against
the ow
margin-left margin-right
Simple Margin All Floats
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit.
oat left oat right
Quisque quam
massa, aliquam non,
feugiat non,
ullamcorper sed, oat left
eros. Nullam mattis
ultrices lectus.
Aenean dolor tortor,
semper in, aliquam
at, faucibus a, diam.
Nam eget urna vitae
magna convallis
vulputate. Duis All Floats w/ Nested
tempus mattis ipsum. oat left
Cum sociis natoque
margin-left
oat left oat right oat right
50. Box Model
IE6 Quirks mode (and earlier IE) have di erent handling
Use strict mode to eliminate this concern
53. Understanding Floats
Flow of block elements Flow of block elements
Lorem ipsum dolor
oat left block
sit amet, consectetur
adipiscing elit.
element
Quisque quam massa, aliquam non,
feugiat non, ullamcorper sed, eros.
Nullam mattis ultrices lectus. Aenean
ows around
dolor tortor, semper in, aliquam at,
faucibus a, diam. Nam eget urna
block above
vitae magna convallis vulputate. Duis
tempus mattis ipsum. Cum sociis
natoque
Flow of inline elements
54. Understanding Floats
Flow of block elements Flow of block elements
Lorem ipsum dolor
oat left block
sit amet, consectetur
adipiscing elit.
element
Quisque quam massa, aliquam non,
feugiat non, ullamcorper sed, eros.
Nullam mattis ultrices lectus. Aenean
ows around
dolor tortor, semper in, aliquam at,
faucibus a, diam. Nam eget urna
block above
vitae magna convallis vulputate. Duis
tempus mattis ipsum. Cum sociis
natoque
Floating block elements
Flow of inline elements
oat left
third block
oat left
element
oat left
wraps
ow left to right
55. Understanding Floats
Flow of block elements Flow of block elements
Lorem ipsum dolor
oat left block
sit amet, consectetur
adipiscing elit.
element
Quisque quam massa, aliquam non,
feugiat non, ullamcorper sed, eros.
Nullam mattis ultrices lectus. Aenean
ows around
dolor tortor, semper in, aliquam at,
faucibus a, diam. Nam eget urna
block above
vitae magna convallis vulputate. Duis
tempus mattis ipsum. Cum sociis
natoque
Floating block elements
Flow of inline elements
oat left
third block
oat left
element
oat left
wraps
ow left to right
Clearing oats
oat left
oat left
ow left to right
after clear,
[clear]
ow returns
to vertical
for blocks
56. Absolute Positioning
It is actually relative to its closest positioned ancestor
B positioned absolutely
5 em
A
B is positioned
5 em
relative to A, not
5 em
B the document
5 em
57. Absolute Positioning
It is actually relative to its closest positioned ancestor
B positioned absolutely
5 em
A
B is positioned
5 em
relative to A, not
5 em
B the document
5 em
B positioned absolutely
position: relative
A
B is positioned
relative to A, not
5 em
B the document
5 em
58. Absolute Positioning
It is actually relative to its closest positioned ancestor
B positioned absolutely B positioned absolutely
5 em no positioning speci ed
A A
B is positioned B is positioned
5 em
relative to A, not relative to
5 em
B the document document, not A
5 em
5 em
B
5 em
B positioned absolutely
position: relative
A
B is positioned
relative to A, not
5 em
B the document
5 em
67. CSS Frameworks
Building on the work of others
Hide complexity
Simplify the layout process
Express layout
De ne templates and/or grids
Normalize browsers
CSS Reset
Handle IE
Objections?
Takes away the craftsmanship
Non-semantic
68. CSS Frameworks
Elements CSS Frameworks Schema Web Design Framework
WYMstyle: a CSS framework CleverCSS
YAML CSS Framework Tripoli Beta CSS Framework
YUI Grids CSS ESWAT Web Project Framework
Boilerplate CSS Framework CwS CSS Framework
Blueprint CSS My (not really mine) CSS
Framework
960 Grid
69. CSS Frameworks
Elements CSS Frameworks Schema Web Design Framework
WYMstyle: a CSS framework CleverCSS
YAML CSS Framework Tripoli Beta CSS Framework
YUI Grids CSS ESWAT Web Project Framework
Boilerplate CSS Framework CwS CSS Framework
Blueprint CSS My (not really mine) CSS
Framework
960 Grid
74. Blueprint CSS Framework
Layout is speci ed by using
style classes that denote layout.
“span-7” means span 7 grid columns.
“colborder” means provide one grid
column to the right as a border.
85. Why 960?
960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30,
32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
This makes it a highly exible base number to work with
You can also make Blueprint a 960 grid system as well
87. Making it Semantic
Criticism: non-semantic naming
There are tools for making blueprint semantic
Boilerplate
http://code.google.com/p/css-boilerplate/
Blueprint’s compress.rb
http://jdclayton.com/blueprints_compress_a_walkthrough.html
Semantify
http://lab.christianmontoya.com/read/
http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-on-
blueprint/)
CSS Mixin for PHP
http://habilis.net/cssmixin/
Non-issue for prototyping
88. Style Techniques
Use CSS Reset
Keep structure, style and logic separate
Avoid any direct styles or html style tags (font, etc.)
Appropriate Markup
H1 Does Not Mean quot;Big, Bold, and Uglyquot;
A Paragraph Is a Paragraph
List Mania
Keep DIV elements to a minimum
Use px for font-sizes (avoids nesting di culties)
Minimize selectors
Extend objects by applying multiple classes to an element
91. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
92. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
93. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
Blocks of logic, patterns, actions that
operate on elements.
94. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
Blocks of logic, patterns, actions that
operate on elements.
95. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Page
Element
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
Behavior Event
Handler
Blocks of logic, patterns, actions that
operate on elements.
Behavior
96. user
Anatomy of an Interaction
ew
vi
t
en
Page Element
ev
Target an element or elements
for attaching events & behaviors.
Page
Element
Event Handler re
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
modify
Event
Handler
Blocks of logic, patterns, actions that
operate on elements.
rm
fo
er
p
Behavior
97. user
Anatomy of an Interaction
ew
vi
t
en
Page Element
ev
Target an element or elements
for attaching events & behaviors.
Page
Element
Event Handler re
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
modify
Event
Handler
Blocks of logic, patterns, actions that
operate on elements.
rm
fo
er
p
Behavior
“Keep interaction, objects and behavior separate”
98. Behavior Injection
Tying behavior to elements in the markup tightly couples
behavior (also non-semantic)
Avoid onclick=”someAction()”
Instead associate actions with matched elements
99. Behavior Injection
By rendering all panels hidden & showing with JS
<form id=quot;loginquot; action=quot;quot;>
<!-- Without Errors-->
<div class=”noerrors”>
<p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p>
<p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p>
<input type=quot;submitquot; value=quot;Submitquot; />
</div>
<!-- With Errors-->
<div class=”errors”>
<p class=quot;errorquot;>Password doesn't match.</p>
<p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p>
<p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p>
<input type=quot;submitquot; value=quot;Submitquot; />
</div>
<!-- Forgot Password-->
<div class=”forgotten”>
<p>Provide your email and we'll send you a new password.</p>
<p><label>Email Address: </label><input type=quot;textquot; name=quot;emailquot;/></p>
<input type=quot;submitquot; value=quot;Send New Passwordquot; />
</div>
</form>
Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
100. Behavior Injection .noerrors, .errors, .forgotten:
{display:none;}
By rendering all panels hidden & showing with JS
<form id=quot;loginquot; action=quot;quot;>
<!-- Without Errors-->
<div class=”noerrors”>
<p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p>
<p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p>
<input type=quot;submitquot; value=quot;Submitquot; />
</div>
<!-- With Errors-->
<div class=”errors”>
<p class=quot;errorquot;>Password doesn't match.</p>
<p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p>
<p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p>
<input type=quot;submitquot; value=quot;Submitquot; />
</div>
<!-- Forgot Password-->
<div class=”forgotten”>
<p>Provide your email and we'll send you a new password.</p>
<p><label>Email Address: </label><input type=quot;textquot; name=quot;emailquot;/></p>
<input type=quot;submitquot; value=quot;Send New Passwordquot; />
</div>
</form>
Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
101. Behavior Injection .noerrors, .errors, .forgotten:
{display:none;}
By rendering all panels hidden & showing with JS
<form id=quot;loginquot; action=quot;quot;>
<!-- Without Errors-->
<div class=”noerrors”>
<p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p>
<p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p>
<input type=quot;submitquot; value=quot;Submitquot; />
</div>
$(quot;.errorsquot;).show();
<!-- With Errors-->
<div class=”errors”>
<p class=quot;errorquot;>Password doesn't match.</p>
<p><label>Username: </label><input type=quot;textquot; name=quot;usernamequot;/></p>
<p><label>Password: </label><input type=quot;passwordquot; name=quot;passwordquot;/></p>
<input type=quot;submitquot; value=quot;Submitquot; />
</div>
<!-- Forgot Password-->
<div class=”forgotten”>
<p>Provide your email and we'll send you a new password.</p>
<p><label>Email Address: </label><input type=quot;textquot; name=quot;emailquot;/></p>
<input type=quot;submitquot; value=quot;Send New Passwordquot; />
</div>
</form>
Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
110. Anatomy of Self-Healing Delete
DOM elements
DOM
[X]
Element
<LI>[X] oldmove.mov</LI>
Events
Click Event
onClick (callback)
Behaviors
Behavior
Fade
Close
111. Anatomy of Self-Healing Delete
DOM elements
DOM
[X]
Element
<LI>[X] oldmove.mov</LI>
Events
Click Event
onClick (callback)
Behaviors
Behavior
Fade
Close
112. Anatomy of Self-Healing Delete
DOM elements
DOM
[X]
Element
<LI>[X] oldmove.mov</LI>
Events
Click Event
onClick (callback)
Behaviors
Behavior
Fade
Close
127. Behavior Demo
Site has a demo page for each behavior
http://protoscript.com/demos.php
Site has a wiki with documentation page for each
behavior
http://docs.protoscript.com/
Element
Behavior
Event
138. ClassBehaviors jQuery Library
http://www.woollymittens.nl/default.php?id=classbehaviour-
examples&cat=classbehaviour&mod=category
<fieldset class=quot;borderquot;>
<label for=quot;myselectquot;>Select Anything<em>*</em>:</label>
<select id=quot;myselectquot; name=quot;myselectquot; class=quot;linkedSelects id_myLinkedSelectquot;>
<option value=quot;quot;>--- pick a type ---</option>
<option value=quot;./xml/linkedSelects_fruit.xmlquot;>Fruit</option>
<option value=quot;./xml/linkedSelects_vegetables.xmlquot;>Vegetables</option>
<option value=quot;./xml/linkedSelects_fish.xmlquot;>Fish</option>
</select>
<select id=quot;myLinkedSelectquot; name=quot;myLinkedSelectquot;>
<option value=quot;quot;>--- pick a type first ---</option>
</select>
</fieldset>
139. Style Class Switching
Keep style details out of programming logic
Instead bundle style changes under a style class
Use class “mix-in”
Multiple class names for an element
141. Greasemonkey + jQuery
jquery code can
be loaded for any web
page allowing behaviors to
be added
142. Firebug
Edit HTML
For quick adding of html or modifying html
during a prototype review
Edit CSS
Change behaviors, layout or style on the y
Layout issues
Visualize the box model & page layout
Manipulate Javascript
Change logic, add behaviors, experiment &
tweak
143. Behavior Techniques
Use CSS to simulate mouse hover actions
Use CSS selector syntax to inject behavior
ExtJS, jQuery, Dojo, Mootools, Prototype, cssQuery(), YUI 3.0
Understand CSS Speci city
Understand Class vs. ID
Use style class switching for visual changes
Use innerHTML for content changes
Anchors as basic navigation/action hooks
Keep structure, style and logic separate
Avoid adding onclick handlers in the HTML (unobtrusive)
Use Firebug
145. jQuery Data Binding
jQuery.ajax(options)
$.ajax({
url: quot;test.htmlquot;,
cache: false,
success: function(html){
$(quot;#resultsquot;).append(html);
}
});
Very quick way to bring in dynamic interface elements
147. JSON
{quot;namequot;: quot;Jack B. Nimblequot;, quot;at largequot;: true, quot;gradequot;: quot;Aquot;,
quot;levelquot;: 3}
name Jack B. Nimble
at large true
grade A
level 3
149. JSON in jQuery
jQuery.getJSON(url, [data], [callback])
$.getJSON(quot;http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?quot;,
function(data){
$.each(data.items, function(i,item){
$(quot;<img/>quot;).attr(quot;srcquot;, item.media.m).appendTo(quot;#imagesquot;);
if ( i == 3 ) return false;
});
}
);
150. JSON Example
$.getJSON(quot;http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?quot;,
function(data){
$.each(data.items, function(i,item){
$(quot;<img/>quot;).attr(quot;srcquot;, item.media.m).appendTo(quot;#imagesquot;);
if ( i == 3 ) return false; // only get 4 images
});
}
);
({
quot;titlequot;: quot;Recent Uploads tagged catquot;,
quot;linkquot;: quot;http://www.flickr.com/photos/tags/cat/quot;,
quot;descriptionquot;: quot;quot;,
quot;modifiedquot;: quot;2009-03-09T02:00:41Zquot;,
quot;generatorquot;: quot;http://www.flickr.com/quot;,
quot;itemsquot;: [
{
quot;titlequot;: quot;birthday 89quot;,
quot;linkquot;: quot;http://www.flickr.com/photos/gulshan/3340193322/quot;,
quot;mediaquot;: {quot;mquot;:quot;http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpgquot;},
quot;date_takenquot;: quot;2009-03-08T03:11:50-08:00quot;,
quot;descriptionquot;: quot;<p><a href=quot;http://www.flickr.com/people/gulshan/quot;>gulshan</a>
posted a photo:</p> <p><a href=quot;http://www.flickr.com/photos/gulshan/3340193322/quot; title=
quot;birthday 89quot;><img src=quot;http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpgquot;
width=quot;240quot; height=quot;160quot; alt=quot;birthday 89quot; /></a></p> quot;,
quot;publishedquot;: quot;2009-03-09T02:00:41Zquot;,
quot;authorquot;: quot;nobody@flickr.com (gulshan)quot;,
quot;author_idquot;: quot;88283245@N00quot;,
quot;tagsquot;: quot;birthday party me brooklyn cat photobooth marcus 2009quot;
},
151. Prototyping with DHTML
Layout
Getting the page laid out correctly & quickly
Behavior
Adding interactivity to the page
Data
Populating the prototype with fake or semi-
realistic data