Des interfaces adaptatives pour vos applications Web

Des interfaces adaptatives
pour vos applications Web

Qui suis-je ?

Jeremie Patonnier

MDN Dark Lord

@JeremiePat
http://jpat.fr/FirefoxOS

Introduction

Le Web est une jungle
La notion de viewport
Les gabarits de mise en page
Les « media-queries »
Principes de conception adaptative
Bien s'outiller
Le future des interfaces Web

Le Web est une jungle

La notion de viewport

Basiquement, c'est la zone visible dans la fenètre d'un navigateur
Oui, mais…
le navigateur peut vous mentir

La balise meta viewport

				<!DOCTYPE html>
				<title>Jouer avec le viewport<title>
				<meta name="viewport" content="width=device-width">

MDN : Using the viewport meta tag to control layout on mobile
Alsacreation : Comprendre le Viewport dans le Web mobile

Les gabarits de mise en page

Les gabarits « fixes »

Ils reposent sur des unités fixes comme le pixel

Pour
- Facile pour les débutants
Contre
- Impossible de maitriser l'experience utilisateur

Les gabarits de mise en page

Les gabarits « élastiques »

Ils reposent sur des unités relatives à la taille des fontes :
le « em » et le « rem »

Pour
- Parfait pour créer des interfaces accessibles
Contre
- Impossible de prédire la taille des fontes de l'utilisateur

Les gabarits de mise en page

Les gabarits « fluides »

Ils reposent sur des unités relatives à la taille du viewport :
le pourcentage mais aussi « vw », « vh », « vmax » et « vmin »

Pour
- Parfait pour créer des interfaces qui s'adapte a n'importe quel viewport
Contre
- Les risques d'erreurs sur l'utilisabilité des interfaces sont importants

Les gabarits de mise en page

Les « media-queries »

Il s'agit d'un mechanisme de selection de feuilles de styles en fonction des caractéristiques d'un média donné.

mediaqueri.es

Les « media-queries »

		        @media screen and (min-device-width: 1024px) {
		          /* Vos styles pour les grands écrans ici */
		          body {
		            font-size: 120%;
		    	  }
		        }

		    	<link rel="stylesheet" href="style.css"
		    	      media="screen and (min-device-width: 1024px)">

Les « media-queries »

(min-*, max-*) width
(min-*, max-*) height
(min-*, max-*) device-width
(min-*, max-*) device-height
(min-*, max-*) aspect-ratio
(min-*, max-*) device-aspect-ratio
orientation
device-pixel-ratio : WTF!

Les « media-queries »

		        @media screen and (min-width: 75em) { }

		        @media screen and (min-width: 75em),
		               screen and (max-width: 10em) { }

		        @media   (min-width: 800px) and (max-width: 1200px) { }

Les « media-queries »

		        var myMediaQuery = window.matchMedia("(min-width: 600px)");
		         
		        console.log(myMediaQuery.matches)
		         
		        myMediaQuery.addListener(function (mq) {
		          console.log(mq.matches)
		    	});