Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Développement Web multiécran, multiterminal, multiinterface avec HTML5

Mickaël Morier, François Petitit
Un univers digital en expansion
Multiplication des écrans
Multiplication des interfaces
Multiplication des plateformes
Comment répondre à cette

complexité ?*

*sans baguette magique

Les languages Web sont les seuls à répondre à toute cette diversité

, , JavaScript, SVG.

On les utilise depuis des années sur desktop

Mais nécessitent de

nouvelles

pratiques

2 approches de design pour le multiécran

Responsive design

et

Mobile-first design

Responsive Design

Implémentation

Grille et médias flexibles (largeurs en pourcentage)

CSS3 Media queries (styles spécifiques)

Mobile-First Design

1 approche pour le multiinterface

Touch-first design

Touch-First Design

2 principes pour le multiplateforme

Progressive enhancement

et

Graceful degradation

Progressive enhancement

Graceful degradation

Mais parfois les

usages

sont tellement différents selon les terminaux

Exemple de vues spécifiques

2 techniques pour des vues spécifiques

Détection de User Agent

et

Détection d'interface et de capacité

Détection de User Agent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:15.0) Gecko/20120607 Firefox/15.0a2

Mozilla/5.0 (Linux; U; Android 4.0.4; fr-fr; Nexus S Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Site Web pour ordinateur
Site Web pour mobile

Détection d'interface et capacité dans le navigateur

Quelques outils / frameworks pour vous aider

Bonus, la preuve en image

Merci

Retrouvez cette présentation sur http://goo.gl/sS6UZ

Use a spacebar or arrow keys to navigate