際際滷

際際滷Share a Scribd company logo
Creating an Intuitive 
Multi-screen Experience 
senthil
The secret sauce to provide an 
awesome multi-screen 
experience
There is none!
There is none no one!
#1 
There is NO one-size-fits-all 
solution
Responsive 
The client decides on how the page 
should be rendered
Responsive 
CSS media queries 
Fluid Layout using percentages
Responsive 
Suitable for read-only web pages
Adaptive 
Server decides the page view
Adaptive 
Sever controller sniffs user agent & 
decides which view to render
Adaptive 
Suitable for highly interactive 
pages & SPAs
Fusion  RESS* 
Client & server work together and 
render optimized experience 
*REsponsive web design + Server Side components
Fusion 
e.g. 
 Layout is done responsively 
 Server decides on which 
JS/modules/templates to 
include
Fusion 
Pages with moderate interaction  
Most eBay pages
#2 
Events
Events == Desktop + Swipe
jquery.tactile.js 
 Tiny (650 bytes) jQuery plugin 
to handle swipe events 
 Can be included unconditionally 
to enhance user experience
Clicks 
 Clicks are delayed by 300ms 
 Use FastClick for highly 
interactive pages
Avoid 
 Mouse events  mouseenter, 
mouseleave etc. 
 :hover pseudo-class selector
16ms is all you got! 
 CSS based animations 
 requestAnimationFrame API 
 Paint only what is needed
#3 
Pixel is not a Pixel
Viewport 
<meta name="viewport" 
content="width=device-width"/>
Viewport 
Desktop == Tablet Landscape
Viewport 
Use orientation (portrait & landscape) 
media queries with caution
Responsive 
Images 
They are not there yet!
Responsive 
Images 
#container { 
background-image:url(/slideshow/multi-screen-40049851/40049851//slideshow/multi-screen-40049851/40049851/desktop.png)9; // IE8 hack 
width: 200px; 
} 
@media (min-width: 961px) { 
#container { background-image:url(/slideshow/multi-screen-40049851/40049851/&); } 
} 
@media (max-width: 960px) { 
#container { background-image:url(/slideshow/multi-screen-40049851/40049851/&); width:100px; } 
}
#4 
Scrolling 
expect the unexpected
 Simulating natural scroll is very 
hard & confusing 
 Add scope buffers
Timesaver 
-webkit-overflow-scrolling:touch
Use Event Debouncing
Google 0r Stackoverflow may not 
provide the right solutions
#5 
Remove the annoyance
Avoid 
 Tiny click area (< 44px) 
 Hover state functionality 
 Tightly cluttered design
Work with your designers from 
Day Zero
Good News 
There is NO IE6, 7 or 8
Bad News 
Android* == IE 
*Newer ones are better
Thank You

More Related Content

Creating an Intuitive Multi-screen Experience

Editor's Notes

  • #31: The debounce function can throttle requests, based on the provided delay. Extremely useful for event handlers fired at a high rate