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
  • img viewport desktop/mobile

La balise meta viewport

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

Les gabarits de mise en page

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)
		    	});
		    
HMO : Using window.matchMedia

Principes de conception adaptative

L'importance du contenu

  • Ni trop, ni trop peu : cibler
  • Utilisez le pour determiner la mise en page

Principes de conception adaptative

L'experience utilisateur

  • Vous ne faite pas une application pour vous !
  • Vous devez faire attention :
  • au parcourt utilisateur : L'enchainement des écrans/pages
  • à l'interaction avec l'application : Les zones de clique, de saisie, etc.
  • à la réactivité de l'application

Principes de conception adaptative

Les bibliothèques de composant

Bien s'outiller

La vue adaptative de Firefox

Bien s'outiller

Modernizr

Bien s'outiller

Les pré-processeurs CSS

Le future des interfaces Web

  • CSS Multi-column Layout
  • CSS Flexible Box Layout
  • CSS Grid Layout
  • CSS Region
  • CSS Exclusions and Shapes
http://www.w3.org/Style/CSS/current-work

Merci

http://jpat.fr/FirefoxOS