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!

There is NO one-size-fits-all solution

#1

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

Responsive

Server decides the page view

Adaptive

Sever controller sniffs user agent & decides which view to render

Adaptive

Suitable for highly interactive pages & SPAs

Adaptive

Client & server work together and render optimized experience

Fusion – RESS*

*REsponsive web design + Server Side components

e.g.

• Layout is done responsively

• Server decides on which JS/modules/templates to include

Fusion

Pages with moderate interaction –Most eBay pages

Fusion

Events

#2

Events == Desktop + Swipe

• Tiny (650 bytes) jQuery plugin to handle swipe events

• Can be included unconditionally to enhance user experience

jquery.tactile.js

• Clicks are delayed by 300ms

• Use FastClick for highly interactive pages

Clicks

• Mouse events – mouseenter, mouseleave etc.

• :hover pseudo-class selector

Avoid

• CSS based animations

• requestAnimationFrame API

• Paint only what is needed

16ms is all you got!

Pixel is not a Pixel

#3

Viewport

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

Viewport

Desktop == Tablet Landscape

Use orientation (portrait & landscape) media queries with caution

Viewport

Responsive Images

They are not there yet!

Responsive Images

#container {background-image:url(‘desktop.png’)\9; // IE8 hackwidth: 200px;

}@media (min-width: 961px) {

#container { background-image:url('desktop.png'); }}@media (max-width: 960px) {

#container { background-image:url('tablet.png'); width:100px; }}

Scrolling

expect the unexpected

#4

• Simulating natural scroll is very hard & confusing

• Add scope buffers

-webkit-overflow-scrolling:touch

Timesaver

Use Event Debouncing

Google 0r Stackoverflow may not provide the right solutions

Remove the annoyance

#5

• Tiny click area (< 44px)

• Hover state functionality

• Tightly cluttered design

Avoid

Work with your designers from Day Zero

There is NO IE6, 7 or 8

Good News

Android* == IE

*Newer ones are better

Bad News

Thank You