Interactive Prototyping
with DHTML
tips, techniques, tools, libraries and frameworks for rapid prototyping
Bill Scott
2009...
My Background
the challenge
 interaction is dynamic
Simple Interaction?
Simple Interaction? Events...

     Page load. Mouse hover. Mouse down. Drag
   initiated. Drag leaves original location. ...
Simple Interaction? Actors...


   Page. Cursor. Tool Tip. Drag
   Object. Drag Object’s Parent
     Container. Drop Targe...
Actors   Events




                  96
                  Interesting Moments
interaction (n).
       mutual or
reciprocal action;
      interacting
Interaction is Nuanced
Interaction is Nuanced


flickr. inline edit
Interaction is Nuanced


flickr. inline edit




y! teachers. drag & drop
Interaction is Nuanced

                           backpackit. contextual tools




flickr. inline edit




y! teachers. dr...
Interaction is Nuanced

                           backpackit. contextual tools




flickr. inline edit




y! teachers. dr...
Interaction is Nuanced
Interaction is Nuanced



the gap. inline assistant
Interaction is Nuanced



the gap. inline assistant




microsoft live. paged scrolling
Interaction is Nuanced



the gap. inline assistant         broadmoor hotel. one page checkout




microsoft live. paged s...
Devil is in the Details
Devil is in the Details




y! teachers. anti-pattern. hover & cover
Devil is in the Details




y! teachers. anti-pattern. hover & cover
Devil is in the Details




y! teachers. anti-pattern. hover & cover   y! teachers. anti-pattern. hover & cover - resolved
Devil is in the Details




y! teachers. anti-pattern. hover & cover   y! teachers. anti-pattern. hover & cover - resolved
Devil is in the Details
Devil is in the Details




y! photos. anti-pattern. idiot boxes
Devil is in the Details




y! photos. anti-pattern. idiot boxes



                                       y! maps. anti-p...
Timing Concerns
                                    timing is important
                                makes actions seem...
Timing Concerns
                                    timing is important
                                makes actions seem...
Timing Concerns
                                    timing is important
                                makes actions seem...
Timing Concerns
                                    timing is important
                                makes actions seem...
Timing Concerns
                                    timing is important
                                makes actions seem...
Timing Concerns
                                    timing is important
                                makes actions seem...
Timing Concerns
Timing Concerns




my yahoo!. version 1
Timing Concerns




my yahoo!. version 1


                       my yahoo!. version 2
Timing Concerns




my yahoo!. version 1


                       my yahoo!. version 2



                                ...
prototyping with DHTML
         why?
Advantages
Start simple & add complexity
Higher fidelity
Living, evolving example
Closer to final technical solution
Disadvantages
Requires technical savvy
Bugs can suck down time
Too much time spent ‘messing with code’
Hard to extract int...
100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 w...
100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 w...
prototyping architecture
     thinking about it the right way
Separation of Concerns (MVC)
Separation of Concerns (MVC)

               View
Separation of Concerns (MVC)

                  View




           Data
Separation of Concerns (MVC)

                  View




           Data          Behavior
Separation of Concerns
Separation of Concerns

               View
Separation of Concerns

                  View




           Data
Separation of Concerns

                  View




           Data          Behavior
Separation of Concerns

            Structure   View




           Data                Behavior
Separation of Concerns
                        Layout



            Structure   View




           Data                 ...
Separation of Concerns
                        Layout



            Structure   View      Style




           Data      ...
Prototyping Challenges
Not surprisingly the challenges are within each concern

        Structure, Layout & Style
        ...
Layout & Style
Putting everything where it should be as quickly as possible*

                       *with minimal hacking
It’s Not That Easy

14   IE 6 layout
     bugs
It’s Not That Easy
                     9   ways to layout
                         columns

14   IE 6 layout
     bugs
It’s Not That Easy
                              9    ways to layout
                                   columns

14   IE 6...
It’s Not That Easy
                              9    ways to layout
                                   columns

14   IE 6...
It’s Not That Easy
                                 9    ways to layout
                                      columns

14 ...
It’s Not That Easy
                                 9    ways to layout
                                      columns

14 ...
This Should Not Be Hard... But It Is
Confronted with many techniques                                                      ...
Box Model
IE6 Quirks mode (and earlier IE) have different handling
Use strict mode to eliminate this concern
Understanding Floats
Flow of block elements
Understanding Floats
Flow of block elements




