SlideShare a Scribd company logo
1 of 157
Download to read offline
Interactive Prototyping with DHTML
Interactive Prototyping
              with DHTML
tips, techniques, tools, libraries and frameworks for rapid prototyping

                               Mix 09
                              Bill Scott
                           Mar. 19th, 2009
My Background
the challenge
 interaction is dynamic
Interaction is Nuanced
Interaction is Nuanced


ickr. inline edit
Interaction is Nuanced


 ickr. inline edit




y! teachers. drag & drop
Interaction is Nuanced

                           backpackit. contextual tools




 ickr. inline edit




y! teachers. drag & drop
Interaction is Nuanced

                           backpackit. contextual tools




 ickr. inline edit




y! teachers. drag & drop   the gap. inline assistant
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 scrolling
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 - resolved
y! teachers. anti-pattern. hover & cover
Devil is in the Details




                                           y! teachers. anti-pattern. hover & cover - resolved
y! teachers. anti-pattern. hover & cover
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-pattern. mouse trap
Timing Concerns
                                    timing is important
                                makes actions seem faster
                  slows down interaction for understanding
                                       reveals state change
                      shows relationships between objects
                                          focuses attention
Timing Concerns
                                    timing is important
                                makes actions seem faster
                  slows down interaction for understanding
                                       reveals state change
                      shows relationships between objects
                                          focuses attention
Timing Concerns
                                    timing is important
                                makes actions seem faster
                  slows down interaction for understanding
                                       reveals state change
                      shows relationships between objects
                                          focuses attention
Timing Concerns
                                    timing is important
                                makes actions seem faster
                  slows down interaction for understanding
                                       reveals state change
                      shows relationships between objects
                                          focuses attention
Timing Concerns
                                    timing is important
                                makes actions seem faster
                  slows down interaction for understanding
                                       reveals state change
                      shows relationships between objects
                                          focuses attention
Timing Concerns
                                    timing is important
                                makes actions seem faster
                  slows down interaction for understanding
                                       reveals state change
                      shows relationships between objects
                                          focuses attention
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



                                              my yahoo!. version 3
prototyping with DHTML
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
100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 weeks later
100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 weeks later
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
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
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
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
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”
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
Layout
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 layout
     bugs


                   3   rendering
                       engines
It’s Not That Easy
                              9    ways to layout
                                   columns

14   IE 6 layout
     bugs


                   3   rendering
                       engines

                                           8    major
                                                browsers
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
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
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
Box Model
IE6 Quirks mode (and earlier IE) have di erent 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
                                                       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
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
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
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
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
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
Layout Techniques
Layout Techniques
Choose positioning over oats
Layout Techniques
Choose positioning over oats
Use a grid layout system
Layout Techniques
Choose positioning over oats
Use a grid layout system
Layout Techniques
Choose positioning over oats
Use a grid layout system
Layout Techniques
Choose positioning over oats
Use a grid layout system
Layout Techniques
Choose positioning over oats
Use a grid layout system
Layout Techniques
Choose positioning over oats
Use a grid layout system




Use a CSS framework to simplify life
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
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
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
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework
Blueprint CSS Framework
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.
Interactive Prototyping with DHTML
Interactive Prototyping with DHTML
Interactive Prototyping with DHTML
Interactive Prototyping with DHTML
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, 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
960 gs Fluid
A derivative that supports uid layout
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
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
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
Events are the glue between the user and
behaviors. They start behaviors.
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.
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.
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
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
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”
Behavior Injection
Tying behavior to elements in the markup tightly couples
behavior (also non-semantic)
Avoid onclick=”someAction()”

Instead associate actions with matched elements
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
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
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
Behavior Injection: 960gs Fluid
Behavior Injection: 960gs Fluid
<ul class=quot;nav mainquot;>
     <li><a href=quot;#quot;>Menu 1</a>
          <ul>
               <li><a href=quot;#quot;>Submenu   1</a></li>
               <li><a href=quot;#quot;>Submenu   2</a></li>
               <li><a href=quot;#quot;>Submenu   3</a></li>
               <li><a href=quot;#quot;>Submenu   4</a></li>
               <li><a href=quot;#quot;>Submenu   5</a></li>
          </ul>
     </li>
     <li><a href=quot;#quot;>Menu 2</a>
          <ul>
