Skill Session - Web Multi Device

Responsive Web Design & Mobile Web Development A Technical and Business approach

WHY WE SHOULD GO ON WEB ? And now what ?

Why Web ? The WEB is the final approach to aim natively virtually all screened devices

SAME TECHNOLOGY, DIFFERENT BEHAVIOR ? Web-Sites,

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

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

http:// dowebsitesneedtolookexactlythesameineverybrowser .com/

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.com http://x.facebook.com http://www.pmu.fr http://mob.pmu.fr http://mobile.parier.pmu.fr https://tab.pmu.fr/hippique

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 !

To Do so, we need so increase our knowledge.

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 ! Navigation Caching URL Testing Browser support Ergonomic designing HTML5 support SEO Javascript

But We (kinda) did it ! http://awareme.zone52.org

ADAPT OR DIE Create One Web site

What is « Responsive Web design » ? http://www.alistapart.com/articles/responsive-web-design

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 images Media Queries

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

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

THE MOBILE WEB NIGHTMARE Developers also should adapt

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

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

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

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.

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

One Website For all devices : Adapt to mobile 3 strategies CSS only Framework driven Handcrafted

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

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

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, …

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

A TOUCHING THOUGHT! Create Mobile Apps with Native Equivalent quality

Touch handling Do nothing Terrible user experience: waiting 300ms to know if it’s a click or a double click Works well

Touch handling Events touchstart touchmove touchend

Touch handling Yes but : Doesn’t work on desktop Nor on Windows Phone Nor on Opera Mini … http://modernizr.github.com/Modernizr/touch.html

Touch handling $.support.touch = ('ontouchstart' in window) if no touch support $(‘body’).bind(‘click’, function(e){ e.preventDefault(); $(e.target).trigger(‘tap’); });

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.

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; } });

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… 

Touch handling Don’t do it again. Use jQuery Mobile instead.

DISCOVERING A NEW WORLD Technology and spirits

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,

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

Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jQuery Mobile Plugins

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

Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jqMobi Zepto jQuery Mobile Plugins

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/

Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile Modernizr jqMobi Zepto jQuery Mobile Plugins

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

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

Mobile First Mobile First ? Think for mobile Extend for others Mobile First is: Hype A Philosophy to structure your Development Accept, understand, embrace, but don’t be extremist Performance Ergonomic Capabilities Design Usage Focus Dynamic Loading

Mobile First Accept, understand, embrace, but don’t be extremist “ should be on the lips of every web designer . “ Ethan Marcotte , Responsive Web Design

Packaging of Web Apps What about packaging ? VS

A LAST SMALL ADVICE Before you start this adventure,

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

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

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

Skill Session - Web Multi Device

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Skill Session - Web Multi Device (20)

Recently uploaded (20)

Skill Session - Web Multi Device