Flow of inline elements
Understanding Floats
Flow of block elements                Flow of block elements
                                        ...
Understanding Floats
Flow of block elements                Flow of block elements
                                        ...
Understanding Floats
Flow of block elements                 Flow of block elements
                                       ...
Absolute Positioning
 It is actually relative to its closest positioned ancestor
       B positioned absolutely
          ...
Absolute Positioning
 It is actually relative to its closest positioned ancestor
       B positioned absolutely
          ...
Absolute Positioning
 It is actually relative to its closest positioned ancestor
       B positioned absolutely           ...
Layout Techniques for Prototyping
Layout Techniques for Prototyping
Choose positioning over floats
Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system




Use a CSS framework to simpli...
CSS Frameworks
Building on the work of others
Hide complexity
Simplify the layout process

Express layout
Define templates ...
CSS Frameworks
Elements CSS Frameworks       CleverCSS
WYMstyle: a CSS framework     Tripoli Beta CSS Framework
YAML CSS F...
CSS Frameworks
Elements CSS Frameworks       CleverCSS
WYMstyle: a CSS framework     Tripoli Beta CSS Framework
YAML CSS F...
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework

                  Layout is specified by using
                style classes that denote layout.

...
YUI Grid Builder
YUI Grid Cheat Sheet
YUI Grid Cheat Sheet
960 Grid
960 Grid
960 Grid
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,...
960 gs Fluid
A derivative that supports fluid layout
Less CSS
CSS Pre-processor
http://lesscss.org/
Less CSS
CSS Pre-processor
http://lesscss.org/
Less CSS
CSS Pre-processor
http://lesscss.org/
Less CSS
CSS Pre-processor
http://lesscss.org/
Making it Semantic
Criticism: non-semantic naming
There are tools for making blueprint semantic
Boilerplate
http://code.go...
Style Techniques
Use CSS Reset
Keep structure, style and logic separate
Avoid any direct styles or html style tags (font, ...
Behavior
Making the page come alive*

       *as quickly as possible
Anatomy of an Interaction
Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.

Event Handler
Even...
Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.

Event Handler
Even...
Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.

Event Handler
Even...
Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
                   ...
user
Anatomy of an Interaction




                                                      ew
                              ...
user
Anatomy of an Interaction




                                                      ew
                              ...
Behavior Injection
Tying behavior to elements in the markup tightly couples
behavior (also non-semantic)
Avoid onclick=”so...
Behavior Injection
By rendering all panels hidden & showing with JS
<form id="login" action="">
    <!-- Without Errors-->...
Behavior Injection                                   .noerrors, .errors, .forgotten:
                                     ...
Behavior Injection                                   .noerrors, .errors, .forgotten:
                                     ...
Behavior Injection: 960gs Fluid
Behavior Injection: 960gs Fluid
<ul class="nav main">
     <li><a href="#">Menu 1</a>
          <ul>
               <li><a...
Behavior Injection: 960gs Fluid
                       menu behavior tied to
                          .nav & .main

<ul c...
Behavior Injection: 960gs Fluid
                       menu behavior tied to
                          .nav & .main

<ul c...
Behavior Injection: 960gs Fluid
                       menu behavior tied to
                          .nav & .main

<ul c...
Protoscript
Experimental framework for behavior injection
Example
Protoscript: Sprinkling in Behaviors
Anatomy of Self-Healing Delete
DOM elements
[X]                         DOM
<LI>[X] oldmove.mov</LI>   Element



Events
C...
Anatomy of Self-Healing Delete
DOM elements
[X]                         DOM
<LI>[X] oldmove.mov</LI>   Element



Events
C...
Anatomy of Self-Healing Delete
DOM elements
[X]                         DOM
<LI>[X] oldmove.mov</LI>   Element



Events
C...
Anatomy of Self-Healing Delete



                                 Element




                                 Behavior

...
Anatomy of Self-Healing Delete



                                 Element




                                 Behavior

...
Anatomy of Self-Healing Delete


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       ...
Behaviors
     Animate. ColorAnimate. Fade.
         Move. Spotlight. Close.
         DragDrop. Hide. Open.
       Popup. ...
Behavior Demo
Site has a demo page for each behavior
http://protoscript.com/demos.php

Site has a wiki with documentation ...
Events

          Blur. Click. Dblclick. Focus.
           Keypress. Mousedown.
           Mousemove. Mouseout.
         M...
Callbacks
          onComplete. onTween. onStart. onClose.
      onStartDrag. onDrag. onDragEnter. onDragOver.
     onDrag...
jQuery
Easy to layer in behavior
Easy to keep behavior separate
Simple, quick, terse syntax
   $(“div”).addClass(“highligh...
jQuery Behaviors                               Behavior




     html. append. prepend. before. after.
     wrap. show. hi...
jQuery Events                               Event




      bind. trigger. hover. toggle. blur.
        change. click. dlb...
ClassBehaviors jQuery Library
http://www.woollymittens.nl/default.php?id=classbehaviour-
examples&cat=classbehaviour&mod=c...
ClassBehaviors jQuery Library
http://www.woollymittens.nl/default.php?id=classbehaviour-
examples&cat=classbehaviour&mod=c...
Style Class Switching
Keep style details out of programming logic
Instead bundle style changes under a style class
Use cla...
Greasemonkey + jQuery
Greasemonkey + jQuery
                  jquery code can
               be loaded for any web
             page allowing be...
Firebug
     Edit HTML
     For quick adding of html or modifying html
     during a prototype review


     Edit CSS
    ...
Behavior Techniques
Use CSS to simulate mouse hover actions
Use CSS selector syntax to inject behavior
ExtJS, jQuery, Dojo...
Data/Content
 Approximating reality
jQuery Data Binding
jQuery.ajax(options)
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#r...
Use Public APIs
Yahoo! Search
Google Search
Flickr images
Google Maps
Use JSON
{"name": "Jack B. Nimble", "at large": true, "grade": "A",
"level": 3}


            name                      Ja...
JSON: Arrays
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday"]
[
[0, -1, 0],
[1, 0, 0],
[0, 0...
JSON in jQuery
jQuery.getJSON(url, [data], [callback])
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
...
JSON Example
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallb...
Use YQL
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Use Dapper (Screen Scraping)
Prototyping Challenges
     View. Layout, Style & Structure
     Getting the page laid out correctly (enough) & quickly


...
Resources
Book: CSS:The Missing Manual
http://css.maxdesign.com.au/floatutorial/
http://speckyboy.com/2008/03/28/top-12-css...
Resources
http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
http://www.designbygrid.com/
http://www.divitodesign.com/2008/...
Resources
http://lab.christianmontoya.com/read/
http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-o...
Photo Credits
http://www.flickr.com/photos/yerro/2310015018/
http://flickr.com/photos/totoro_zine/2341347265/
http://www.flic...
Questions?
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
Upcoming SlideShare
Loading in...5
×

DHTML Prototyping: Silicon Valley Code Camp

4,269

Published on

Updated version of DHTML Prototyping talk. Gave this Oct. 3, 2009 at Silicon Valley Code Camp.

Published in: Technology, Design
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,269
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
151
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

DHTML Prototyping: Silicon Valley Code Camp

  1. 1. Interactive Prototyping with DHTML tips, techniques, tools, libraries and frameworks for rapid prototyping Bill Scott 2009.10.03
  2. 2. My Background
  3. 3. the challenge interaction is dynamic
  4. 4. Simple Interaction?
  5. 5. Simple Interaction? Events... Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag re- enters original location. Drag re-enters original location. Drag enters valid target. Drag exits valid target. Drag enters specific invalid target. Drag is over no specific target. Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop rejected. Drop on parent container. 16+
  6. 6. Simple Interaction? Actors... Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent Container. Drop Target. 6+
  7. 7. Actors Events 96 Interesting Moments
  8. 8. interaction (n). mutual or reciprocal action; interacting
  9. 9. Interaction is Nuanced
  10. 10. Interaction is Nuanced flickr. inline edit
  11. 11. Interaction is Nuanced flickr. inline edit y! teachers. drag & drop
  12. 12. Interaction is Nuanced backpackit. contextual tools flickr. inline edit y! teachers. drag & drop
  13. 13. Interaction is Nuanced backpackit. contextual tools flickr. inline edit y! teachers. drag & drop the gap. inline assistant
  14. 14. Interaction is Nuanced
  15. 15. Interaction is Nuanced the gap. inline assistant
  16. 16. Interaction is Nuanced the gap. inline assistant microsoft live. paged scrolling
  17. 17. Interaction is Nuanced the gap. inline assistant broadmoor hotel. one page checkout microsoft live. paged scrolling
  18. 18. Devil is in the Details
  19. 19. Devil is in the Details y! teachers. anti-pattern. hover & cover
  20. 20. Devil is in the Details y! teachers. anti-pattern. hover & cover
  21. 21. Devil is in the Details y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover - resolved
  22. 22. Devil is in the Details y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover - resolved
  23. 23. Devil is in the Details
  24. 24. Devil is in the Details y! photos. anti-pattern. idiot boxes
  25. 25. Devil is in the Details y! photos. anti-pattern. idiot boxes y! maps. anti-pattern. mouse trap
  26. 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. 27. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  28. 28. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  29. 29. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  30. 30. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  31. 31. Timing Concerns timing is important makes actions seem faster slows down interaction for understanding reveals state change shows relationships between objects focuses attention
  32. 32. Timing Concerns
  33. 33. Timing Concerns my yahoo!. version 1
  34. 34. Timing Concerns my yahoo!. version 1 my yahoo!. version 2
  35. 35. Timing Concerns my yahoo!. version 1 my yahoo!. version 2 my yahoo!. version 3
  36. 36. prototyping with DHTML why?
  37. 37. Advantages Start simple & add complexity Higher fidelity Living, evolving example Closer to final technical solution
  38. 38. 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
  39. 39. 100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
  40. 40. 100+ variations prototyped over 1 week Winnowed down between PMs, Design & Eng. Put before users the next week & again 2 weeks later
  41. 41. prototyping architecture thinking about it the right way
  42. 42. Separation of Concerns (MVC)
  43. 43. Separation of Concerns (MVC) View
  44. 44. Separation of Concerns (MVC) View Data
  45. 45. Separation of Concerns (MVC) View Data Behavior
  46. 46. Separation of Concerns
  47. 47. Separation of Concerns View
  48. 48. Separation of Concerns View Data
  49. 49. Separation of Concerns View Data Behavior
  50. 50. Separation of Concerns Structure View Data Behavior
  51. 51. Separation of Concerns Layout Structure View Data Behavior
  52. 52. Separation of Concerns Layout Structure View Style Data Behavior
  53. 53. Prototyping Challenges Not surprisingly the challenges are within each concern Structure, Layout & Style Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
  54. 54. Layout & Style Putting everything where it should be as quickly as possible* *with minimal hacking
  55. 55. It’s Not That Easy 14 IE 6 layout bugs
  56. 56. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs
  57. 57. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines
  58. 58. It’s Not That Easy 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 8 major browsers
  59. 59. 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
  60. 60. 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
  61. 61. This Should Not Be Hard... But It Is Confronted with many techniques Floats + Margins Slows prototyping float left float right Problem: Laying out against the flow margin-left margin-right Simple Margin All Floats Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quam float left float right massa, aliquam non, feugiat non, ullamcorper sed, eros. Nullam mattis float left ultrices lectus. Aenean dolor tortor, semper in, aliquam at, faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. All Floats w/ Nested float left Cum sociis natoque margin-left float left float right float right
  62. 62. Box Model IE6 Quirks mode (and earlier IE) have different handling Use strict mode to eliminate this concern
  63. 63. Understanding Floats Flow of block elements
  64. 64. Understanding Floats Flow of block elements Flow of inline elements
  65. 65. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements
  66. 66. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements Floating block elements float left float left third block float left element wraps flow left to right
  67. 67. Understanding Floats Flow of block elements Flow of block elements Lorem ipsum dolor float left sit amet, consectetur block adipiscing elit. Quisque quam massa, aliquam non, feugiat non, ullamcorper sed, eros. element Nullam mattis ultrices lectus. Aenean dolor tortor, semper in, aliquam at, flows around faucibus a, diam. Nam eget urna vitae magna convallis vulputate. Duis tempus mattis ipsum. Cum sociis block above natoque Flow of inline elements Floating block elements float left float left third block float left element wraps flow left to right Clearing floats float left float left flow left to right [clear] after clear, flow returns to vertical for blocks
  68. 68. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned relative to A 5 em 5 em (which is B positioned), not 5 em the document
  69. 69. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely 5 em A B is positioned relative to A 5 em 5 em (which is B positioned), not 5 em the document B positioned absolutely position: relative A B is positioned relative to A 5 em (again B positioned), not 5 em the document
  70. 70. Absolute Positioning It is actually relative to its closest positioned ancestor B positioned absolutely B positioned absolutely 5 em no positioning specified A B is positioned A B is positioned relative to A relative to 5 em 5 em (which is document, not A B positioned), not (since it is not 5 em the document positioned) 5 em B 5 em B positioned absolutely position: relative A B is positioned relative to A 5 em (again B positioned), not 5 em the document
  71. 71. Layout Techniques for Prototyping
  72. 72. Layout Techniques for Prototyping Choose positioning over floats
  73. 73. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  74. 74. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  75. 75. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  76. 76. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  77. 77. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system
  78. 78. Layout Techniques for Prototyping Choose positioning over floats Use a grid layout system Use a CSS framework to simplify life
  79. 79. CSS Frameworks Building on the work of others Hide complexity Simplify the layout process Express layout Define templates and/or grids Normalize browsers CSS Reset Handle IE Objections? Takes away the craftsmanship Non-semantic
  80. 80. CSS Frameworks Elements CSS Frameworks CleverCSS WYMstyle: a CSS framework Tripoli Beta CSS Framework YAML CSS Framework ESWAT Web Project Framework YUI Grids CSS CwS CSS Framework Boilerplate CSS Framework My (not really mine) CSS Framework Blueprint CSS BlueTrip 960 Grid Schema Web Design Framework
  81. 81. CSS Frameworks Elements CSS Frameworks CleverCSS WYMstyle: a CSS framework Tripoli Beta CSS Framework YAML CSS Framework ESWAT Web Project Framework YUI Grids CSS CwS CSS Framework Boilerplate CSS Framework My (not really mine) CSS Framework Blueprint CSS BlueTrip 960 Grid Schema Web Design Framework
  82. 82. Blueprint CSS Framework
  83. 83. Blueprint CSS Framework
  84. 84. Blueprint CSS Framework
  85. 85. Blueprint CSS Framework
  86. 86. Blueprint CSS Framework Layout is specified 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.
  87. 87. YUI Grid Builder
  88. 88. YUI Grid Cheat Sheet
  89. 89. YUI Grid Cheat Sheet
  90. 90. 960 Grid
  91. 91. 960 Grid
  92. 92. 960 Grid
  93. 93. 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 flexible base number to work with You can also make Blueprint a 960 grid system as well
  94. 94. 960 gs Fluid A derivative that supports fluid layout
  95. 95. Less CSS CSS Pre-processor http://lesscss.org/
  96. 96. Less CSS CSS Pre-processor http://lesscss.org/
  97. 97. Less CSS CSS Pre-processor http://lesscss.org/
  98. 98. Less CSS CSS Pre-processor http://lesscss.org/
  99. 99. 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
  100. 100. 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 "Big, Bold, and Ugly" A Paragraph Is a Paragraph List Mania Keep DIV elements to a minimum Use px for font-sizes (avoids nesting difficulties) Minimize selectors Extend objects by applying multiple classes to an element
  101. 101. Behavior Making the page come alive* *as quickly as possible
  102. 102. Anatomy of an Interaction
  103. 103. Anatomy of an Interaction Page Element Target an element or elements for attaching events & behaviors.
  104. 104. 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.
  105. 105. 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.
  106. 106. 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.
  107. 107. 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 Blocks of logic, patterns, actions that Handler operate on elements. Behavior
  108. 108. 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 fir e Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Blocks of logic, patterns, actions that Handler operate on elements. rm fo p er Behavior
  109. 109. 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 fir e Events are the glue between the user and behaviors. They start behaviors. Behavior modify Event Blocks of logic, patterns, actions that Handler operate on elements. rm fo p er Behavior “Keep interaction, objects and behavior separate”
  110. 110. Behavior Injection Tying behavior to elements in the markup tightly couples behavior (also non-semantic) Avoid onclick=”someAction()” Instead associate actions with matched elements
  111. 111. Behavior Injection By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  112. 112. Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  113. 113. Behavior Injection .noerrors, .errors, .forgotten: {display:none;} By rendering all panels hidden & showing with JS <form id="login" action=""> <!-- Without Errors--> <div class=”noerrors”> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </div> $(".errors").show(); <!-- With Errors--> <div class=”errors”> <p class="error">Password doesn't match.</p> <p><label>Username: </label><input type="text" name="username"/></p> <p><label>Password: </label><input type="password" name="password"/></p> <input type="submit" value="Submit" /> </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="text" name="email"/></p> <input type="submit" value="Send New Password" /> </div> </form> Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
  114. 114. Behavior Injection: 960gs Fluid
  115. 115. Behavior Injection: 960gs Fluid <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul>
  116. 116. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul>
  117. 117. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> toggle open/close tied to .box
  118. 118. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class="nav main"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> toggle open/close tied to .box menu behavior tied to .menu
  119. 119. Protoscript Experimental framework for behavior injection
  120. 120. Example
  121. 121. Protoscript: Sprinkling in Behaviors
  122. 122. Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
  123. 123. Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
  124. 124. Anatomy of Self-Healing Delete DOM elements [X] DOM <LI>[X] oldmove.mov</LI> Element Events Click Event onClick (callback) Behaviors Fade Behavior Close
  125. 125. Anatomy of Self-Healing Delete Element Behavior Event
  126. 126. Anatomy of Self-Healing Delete Element Behavior Event
  127. 127. Anatomy of Self-Healing Delete $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  128. 128. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  129. 129. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  130. 130. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  131. 131. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  132. 132. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  133. 133. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  134. 134. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  135. 135. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  136. 136. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  137. 137. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  138. 138. Behaviors Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. Element ToggleShowHide. FetchHtml. SetHtml. Behavior Event
  139. 139. 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
  140. 140. Events Blur. Click. Dblclick. Focus. Keypress. Mousedown. Mousemove. Mouseout. Mouseover. Mouseup. Timer. Element Behavior Event
  141. 141. Callbacks onComplete. onTween. onStart. onClose. onStartDrag. onDrag. onDragEnter. onDragOver. onDragDrop. onDragOut. onEndDrag. onMouseUp. onInvalidDrop. onBlur. onClick. onDblClick. onFocus. onKeypress. onMousedown. onMousemove. onMouseout. onMouseover. onMouseup. onTimer. onHide. onOpen. onReplaceClass. onSetClass. onSetStyle. onShow. onToggleClass. Element onToggleOpenClose. onToggleShowHide. onSuccess. onFailure. onSetHtml. Behavior Event
  142. 142. jQuery Easy to layer in behavior Easy to keep behavior separate Simple, quick, terse syntax $(“div”).addClass(“highlighted”); <div class=”module”> <h2>Some Header</h2> <div class=”bd”> <p>Some content</p> </div> Element Behavior <div class=”ft”> <p>Footer content</p> </div> </div> $(“.ft”).click(function () { $(this). addClass(“highlighted”); }); Element Events Behavior
  143. 143. jQuery Behaviors Behavior html. append. prepend. before. after. wrap. show. hide. toggle. slideDown. slideUp. fadeIn. fadeOut. animate. css. offset. position. height. width. addClass. attr. removeClass. toggleClass. val. + over 1000 plugins
  144. 144. jQuery Events Event bind. trigger. hover. toggle. blur. change. click. dlbclick. error. focus. keydown. keypress. keyup. load. mousedown. mousemove. mouseout. mouseover. mouseup. resize. scroll. select. submit. unload.
  145. 145. ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category
  146. 146. ClassBehaviors jQuery Library http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category <fieldset class="border"> <label for="myselect">Select Anything<em>*</em>:</label> <select id="myselect" name="myselect" class="linkedSelects id_myLinkedSelect"> <option value="">--- pick a type ---</option> <option value="./xml/linkedSelects_fruit.xml">Fruit</option> <option value="./xml/linkedSelects_vegetables.xml">Vegetables</option> <option value="./xml/linkedSelects_fish.xml">Fish</option> </select> <select id="myLinkedSelect" name="myLinkedSelect"> <option value="">--- pick a type first ---</option> </select> </fieldset>
  147. 147. 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
  148. 148. Greasemonkey + jQuery
  149. 149. Greasemonkey + jQuery jquery code can be loaded for any web page allowing behaviors to be added
  150. 150. Firebug Edit HTML For quick adding of html or modifying html during a prototype review Edit CSS Change behaviors, layout or style on the fly Layout issues Visualize the box model & page layout Manipulate Javascript Change logic, add behaviors, experiment & tweak
  151. 151. 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 Specificity 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 to tweak & debug
  152. 152. Data/Content Approximating reality
  153. 153. jQuery Data Binding jQuery.ajax(options) $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); Very quick way to bring in dynamic interface elements
  154. 154. Use Public APIs Yahoo! Search Google Search Flickr images Google Maps
  155. 155. Use JSON {"name": "Jack B. Nimble", "at large": true, "grade": "A", "level": 3} name Jack B. Nimble at large true grade A level 3
  156. 156. JSON: Arrays ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] [ [0, -1, 0], [1, 0, 0], [0, 0, 1] ] 3x3 array
  157. 157. JSON in jQuery jQuery.getJSON(url, [data], [callback]) $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); } );
  158. 158. JSON Example $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; // only get 4 images }); } ); ({ "title": "Recent Uploads tagged cat", "link": "http://www.flickr.com/photos/tags/cat/", "description": "", "modified": "2009-03-09T02:00:41Z", "generator": "http://www.flickr.com/", "items": [ { "title": "birthday 89", "link": "http://www.flickr.com/photos/gulshan/3340193322/", "media": {"m":"http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpg"}, "date_taken": "2009-03-08T03:11:50-08:00", "description": "<p><a href="http://www.flickr.com/people/gulshan/">gulshan</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/gulshan/3340193322/" title= "birthday 89"><img src="http://farm4.static.flickr.com/3405/3340193322_065facd48d_m.jpg" width="240" height="160" alt="birthday 89" /></a></p> ", "published": "2009-03-09T02:00:41Z", "author": "nobody@flickr.com (gulshan)", "author_id": "88283245@N00", "tags": "birthday party me brooklyn cat photobooth marcus 2009" },
  159. 159. Use YQL
  160. 160. Use Dapper (Screen Scraping)
  161. 161. Use Dapper (Screen Scraping)
  162. 162. Use Dapper (Screen Scraping)
  163. 163. Use Dapper (Screen Scraping)
  164. 164. Use Dapper (Screen Scraping)
  165. 165. Use Dapper (Screen Scraping)
  166. 166. Prototyping Challenges View. Layout, Style & Structure Getting the page laid out correctly (enough) & quickly Behavior Adding interactivity to the page Data Populating the prototype with fake or semi-realistic data
  167. 167. Resources Book: CSS:The Missing Manual http://css.maxdesign.com.au/floatutorial/ http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/ http://www.blueprintcss.org/ http://www.scribd.com/doc/3592303/Blueprint-CSS-framework-version-071-cheat-sheet http://kematzy.com/blueprint-generator/ http://mdaines.com/plumb/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/grids/builder/
  168. 168. Resources http://yuiblog.com/assets/pdf/cheatsheets/css.pdf http://www.designbygrid.com/ http://www.divitodesign.com/2008/12/960-css-framework-learn-basics/ http://www.divitodesign.com/2009/01/tricks-to-solve-960-css-framework-problems/ http://www.mostinspired.com/blog/2009/01/28/rapid-interactive-prototyping/ (with jquery) http://www.domain7.com/WhoWeAre/StephenBau.html (built the moo tools version of fluid) http://www.mostinspired.com/blog/wp-content/uploads/2009/rip/16_fluid_jquery/ http://honeyl.public.iastate.edu/blueprint/ http://code.google.com/p/css-boilerplate/ http://jdclayton.com/blueprints_compress_a_walkthrough.html
  169. 169. Resources http://lab.christianmontoya.com/read/ http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-on- blueprint/ http://habilis.net/cssmixin/ http://particletree.com/features/ajax-wireframing-approaches/ http://designinfluences.com/fluid960gs/ http://www.protoscript.com http://www.woollymittens.nl/default.php?id=classbehaviour- examples&cat=classbehaviour&mod=category http://joanpiedra.com/jquery/greasemonkey/ http://www.getfirebug.com/ http://particletree.com/features/a-designers-guide-to-prototyping-ajax/ http://json.org http://www.dapper.net/dapperDemo/ http://developer.yahoo.com/yql/ http://designingwebinterfaces.com/resources/interestingmomentsgrid.xls
  170. 170. Photo Credits http://www.flickr.com/photos/yerro/2310015018/ http://flickr.com/photos/totoro_zine/2341347265/ http://www.flickr.com/photos/rohdesign/2610114400/ http://en.wikipedia.org/wiki/ Internet_Explorer_box_model_bug
  171. 171. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×