Behavior Injection: 960gs Fluid
                       menu behavior tied to
                          .nav & .main

<ul class=quot;nav mainquot;>
     <li><a href=quot;#quot;>Menu 1</a>
          <ul>
               <li><a href=quot;#quot;>Submenu   1</a></li>
               <li><a href=quot;#quot;>Submenu   2</a></li>
               <li><a href=quot;#quot;>Submenu   3</a></li>
               <li><a href=quot;#quot;>Submenu   4</a></li>
               <li><a href=quot;#quot;>Submenu   5</a></li>
          </ul>
     </li>
     <li><a href=quot;#quot;>Menu 2</a>
          <ul>
Behavior Injection: 960gs Fluid
                       menu behavior tied to
                          .nav & .main

<ul class=quot;nav mainquot;>
     <li><a href=quot;#quot;>Menu 1</a>
          <ul>
               <li><a href=quot;#quot;>Submenu   1</a></li>
               <li><a href=quot;#quot;>Submenu   2</a></li>
               <li><a href=quot;#quot;>Submenu   3</a></li>
               <li><a href=quot;#quot;>Submenu   4</a></li>
               <li><a href=quot;#quot;>Submenu   5</a></li>
          </ul>
     </li>
     <li><a href=quot;#quot;>Menu 2</a>
          <ul>                                        toggle open/close tied
                                                              to .box
Behavior Injection: 960gs Fluid
                       menu behavior tied to
                          .nav & .main

<ul class=quot;nav mainquot;>
     <li><a href=quot;#quot;>Menu 1</a>
          <ul>
               <li><a href=quot;#quot;>Submenu   1</a></li>
               <li><a href=quot;#quot;>Submenu   2</a></li>
               <li><a href=quot;#quot;>Submenu   3</a></li>
               <li><a href=quot;#quot;>Submenu   4</a></li>
               <li><a href=quot;#quot;>Submenu   5</a></li>
          </ul>
     </li>
     <li><a href=quot;#quot;>Menu 2</a>
          <ul>                                        toggle open/close tied
                                                              to .box



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




Events
Click                                 Event
onClick (callback)




Behaviors
                           Behavior
Fade
Close
Anatomy of Self-Healing Delete
DOM elements
                            DOM
[X]
                           Element
<LI>[X] oldmove.mov</LI>




Events
Click                                 Event
onClick (callback)




Behaviors
                           Behavior
Fade
Close
Anatomy of Self-Healing Delete
DOM elements
                            DOM
[X]
                           Element
<LI>[X] oldmove.mov</LI>




Events
Click                                 Event
onClick (callback)




Behaviors
                           Behavior
Fade
Close
Anatomy of Self-Healing Delete



                                 Element




                                 Behavior




                                  Event
Anatomy of Self-Healing Delete



                                 Element




                                 Behavior




                                  Event
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
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Selecting DOM Elements


$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade: {                       Element
         target: '#multiple li',
         opacity: {to: 0},
         onComplete: {Close : {} }
                                     Behavior
       }
     }
  },
                                      Event
});
Behaviors
     Animate. ColorAnimate. Fade.
         Move. Spotlight. Close.
         DragDrop. Hide. Open.
       Popup. ReplaceClass. Script.
        SetClass. SetStyle. Show.
     ToggleClass. ToggleOpenClose.    Element

      ToggleShowHide. FetchHtml.
               SetHtml.               Behavior




                                       Event
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
Events

          Blur. Click. Dblclick. Focus.
           Keypress. Mousedown.
           Mousemove. Mouseout.
         Mouseover. Mouseup. Timer.       Element




                                          Behavior




                                           Event
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
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
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
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.
Class Behaviors
Adding classes that represent behavior
Javascript code implements behavior for speci c classes

 <a id=quot;optionquot; class=quot;truequot;>
      <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; />
      <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; />
      Option
      <span class=quot;ifTruequot;>(On)</span>
      <span class=quot;ifFalsequot;>(Off)</span>
 </a>


 .ifTrue, .ifFalse{                                      #option{
     display:none;                                           font-size:.8em;
 }                                                           color:#444;
 .true .ifTrue{                                          }
     display:inline;                                     #option .ifTrue{
 }                                                           color:green;
 .false .ifFalse{                                        }
     display:inline;                                     #option .ifFalse{
 }                                                           color:red;
                                                         }

