creating an intuitive multi-screen experience
TRANSCRIPT
![Page 1: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/1.jpg)
Creating an Intuitive Multi-screen Experience
senthil
![Page 2: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/2.jpg)
The secret sauce to provide an awesome multi-screen
experience…
![Page 3: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/3.jpg)
There is none!
![Page 4: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/4.jpg)
There is none no one!
![Page 5: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/5.jpg)
There is NO one-size-fits-all solution
#1
![Page 6: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/6.jpg)
The client decides on how the page should be rendered
Responsive
![Page 7: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/7.jpg)
CSS media queries
Fluid Layout using percentages
Responsive
![Page 8: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/8.jpg)
Suitable for read-only web pages
Responsive
![Page 9: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/9.jpg)
Server decides the page view
Adaptive
![Page 10: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/10.jpg)
Sever controller sniffs user agent & decides which view to render
Adaptive
![Page 11: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/11.jpg)
Suitable for highly interactive pages & SPAs
Adaptive
![Page 12: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/12.jpg)
Client & server work together and render optimized experience
Fusion – RESS*
*REsponsive web design + Server Side components
![Page 13: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/13.jpg)
e.g.
• Layout is done responsively
• Server decides on which JS/modules/templates to include
Fusion
![Page 14: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/14.jpg)
Pages with moderate interaction –Most eBay pages
Fusion
![Page 15: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/15.jpg)
Events
#2
![Page 16: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/16.jpg)
Events == Desktop + Swipe
![Page 17: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/17.jpg)
• Tiny (650 bytes) jQuery plugin to handle swipe events
• Can be included unconditionally to enhance user experience
jquery.tactile.js
![Page 18: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/18.jpg)
• Clicks are delayed by 300ms
• Use FastClick for highly interactive pages
Clicks
![Page 19: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/19.jpg)
• Mouse events – mouseenter, mouseleave etc.
• :hover pseudo-class selector
Avoid
![Page 20: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/20.jpg)
• CSS based animations
• requestAnimationFrame API
• Paint only what is needed
16ms is all you got!
![Page 21: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/21.jpg)
Pixel is not a Pixel
#3
![Page 22: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/22.jpg)
Viewport
<meta name="viewport" content="width=device-width"/>
![Page 23: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/23.jpg)
Viewport
Desktop == Tablet Landscape
![Page 24: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/24.jpg)
Use orientation (portrait & landscape) media queries with caution
Viewport
![Page 25: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/25.jpg)
Responsive Images
They are not there yet!
![Page 26: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/26.jpg)
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; }}
![Page 27: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/27.jpg)
Scrolling
expect the unexpected
#4
![Page 28: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/28.jpg)
• Simulating natural scroll is very hard & confusing
• Add scope buffers
![Page 29: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/29.jpg)
-webkit-overflow-scrolling:touch
Timesaver
![Page 30: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/30.jpg)
Use Event Debouncing
![Page 31: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/31.jpg)
Google 0r Stackoverflow may not provide the right solutions
![Page 32: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/32.jpg)
Remove the annoyance
#5
![Page 33: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/33.jpg)
• Tiny click area (< 44px)
• Hover state functionality
• Tightly cluttered design
Avoid
![Page 34: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/34.jpg)
Work with your designers from Day Zero
![Page 35: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/35.jpg)
There is NO IE6, 7 or 8
Good News
![Page 36: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/36.jpg)
Android* == IE
*Newer ones are better
Bad News
![Page 37: Creating an Intuitive Multi-screen Experience](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a80dde1a28abba118b4899/html5/thumbnails/37.jpg)
Thank You