Skill Session - Web Multi Device

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

WHY WE SHOULD GO ON WEB ? ,[object Object]

SAME TECHNOLOGY, DIFFERENT BEHAVIOR ? ,[object Object]

What about web ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

GIVE US SOME CONCRETE ,[object Object]

Interests of the Any Web devices approaches ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Interests of the Any Web devices approaches ,[object Object],[object Object],[object Object],[object Object],[object Object],industrially Unique Smooth Sexy Fast ,[object Object],[object Object]

Interests of the Any Web devices approaches ,[object Object],[object Object],[object Object],Navigation Caching URL Testing Browser support Ergonomic designing HTML5 support SEO Javascript

But We (kinda) did it ! ,[object Object]

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

What is « Responsive Web design » ? ,[object Object],Responsive Design Fluid Grids Flexibles images Media Queries

Why is « Responsive Web design » so hype ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Adapt or Die ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

THE MOBILE WEB NIGHTMARE ,[object Object]

I’m a Mobile Developper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I’m a Mobile Developper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I am a Desktop Web Designer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I am a Desktop Web Designer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I am a Desktop Web Designer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

One Website For all devices : Adapt to mobile ,[object Object],[object Object],[object Object],[object Object]

One Website For all devices : CSS only ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

One Website For all devices : Framework driven ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

One Website For all devices : Handcrafted ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

WebApp with native equivalent quality ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

A TOUCHING THOUGHT! ,[object Object]

Touch handling ,[object Object],[object Object],[object Object]

Touch handling ,[object Object],[object Object],[object Object],[object Object]

Touch handling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Touch handling ,[object Object],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 ,[object Object],[object Object]

DISCOVERING A NEW WORLD ,[object Object]

jQuery Mobile ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Mobile and URLs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Zepto, jQMobi ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Modernizr sur mobile ,[object Object],[object Object],[object Object],[object Object]

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

Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How to increase the perceived performance ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mobile First ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Performance Ergonomic Capabilities Design Usage Focus Dynamic Loading

Mobile First ,[object Object],“ should be on the lips of every web designer . “ Ethan Marcotte , Responsive Web Design

Packaging of Web Apps ,[object Object],VS

A LAST SMALL ADVICE ,[object Object]

A word to Manager ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

A word to Developper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to Skill Session - Web Multi Device

Similar to Skill Session - Web Multi Device (20)

Recently uploaded

Recently uploaded (20)

Skill Session - Web Multi Device