See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
Class Behaviors
Adding classes that represent behavior
Javascript code implements behavior for speci c classes

 <a id=quot;optionquot; class=quot;truequot;>
      <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; />
      <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; />
      Option
      <span class=quot;ifTruequot;>(On)</span>
      <span class=quot;ifFalsequot;>(Off)</span>
 </a>


 .ifTrue, .ifFalse{                                      #option{
     display:none;                                           font-size:.8em;
 }                                                           color:#444;
 .true .ifTrue{                                          }
     display:inline;                                     #option .ifTrue{
 }                                                           color:green;
 .false .ifFalse{                                        }
     display:inline;                                     #option .ifFalse{
 }                                                           color:red;
                                                         }

See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
Class Behaviors
Adding classes that represent behavior
Javascript code implements behavior for speci c classes

 <a id=quot;optionquot; class=quot;truequot;>
      <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; />
      <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; />
      Option
      <span class=quot;ifTruequot;>(On)</span>
      <span class=quot;ifFalsequot;>(Off)</span>
 </a>


 .ifTrue, .ifFalse{                                      #option{
     display:none;                                           font-size:.8em;
 }                                                           color:#444;
 .true .ifTrue{                                          }
     display:inline;                                     #option .ifTrue{
 }                                                           color:green;
 .false .ifFalse{                                        }
     display:inline;                                     #option .ifFalse{
 }                                                           color:red;
                                                         }

See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
Class Behaviors
Adding classes that represent behavior
Javascript code implements behavior for speci c classes

 <a id=quot;optionquot; class=quot;truequot;>
      <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; />
      <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; />
      Option
      <span class=quot;ifTruequot;>(On)</span>
      <span class=quot;ifFalsequot;>(Off)</span>
 </a>


 .ifTrue, .ifFalse{                                      #option{
     display:none;                                           font-size:.8em;
 }                                                           color:#444;
 .true .ifTrue{                                          }
     display:inline;                                     #option .ifTrue{
 }                                                           color:green;
 .false .ifFalse{                                        }
     display:inline;                                     #option .ifFalse{
 }                                                           color:red;
                                                         }

See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
ClassBehaviors jQuery Library
http://www.woollymittens.nl/default.php?id=classbehaviour-
examples&cat=classbehaviour&mod=category
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>
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
Greasemonkey + jQuery
Greasemonkey + jQuery
                  jquery code can
               be loaded for any web
             page allowing behaviors to
                    be added
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
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
Data/Content
 Approximating reality
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
Use Public APIs
Yahoo! Search
Google Search
Flickr images
Google Maps
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
JSON: Arrays
[quot;Sundayquot;, quot;Mondayquot;, quot;Tuesdayquot;, quot;Wednesdayquot;, quot;Thursdayquot;,
quot;Fridayquot;, quot;Saturdayquot;]
[
[0, -1, 0],
[1, 0, 0],
[0, 0, 1]
]
3x3 array
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;
      });
   }
);
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;

     },
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
Resources
Book: CSS:The Missing Manual
http://css.maxdesign.com.au/ oatutorial/
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/
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
 uid)
http://www.mostinspired.com/blog/wp-content/uploads/2009/rip/16_ uid_jquery/
http://honeyl.public.iastate.edu/blueprint/
http://code.google.com/p/css-boilerplate/
http://jdclayton.com/blueprints_compress_a_walkthrough.html
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://designin uences.com/ uid960gs/
http://www.protoscript.com
http://www.woollymittens.nl/default.php?id=classbehaviour-
examples&cat=classbehaviour&mod=category
http://joanpiedra.com/jquery/greasemonkey/
http://www.get rebug.com/
http://particletree.com/features/a-designers-guide-to-prototyping-ajax/
http://json.org
Photo Credits
http://www. ickr.com/photos/yerro/2310015018/
http:// ickr.com/photos/totoro_zine/2341347265/
http://www. ickr.com/photos/rohdesign/2610114400/
http://en.wikipedia.org/wiki/
Internet_Explorer_box_model_bug
We are hiring
Both UX Designer & UI Engineer positions open
Questions?

