Responsive Web Design

Déplacez vous dans la présentation avec les flêches de votre clavier si vous en avez un, ou en balayant l'écran avec vos doigts.

Responsive Web Design

  • Pourquoi ?
  • Qu'est ce que c'est ?
  • Qui utilise cette approche ?
  • Comment le mettre en oeuvre ?
  • Et techniquement ?

Pourquoi ?

Le même design partout !

  • Maquette avec Photoshop
  • Découpage
  • Intégration sous IE6 windows
  • Puis IE7, IE8
  • Intégration sous Firefox windows
  • Et ça marche sur Mac ? Et Netscape 4 ? Et chrome ?
  • ...

Pendant ce temps là dans nos poches

...

Mobile Web Stats Source : Graph KPCB, data Stat Counter

Pendant ce temps là dans nos poches

et sur nos bureaux

Mobile Web and Desktop Web Stats Source : Stat Counter

Plus d'utilisateur du web mobile que cablé d'ici 2015 IDC

La guerre des navigateurs fait aussi rage sur mobile

Mobile Web and Desktop Web Stats Source : Stat Counter

Pour le moment

This is the web Image : http://bradfrostweb.com/blog/post/this-is-the-web/

Dans le futur

This will be the web Image : http://bradfrostweb.com/blog/post/this-is-the-web/

Contraintes

  • S'adapter à différent navigateurs
  • S'adapter à différentes tailles de périphériques
  • Situation de mobilité:
    • peu de réseau
    • peu d'attention

Une solution

Un seul contenu qui s'adapte au mieux et de manière flexible au périphérique de l'utilisateur

RWD : Qu'est ce que c'est ?

  • Une grille de composition flexible,
  • Des medias flexibles,
  • Adapter à l'espace disponible.
  • Exemple
On doit l'expression à Ethan Marcotte dans un article de AListApart et dans un livre chez ABookApart.

Qui utilise cette approche ?

Utilisable dans les emails ?

Comment le mettre en oeuvre ?

Approche "Degradation gracieuse" (gracefull degration)

  • Partir d'un site desktop est l'adapter à différente résolution.
  • + : Economie d'un redesign global
  • + : Délai
  • - : Pertinence
  • - : Performance

Comment le mettre en oeuvre ?

Approche "Amélioration progessive" (progressive enhancement, mobile first)

  • Réenvisager le design d'un site en partant des contraintes de taille et de performance du mobile.
  • + : Pertinence
  • + : Performance
  • - : Coût et effort du redesign
  • - : Délai
  • Approche poussée par les designer, cf Luke Wroblewski

Et techniquement ?

Framework

Et techniquement ?

Grille flexible : pourcentage et max-width

Largeur et marge sous forme de pourcentage

Formule magique : cible / context 


.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Et techniquement ?

Media flexible : width: 100% et height: auto

Ne pas spécifier de taille dans l'HTML!


img {
  max-width: 100%;
  height: auto;
}

Et techniquement ?

Adapter à l'espace disponible

Utilisation de media queries


@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

media queries disponible sous Opera Mobile, mobile WebKit, Safari 3+, Chrome, Firefox 3.5+, et Opera 7+

Polyfill : css3-mediaqueries-js

Pour finir

Souhaitable si interaction riche ?

Ergonomie et Design doivent être défini par un spécialiste