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