Skill Session - Web Multi Device


Published on

Technical tips how to develop multi-device web apps.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Skill Session - Web Multi Device

  1. 1. Responsive Web Design & Mobile Web Development A Technical and Business approach
  2. 2. WHY WE SHOULD GO ON WEB ? <ul><li>And now what ? </li></ul>
  3. 4. Why Web ? <ul><li>The WEB is the final approach to aim natively virtually all screened devices </li></ul>
  4. 5. SAME TECHNOLOGY, DIFFERENT BEHAVIOR ? <ul><li>Web-Sites, </li></ul>
  5. 6. What about web ? <ul><li>There is and there should be </li></ul><ul><li>No Desktop Web </li></ul><ul><li>No Internet Explorer Web </li></ul><ul><li>No Mobile Web </li></ul><ul><li>No Blackberry Web </li></ul><ul><li>No Tablet Web </li></ul>
  6. 7. Web ? What Web ?
  7. 8. Web ? What Web ?   One Web  means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices - Mobile Web Best Practices 1.0 - 2008
  8. 9. <ul><li>http:// dowebsitesneedtolookexactlythesameineverybrowser .com/ </li></ul>
  9. 10. GIVE US SOME CONCRETE <ul><li>So ?! </li></ul>
  10. 11. Interests of the Any Web devices approaches <ul><li>Our goal is to design Web Pages available and optimized on all web-able devices </li></ul><ul><li>Two short term goals : </li></ul><ul><ul><li>Create unique Websites for all devices ! </li></ul></ul><ul><ul><li>Create Web App for mobile devices </li></ul></ul><ul><ul><li>, with native equivalent quality </li></ul></ul><ul><ul><ul><li> , </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  11. 12. Interests of the Any Web devices approaches <ul><li>Our goal is to design Web Pages available and optimized on all web-able devices </li></ul><ul><li>One long term goal : </li></ul><ul><ul><li>Create ________ an _____ , _____ , ___ , ____ </li></ul></ul><ul><ul><ul><li>____________________ </li></ul></ul></ul><ul><ul><ul><li>___________ </li></ul></ul></ul>industrially Unique Smooth Sexy Fast <ul><ul><ul><li>Single Page Web App </li></ul></ul></ul><ul><ul><ul><li>for all devices ! </li></ul></ul></ul>
  12. 13. <ul><li>To Do so, we need so increase our knowledge. </li></ul>
  13. 14. Interests of the Any Web devices approaches <ul><li>Our goal is to design Web Pages available and optimized on all web-able devices </li></ul><ul><li>One long term goals : </li></ul><ul><ul><li>Create an Unique Single Page Web App for all devices ! </li></ul></ul>Navigation Caching URL Testing Browser support Ergonomic designing HTML5 support SEO Javascript
  14. 15. But We (kinda) did it ! <ul><li> </li></ul>
  15. 16. ADAPT OR DIE <ul><li>Create One Web site </li></ul>
  16. 17. What is « Responsive Web design » ?
  17. 18. What is « Responsive Web design » ? <ul><li>How you can deliver a quality experience to your users no matter how large (or small) their screen are . </li></ul>Responsive Design Fluid Grids Flexibles images Media Queries
  18. 19. Why is « Responsive Web design » so hype ? <ul><li>Responsive design is hype because : </li></ul><ul><ul><li>The  « Wahou effect » </li></ul></ul><ul><ul><li>Very visual and so easy to understand </li></ul></ul><ul><ul><li>Seen an easy solution to solve all their problem </li></ul></ul><ul><li>Too hype ? </li></ul><ul><ul><li>Delivering a quality Experience not delivering a great looking web site for any screen size </li></ul></ul><ul><ul><li>It doesn’t solve everything </li></ul></ul>
  19. 20. Adapt or Die <ul><li>As told before, now we have too many devices, many capabilities, ... </li></ul><ul><li>Screen : </li></ul><ul><ul><li>Screen size from 3 to 80” </li></ul></ul><ul><ul><li>Resolution from QVGA to WUXGA </li></ul></ul><ul><li>Interaction: </li></ul><ul><ul><li>touch, mouse, remote, … </li></ul></ul><ul><li>Network : </li></ul><ul><ul><li>Latency from 3ms to 1s </li></ul></ul><ul><ul><li>Bandwidth from 3kB/s to 20MB/s </li></ul></ul><ul><li>Browser support : </li></ul><ul><ul><li>HTML <4 to 5 </li></ul></ul><ul><ul><li>CSS 2 / 3 </li></ul></ul><ul><li>Hardware: </li></ul><ul><ul><li>RAM From 128mo 20go </li></ul></ul><ul><ul><li>CPU from 500mHz to 4*3Ghz </li></ul></ul>
  20. 21. THE MOBILE WEB NIGHTMARE <ul><li>Developers also should adapt </li></ul>
  21. 22. I’m a Mobile Developper <ul><li>I use daily : </li></ul><ul><ul><li>My IDE </li></ul></ul><ul><ul><li>My interface designing tools </li></ul></ul><ul><li>I develop for few devices : </li></ul><ul><ul><li>iOS hardware </li></ul></ul><ul><ul><li>Android Phone & Tablet </li></ul></ul><ul><li>I use a lots : </li></ul><ul><ul><li>Native components </li></ul></ul><ul><ul><li>API </li></ul></ul><ul><li>I use the simulator for debugging </li></ul><ul><li>The documentation on the SDK is rather accurate </li></ul>
  22. 23. I’m a Mobile Developper <ul><li>I‘m asked to get the same results by: </li></ul><ul><ul><li>Using Web Technologies </li></ul></ul><ul><ul><li>Writing Javascript ! </li></ul></ul><ul><ul><li>Move a part of Rendering server Side </li></ul></ul><ul><ul><li>Find the good place for code </li></ul></ul><ul><ul><li>Learn about packaging </li></ul></ul><ul><ul><li>Thinking differently </li></ul></ul><ul><ul><li>Rewriting lot of stuff no more handled by the Native APIs </li></ul></ul>
  23. 24. I am a Desktop Web Designer <ul><li>I develop on </li></ul><ul><ul><li>IE 7, IE8, IE 9 </li></ul></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><li>Chrome </li></ul></ul><ul><li>For simplicity I use fix width </li></ul><ul><li>Debugging on IE is quite difficult </li></ul>
  24. 25. I am a Desktop Web Designer <ul><li>Now I have to develop web app for: </li></ul><ul><ul><li>iOS 3.1.3, iOS 4.2.1, iOS 5.0.1 </li></ul></ul><ul><ul><li>Android 2.2, Android 2.3, Android 4.0 </li></ul></ul><ul><ul><li>Opera Mini, Opera Mobile </li></ul></ul><ul><ul><li>Firefox / Chrome </li></ul></ul><ul><ul><li>IE Mobile </li></ul></ul><ul><ul><li>IE 7, IE8, IE 9 </li></ul></ul><ul><li>And I can’t install them on my computer to test  </li></ul><ul><li>Debugging is worst on mobile than on IE. </li></ul><ul><li>No more fixed width, I do fluid interfaces on very different screen sizes. </li></ul>
  25. 26. I am a Desktop Web Designer <ul><li>And you will be asked: </li></ul><ul><ul><li>To do something small </li></ul></ul><ul><ul><li>With offline support (poor bandwith) </li></ul></ul><ul><ul><li>With smooth animation </li></ul></ul><ul><ul><li>That reacts quickly </li></ul></ul><ul><ul><li>With touch’y features (like facebook, twitter, …) </li></ul></ul><ul><ul><li>That works on every mobile. </li></ul></ul><ul><ul><li>With the same functionalities than the website. </li></ul></ul><ul><ul><li>Original design </li></ul></ul><ul><ul><li>Embedded in apps for every market </li></ul></ul><ul><li>I am not Santa Claus, you will have to choose </li></ul>
  26. 27. One Website For all devices : Adapt to mobile <ul><li>3 strategies </li></ul><ul><ul><li>CSS only </li></ul></ul><ul><ul><li>Framework driven </li></ul></ul><ul><ul><li>Handcrafted </li></ul></ul>
  27. 28. One Website For all devices : CSS only <ul><li>Do media queries, nothing more </li></ul><ul><li>IE handling </li></ul><ul><ul><ul><li>Google-Chrome Frame or Respond.js </li></ul></ul></ul><ul><li>Pros </li></ul><ul><ul><li>Only impact the CSS </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Only simple things client side </li></ul></ul><ul><ul><li>Not reactive interface </li></ul></ul><ul><ul><li>Avoid </li></ul></ul><ul><ul><ul><li>jQuery plugins </li></ul></ul></ul><ul><ul><ul><li>overflow: scroll </li></ul></ul></ul><ul><ul><ul><li>position: fixed </li></ul></ul></ul>
  28. 29. I am a Desktop Web Designer
  29. 30. One Website For all devices : Framework driven <ul><li> </li></ul><ul><li> </li></ul><ul><li>Aiming Mobile + Tablet (+desktop) </li></ul><ul><li>Pros: </li></ul><ul><ul><li>Unified UI </li></ul></ul><ul><ul><li>Touch handling </li></ul></ul><ul><ul><li>Transitions between pages with AJAX partial rendering </li></ul></ul><ul><li>Cons: </li></ul><ul><ul><li>Heavy </li></ul></ul><ul><ul><li>Limited to jQuery Mobile components </li></ul></ul><ul><ul><li>Default CSS not so nice on Desktop </li></ul></ul>
  30. 31. I am a Desktop Web Designer
  31. 32. One Website For all devices : Handcrafted <ul><li>Choose a limited number of devices (2 or 3 max) to test on </li></ul><ul><li>Webkit/Firefox : 80% mobile market </li></ul><ul><ul><li>Forget about IE : Google chrome frame </li></ul></ul><ul><ul><li>Have fun with Zepto on any webkit optimized library </li></ul></ul><ul><ul><li>Normalize touch and click behavior </li></ul></ul><ul><ul><li>Use effects, CSS transitions, … </li></ul></ul>
  32. 33. I am a Desktop Web Designer
  33. 34. WebApp with native equivalent quality <ul><ul><li>If your goal is to design Mobile Web applications and Website </li></ul></ul><ul><ul><li>You should probably think Hybride : </li></ul></ul><ul><ul><ul><li>Encapulsation of web pages in Web Views </li></ul></ul></ul><ul><ul><ul><li>Do navigation in Native </li></ul></ul></ul><ul><ul><ul><li>Use Native components when needed </li></ul></ul></ul><ul><ul><ul><li>Communication between Native and WebView by Extending Javascript </li></ul></ul></ul>
  34. 35. A TOUCHING THOUGHT! <ul><li>Create Mobile Apps with Native Equivalent quality </li></ul>
  35. 36. Touch handling <ul><li>Do nothing </li></ul><ul><li>Terrible user experience: waiting 300ms to know if it’s a click or a double click </li></ul><ul><li>Works well </li></ul>
  36. 37. Touch handling <ul><li>Events </li></ul><ul><ul><li>touchstart </li></ul></ul><ul><ul><li>touchmove </li></ul></ul><ul><ul><li>touchend </li></ul></ul>
  37. 38. Touch handling <ul><li>Yes but : </li></ul><ul><ul><li>Doesn’t work on desktop </li></ul></ul><ul><ul><li>Nor on Windows Phone </li></ul></ul><ul><ul><li>Nor on Opera Mini </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li> </li></ul>
  38. 39. Touch handling <ul><li>$.support.touch = ('ontouchstart' in window) </li></ul><ul><li>if no touch support </li></ul><ul><ul><li>$(‘body’).bind(‘click’, function(e){ </li></ul></ul><ul><ul><ul><li>e.preventDefault(); </li></ul></ul></ul><ul><ul><ul><li>$(‘tap’); </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul>
  39. 40. Touch handling <ul><li>Ok, but </li></ul><ul><ul><li>You have to trigger your router manually every time you click on a link </li></ul></ul><ul><ul><li>You can’t validate forms by clicking on the input[type=«  submit »] </li></ul></ul><ul><ul><li>You can’t open external links in a new tab. </li></ul></ul>
  40. 41. Touch handling <ul><li>Ok but we can do it : </li></ul>var externalLinkRegex = new RegExp(&quot;^([a-z;A-Z;0-9])+:&quot;); // Catch click so no page reload occurs $('body').on('click', 'a', function (e) { var $link = $('a'); var href = $link.attr('href'); // do not prevent click on external links if(!href || !externalLinkRegex.test(href)){ e.preventDefault(); } }); $('body').on('tap', 'a', function (e) { var $link = $('a'); var href = $link.attr('href'); if(!href) return false; if(href === '#') return false; if(externalLinkRegex.test(href)) return true; // only navigate if href is not # router.navigate(href, true); return false; }); // Submit forms $('body').on('tap', 'a', function (e) { var $target = $(; if(!$target.closest('input[type=&quot;submit&quot;]').length) return; var $form = $target.closest('form'); if($form.length){ $form.first().submit(); return false; } });
  41. 42. Touch handling <ul><li>Good but when I click on a link, and an other link appear under my finger, multiple click events are triggered. </li></ul><ul><ul><li>Just give up here…  </li></ul></ul>
  42. 43. Touch handling <ul><li>Don’t do it again. </li></ul><ul><li>Use jQuery Mobile instead. </li></ul>
  43. 44. DISCOVERING A NEW WORLD <ul><li>Technology and spirits </li></ul>
  44. 45. jQuery Mobile <ul><li>jQuery Mobile : </li></ul><ul><ul><li>Support + Browser sniffing </li></ul></ul><ul><ul><li>vMouse + event </li></ul></ul><ul><ul><li>Position fixed without GPU acceleration issue ( Soon in 1.1 < 3 Months) </li></ul></ul><ul><ul><li>Transition between pages </li></ul></ul><ul><ul><li>Partial AJAX rendering </li></ul></ul><ul><ul><li>Unit tests !!! </li></ul></ul><ul><ul><li>Normalized Inputs with native interface for Select </li></ul></ul><ul><ul><ul><li>Butons (with image, grouped, …, flipped), sliders, … </li></ul></ul></ul><ul><ul><ul><li>navbars </li></ul></ul></ul><ul><ul><ul><li>Position fixed </li></ul></ul></ul><ul><ul><ul><li>Dialog / Page </li></ul></ul></ul><ul><ul><ul><li>Grid </li></ul></ul></ul><ul><ul><ul><li>accordions </li></ul></ul></ul><ul><ul><ul><li>Lists </li></ul></ul></ul><ul><li>A list of supported devices </li></ul><ul><li>Next version would make it easier just to grab the functionnality that you want </li></ul><ul><li>OpenSource, licence, mailing list, </li></ul>
  45. 46. jQuery Mobile and URLs <ul><li>URLs are an important part on the WEB : </li></ul><ul><ul><li>Access Bookmarks SEO Stats </li></ul></ul><ul><li>To render your site quickly, you may want : </li></ul><ul><ul><li>the full page to be rendered in HTML, </li></ul></ul><ul><ul><ul><li>No Ajax Loading on cold URL invocation </li></ul></ul></ul><ul><li>and: </li></ul><ul><ul><li>Then in the same site, you may not want the full page to be reloaded </li></ul></ul><ul><ul><ul><li>Partial content replacement </li></ul></ul></ul><ul><li>And : </li></ul><ul><ul><li>You want to deal correctly with others link : </li></ul></ul><ul><ul><ul><li>Router </li></ul></ul></ul>
  46. 47. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jQuery Mobile Plugins
  47. 48. Zepto, jQMobi <ul><li>A little part of the jQuery API </li></ul><ul><ul><li>querySelectorAll </li></ul></ul><ul><ul><li>Dom Traversing </li></ul></ul><ul><ul><li>attr, CSS, text, html, addClass, … </li></ul></ul><ul><ul><li>ajax </li></ul></ul><ul><ul><li>Events : bind, trigger, on, … </li></ul></ul><ul><li>Lighter because written for new browsers: Webkit, Firefox </li></ul><ul><li>But mobile is hard, forget about Windows Phone, Opera Mini on BlackBerry, … </li></ul><ul><li>Write everything, do not trust jQuery plugins </li></ul>
  48. 49. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jqMobi Zepto jQuery Mobile Plugins
  49. 50. Modernizr sur mobile <ul><li>Modernizr : Which features are available in this browser ? </li></ul><ul><ul><li>Works well on IE, Chrome and Firefox </li></ul></ul><ul><ul><li>Need some work around on Mobile (Touch, …) </li></ul></ul><ul><li> </li></ul>
  50. 51. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile Modernizr jqMobi Zepto jQuery Mobile Plugins
  51. 52. Performance <ul><li>Web performance is a broad topic ! </li></ul><ul><ul><li>Lots of papers </li></ul></ul><ul><ul><li>Some dedicated Workshop </li></ul></ul><ul><ul><li>Some business </li></ul></ul><ul><li>With lots of influence factors : </li></ul><ul><ul><li>Dom Overload, CPU usage, JavaScript Speed, Networking bandwidth and latency, Shim Quality, touch handling, speed of the loading wheel, … </li></ul></ul><ul><li>With one and only one goal : </li></ul><ul><ul><li>Increase the Perceived performance </li></ul></ul>
  52. 53. How to increase the perceived performance ? <ul><li>Reduce network time : </li></ul><ul><ul><li>Avoid mixing SSLs sites </li></ul></ul><ul><ul><li>Avoid CORS (OPTIONS request make it slow) </li></ul></ul><ul><ul><li>Avoid small files ( Sprites, JS and CSS minification) </li></ul></ul><ul><li>Don’t load anything useless </li></ul><ul><li>Make It fluid </li></ul><ul><ul><li>A 30fps list scrolling is better than a 60fps with some latency </li></ul></ul><ul><li>Ask your users </li></ul>
  53. 54. Mobile First <ul><li>Mobile First ? </li></ul><ul><ul><li>Think for mobile </li></ul></ul><ul><ul><li>Extend for others </li></ul></ul><ul><li>Mobile First is: </li></ul><ul><ul><li>Hype </li></ul></ul><ul><ul><li>A Philosophy to structure </li></ul></ul><ul><ul><li>your Development </li></ul></ul><ul><ul><ul><li>Accept, understand, embrace, but don’t be extremist </li></ul></ul></ul>Performance Ergonomic Capabilities Design Usage Focus Dynamic Loading
  54. 55. Mobile First <ul><ul><ul><li>Accept, understand, embrace, but don’t be extremist </li></ul></ul></ul>“ should be on the lips of every web designer . “ Ethan Marcotte   , Responsive Web Design
  55. 56. Packaging of Web Apps <ul><ul><li>What about packaging ? </li></ul></ul>VS
  56. 57. A LAST SMALL ADVICE <ul><li>Before you start this adventure, </li></ul>
  57. 58. A word to Manager <ul><li>Managers please: </li></ul><ul><ul><li>Considers this move as mush as from a technologist point of view than an human one </li></ul></ul><ul><ul><li>Consider all the technical possibilities to : </li></ul></ul><ul><ul><ul><li>Minimize risks </li></ul></ul></ul><ul><ul><ul><li>Reduce frustrations </li></ul></ul></ul><ul><ul><li>Satisfy your customers </li></ul></ul><ul><ul><ul><li>Cost reduction ? </li></ul></ul></ul><ul><ul><ul><li>Going on new platforms </li></ul></ul></ul><ul><ul><ul><li>Uniformisation of the user Experience </li></ul></ul></ul>
  58. 59. A word to Developper <ul><li>Developer : </li></ul><ul><ul><ul><li>Don’t be afraid : lot’s of fun, new stuff </li></ul></ul></ul><ul><ul><ul><li>Be careful : lot’s of traps too </li></ul></ul></ul><ul><ul><ul><li>Always look for the good mix : </li></ul></ul></ul><ul><ul><ul><ul><li>Innovation, sexy stuff </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Working stuff </li></ul></ul></ul></ul><ul><ul><ul><li>Don’t forget : </li></ul></ul></ul><ul><ul><ul><ul><li>Mobile First, </li></ul></ul></ul></ul><ul><ul><ul><ul><li>More Communication and more Brainstorming </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Ask the users </li></ul></ul></ul></ul>
  59. 60. About us
  60. 61. Thank you This is an internal technical presentation done by BSD. Our twitter : @AtosWorldline Atos, the Atos logo, Atos Consulting, Atos Worldline, Atos Sphere, Atos Cloud and Atos WorldGrid are registered trademarks of Atos SA. June 2011