More Related Content

Viewers also liked

Steve's_Resume-Summary 2
Steve's_Resume-Summary 2Steve's_Resume-Summary 2
Steve's_Resume-Summary 2Steve Shuemate
 
glosario de medicamentos
glosario de medicamentos glosario de medicamentos
glosario de medicamentos UPAEP
 
Estadio Nacional - Fundación Futuro
Estadio Nacional - Fundación FuturoEstadio Nacional - Fundación Futuro
Estadio Nacional - Fundación Futuroalimaco
 
Íntegra da manifestação da PRR-5
Íntegra da manifestação da PRR-5Íntegra da manifestação da PRR-5
Íntegra da manifestação da PRR-5guest0739d3c
 
Out of the box – ÖBB Case Study – Gregor Pauser
Out of the box – ÖBB Case Study – Gregor PauserOut of the box – ÖBB Case Study – Gregor Pauser
Out of the box – ÖBB Case Study – Gregor PauserService Design Network
 
Parker Boilers Indirect Pool Heaters
Parker Boilers Indirect Pool HeatersParker Boilers Indirect Pool Heaters
Parker Boilers Indirect Pool HeatersEthan Grabill
 
ecolab sharinfo
ecolab  sharinfoecolab  sharinfo
ecolab sharinfofinance37
 
Kom Godt Igang Med Social Media På Iværksættermessen 2010 i Køge
Kom Godt Igang Med Social Media På Iværksættermessen 2010 i KøgeKom Godt Igang Med Social Media På Iværksættermessen 2010 i Køge
Kom Godt Igang Med Social Media På Iværksættermessen 2010 i KøgeTina ThinkInNewAreas Jonasen
 
Libbitcoin slides
Libbitcoin slidesLibbitcoin slides
Libbitcoin slidesswansontec
 
Organigrami smučarskih zvez
Organigrami smučarskih zvezOrganigrami smučarskih zvez
Organigrami smučarskih zvezsmuciscanet
 
Auto hemoterapia1-100702210013-phpapp02
Auto hemoterapia1-100702210013-phpapp02Auto hemoterapia1-100702210013-phpapp02
Auto hemoterapia1-100702210013-phpapp02sergio oliveira
 
Analisis De Taza Utz
Analisis De Taza   UtzAnalisis De Taza   Utz
Analisis De Taza Utzguest1764cf9a
 
Competencias emocionales para directivos y supervisores
Competencias emocionales para directivos y supervisoresCompetencias emocionales para directivos y supervisores
Competencias emocionales para directivos y supervisoresJuan Pedro Sánchez
 

Viewers also liked (18)

Steve's_Resume-Summary 2
Steve's_Resume-Summary 2Steve's_Resume-Summary 2
Steve's_Resume-Summary 2
 
glosario de medicamentos
glosario de medicamentos glosario de medicamentos
glosario de medicamentos
 
Firefox OS
Firefox OS Firefox OS
Firefox OS
 
Shop Org Dig Mil Pc
Shop Org Dig Mil PcShop Org Dig Mil Pc
Shop Org Dig Mil Pc
 
Estadio Nacional - Fundación Futuro
Estadio Nacional - Fundación FuturoEstadio Nacional - Fundación Futuro
Estadio Nacional - Fundación Futuro
 
Íntegra da manifestação da PRR-5
Íntegra da manifestação da PRR-5Íntegra da manifestação da PRR-5
Íntegra da manifestação da PRR-5
 
Out of the box – ÖBB Case Study – Gregor Pauser
Out of the box – ÖBB Case Study – Gregor PauserOut of the box – ÖBB Case Study – Gregor Pauser
Out of the box – ÖBB Case Study – Gregor Pauser
 
Parker Boilers Indirect Pool Heaters
Parker Boilers Indirect Pool HeatersParker Boilers Indirect Pool Heaters
Parker Boilers Indirect Pool Heaters
 
