Best engineering practices and tips for creating an intuitive multi-screen experience.

1. Creating an Intuitive
Multi-screen Experience
senthil

2. The secret sauce to provide an
awesome multi-screen
experience…

3. There is none!

4. There is none no one!

5. #1
There is NO one-size-fits-all
solution

6. Responsive
The client decides on how the page
should be rendered

7. Responsive
CSS media queries
Fluid Layout using percentages

8. Responsive
Suitable for read-only web pages

9. Adaptive
Server decides the page view

10. Adaptive
Sever controller sniffs user agent &
decides which view to render

11. Adaptive
Suitable for highly interactive
pages & SPAs

12. Fusion – RESS*
Client & server work together and
render optimized experience
*REsponsive web design + Server Side components

13. Fusion
e.g.
• Layout is done responsively
• Server decides on which
JS/modules/templates to
include

14. Fusion
Pages with moderate interaction –
Most eBay pages

15. #2
Events

16. Events == Desktop + Swipe

17. jquery.tactile.js
• Tiny (650 bytes) jQuery plugin
to handle swipe events
• Can be included unconditionally
to enhance user experience

18. Clicks
• Clicks are delayed by 300ms
• Use FastClick for highly
interactive pages

19. Avoid
• Mouse events – mouseenter,
mouseleave etc.
• :hover pseudo-class selector

20. 16ms is all you got!
• CSS based animations
• requestAnimationFrame API
• Paint only what is needed

21. #3
Pixel is not a Pixel

22. Viewport
<meta name="viewport"
content="width=device-width"/>

23. Viewport
Desktop == Tablet Landscape

24. Viewport
Use orientation (portrait & landscape)
media queries with caution

25. Responsive
Images
They are not there yet!

26. Responsive
Images
#container {
background-image:url(‘desktop.png’)9; // IE8 hack
width: 200px;
}
@media (min-width: 961px) {
#container { background-image:url('desktop.png'); }
}
@media (max-width: 960px) {
#container { background-image:url('tablet.png'); width:100px; }
}

27. #4
Scrolling
expect the unexpected

28. • Simulating natural scroll is very
hard & confusing
• Add scope buffers

29. Timesaver
-webkit-overflow-scrolling:touch

30. Use Event Debouncing

31. Google 0r Stackoverflow may not
provide the right solutions

32. #5
Remove the annoyance

33. Avoid
• Tiny click area (< 44px)
• Hover state functionality
• Tightly cluttered design

34. Work with your designers from
Day Zero

35. Good News
There is NO IE6, 7 or 8

36. Bad News
Android* == IE
*Newer ones are better

37. Thank You