ecolab sharinfo
ecolab  sharinfoecolab  sharinfo
ecolab sharinfo
 
Welcome to pamplona
Welcome to pamplonaWelcome to pamplona
Welcome to pamplona
 
Kom Godt Igang Med Social Media På Iværksættermessen 2010 i Køge
Kom Godt Igang Med Social Media På Iværksættermessen 2010 i KøgeKom Godt Igang Med Social Media På Iværksættermessen 2010 i Køge
Kom Godt Igang Med Social Media På Iværksættermessen 2010 i Køge
 
Libbitcoin slides
Libbitcoin slidesLibbitcoin slides
Libbitcoin slides
 
Presentación patum
Presentación patumPresentación patum
Presentación patum
 
Organigrami smučarskih zvez
Organigrami smučarskih zvezOrganigrami smučarskih zvez
Organigrami smučarskih zvez
 
Auto hemoterapia1-100702210013-phpapp02
Auto hemoterapia1-100702210013-phpapp02Auto hemoterapia1-100702210013-phpapp02
Auto hemoterapia1-100702210013-phpapp02
 
Analisis De Taza Utz
Analisis De Taza   UtzAnalisis De Taza   Utz
Analisis De Taza Utz
 
Competencias emocionales para directivos y supervisores
Competencias emocionales para directivos y supervisoresCompetencias emocionales para directivos y supervisores
Competencias emocionales para directivos y supervisores
 
RESUMEN CONTACTO
RESUMEN CONTACTORESUMEN CONTACTO
RESUMEN CONTACTO
 

More from Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup EthosBill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to LifeBill Scott
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013Bill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalBill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsBill Scott
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Bill Scott
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JSBill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesBill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalBill Scott
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech StackBill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-PatternsBill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Bill Scott
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampBill Scott
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting MomentsBill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to LifeBill Scott
 
Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastBill Scott
 

More from Bill Scott (20)

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup Ethos
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partner
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX Teams
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building Experiences
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypal
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting Moments
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
 
Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly Webcast
 

Recently uploaded

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 

Recently uploaded (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 

Interactive Prototyping with DHTML

  • 2. Interactive Prototyping with DHTML tips, techniques, tools, libraries and frameworks for rapid prototyping Mix 09 Bill Scott Mar. 19th, 2009
  • 7. Interaction is Nuanced ickr. inline edit y! teachers. drag & drop
  • 8. Interaction is Nuanced backpackit. contextual tools ickr. inline edit y! teachers. drag & drop
  • 9. Interaction is Nuanced backpackit. contextual tools ickr. inline edit y! teachers. drag & drop the gap. inline assistant
  • 11. Interaction is Nuanced the gap. inline assistant
  • 12. Interaction is Nuanced the gap. inline assistant microsoft live. paged scrolling
  • 13. Interaction is Nuanced the gap. inline assistant broadmoor hotel. one page checkout microsoft live. paged scrolling
  • 14. Devil is in the Details
  • 15. Devil is in the Details y! teachers. anti-pattern. hover & cover
  • 16. Devil is in the Details y! teachers. anti-pattern. hover & cover
  • 17. Devil is in the Details y! teachers. anti-pattern. hover & cover - resolved y! teachers. anti-pattern. hover & cover
  • 18. Devil is in the Details y! teachers. anti-pattern. hover & cover - resolved y! teachers. anti-pattern. hover & cover
  • 19. Devil is in the Details
  • 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
  • 30. Timing Concerns my yahoo!. version 1 my yahoo!. version 2
  • 31. Timing Concerns my yahoo!. version 1 my yahoo!. version 2 my yahoo!. version 3
  • 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
  • 42. Layout Putting everything where it should be as quickly as possible* *with minimal hacking
  • 43. It’s Not That Easy 14 IE 6 layout bugs
  • 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
  • 52. Understanding Floats Flow of block elements Flow of inline elements
  • 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
  • 61. Layout Techniques Choose positioning over oats Use a grid layout system
  • 62. Layout Techniques Choose positioning over oats Use a grid layout system
  • 63. Layout Techniques Choose positioning over oats Use a grid layout system
  • 64. Layout Techniques Choose positioning over oats Use a grid layout system
  • 65. Layout Techniques Choose positioning over oats Use a grid layout system
  • 66. Layout Techniques Choose positioning over oats Use a grid layout system Use a CSS framework to simplify life
  • 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.
  • 80. YUI Grid Cheat Sheet
  • 81. YUI Grid Cheat Sheet
  • 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
  • 86. 960 gs Fluid A derivative that supports uid layout
  • 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
  • 89. Behavior Making the page come alive* *as quickly as possible
  • 90. Anatomy of an Interaction
  • 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
  • 103. Behavior Injection: 960gs Fluid <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul>
  • 104. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul>
  • 105. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul> toggle open/close tied to .box
  • 106. Behavior Injection: 960gs Fluid menu behavior tied to .nav & .main <ul class=quot;nav mainquot;> <li><a href=quot;#quot;>Menu 1</a> <ul> <li><a href=quot;#quot;>Submenu 1</a></li> <li><a href=quot;#quot;>Submenu 2</a></li> <li><a href=quot;#quot;>Submenu 3</a></li> <li><a href=quot;#quot;>Submenu 4</a></li> <li><a href=quot;#quot;>Submenu 5</a></li> </ul> </li> <li><a href=quot;#quot;>Menu 2</a> <ul> toggle open/close tied to .box menu behavior tied to .menu
  • 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
  • 113. Anatomy of Self-Healing Delete Element Behavior Event
  • 114. Anatomy of Self-Healing Delete Element Behavior Event
  • 115. 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 });
  • 116. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 117. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 118. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 119. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 120. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 121. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 122. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 123. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 124. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 125. Selecting DOM Elements $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event });
  • 126. Behaviors Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. Element ToggleShowHide. FetchHtml. SetHtml. Behavior Event
  • 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
  • 128. Events Blur. Click. Dblclick. Focus. Keypress. Mousedown. Mousemove. Mouseout. Mouseover. Mouseup. Timer. Element Behavior Event
  • 129. 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
  • 130. 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
  • 131. 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
  • 132. 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.
  • 133. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  • 134. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  • 135. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  • 136. Class Behaviors Adding classes that represent behavior Javascript code implements behavior for speci c classes <a id=quot;optionquot; class=quot;truequot;> <img class=quot;ifTruequot; src=quot;/images/icons/star.gifquot; alt=quot;Bright Starquot; /> <img class=quot;ifFalsequot; src=quot;/images/icons/stardim.gifquot; alt=quot;Dimmed Starquot; /> Option <span class=quot;ifTruequot;>(On)</span> <span class=quot;ifFalsequot;>(Off)</span> </a> .ifTrue, .ifFalse{ #option{ display:none; font-size:.8em; } color:#444; .true .ifTrue{ } display:inline; #option .ifTrue{ } color:green; .false .ifFalse{ } display:inline; #option .ifFalse{ } color:red; } See Kevin Hale’s article on Ajax Wireframing Approaches: CSS Boolean
  • 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
  • 146. Use Public APIs Yahoo! Search Google Search Flickr images Google Maps
  • 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
  • 148. JSON: Arrays [quot;Sundayquot;, quot;Mondayquot;, quot;Tuesdayquot;, quot;Wednesdayquot;, quot;Thursdayquot;, quot;Fridayquot;, quot;Saturdayquot;] [ [0, -1, 0], [1, 0, 0], [0, 0, 1] ] 3x3 array
  • 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
  • 152. Resources Book: CSS:The Missing Manual http://css.maxdesign.com.au/ oatutorial/ 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/
  • 153. 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 uid) http://www.mostinspired.com/blog/wp-content/uploads/2009/rip/16_ uid_jquery/ http://honeyl.public.iastate.edu/blueprint/ http://code.google.com/p/css-boilerplate/ http://jdclayton.com/blueprints_compress_a_walkthrough.html
  • 155. Photo Credits http://www. ickr.com/photos/yerro/2310015018/ http:// ickr.com/photos/totoro_zine/2341347265/ http://www. ickr.com/photos/rohdesign/2610114400/ http://en.wikipedia.org/wiki/ Internet_Explorer_box_model_bug
  • 156. We are hiring Both UX Designer & UI Engineer positions open