Responsive design : un brin de technique

Le responsive web design (RWD) permet de concevoir un site web unique qui s'adapte automatiquement à chaque support utilisé par l'internaute. Cette solution permet d'éviter le développement de plusieurs versions d'un site web ou d'applications natives.

Le RWD repose sur 3 composants fondamentaux : les media queries (CSS3), les grilles fluides et les images flexibles.

 

Les media queries CSS3

La spécification CSS3 media queries permet l'application de feuilles de styles différentes en fonction des terminaux cibles.

Avec CSS2 et HTML4, il était déjà possible de spécifier une feuille de style en fonction du media par exemple pour l'impression. L'attribut media précisant le contexte dans lequel les styles doivent s'appliquer était limité : print pour l'impresssion, handheld pour les terminaux mobiles et de petite taille, speech pour les lecteurs vocaux, embossed pour les imprimantes braille...

La règle handheld est ignorée par la majorité des navigateurs mobiles.


Media "print"

<link rel= "stylesheet" media= "print"
      href = "print.css" type= "text/css"/>


L'objectif des media queries CSS3 est d'élargir les possibilités en combinant un ensemble de critères à partir des capacités des terminaux et non à partir du type des terminaux. Les différentes déclarations possibles sont associées avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc.

Les combinaisons sont multiples. L'exemple suivant vise les écrans de largeur inférieure à 480 pixels.


Media "screen" et terminal de 480px de largeur maximale

@media only screen and (max-device-width: 480px) {
    div#wrapper {
      width: 400px;
    }
}

L'exemple ci-dessous cible les écrans de largeur supérieure à 800 pixels grâce à la règle max-width associée à la valeur 800px.


Media "screen" et une largeur maximale d'écran 
supérieure à 800px

<link rel= "stylesheet" type= "text/css" 
media= "screen and (max-width > 800px)" 
href = "css/desktop.css"/>



Media queries utilisées dans Twitter bootstrap

/* Landscape phones and down */
@media (max-width:480px) { ... }
/* Landscape phones to portrait tablet */
@media (max-width:767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) { ... }
/* Large desktop */
@media (min-width:1200px) { ... }

Les grilles fluides

On parle d'interface fluide lorsque le contenu et la disposition sont élastiques. Cette conception modulaire avec des blocs en unités relatives permet de jouer sur la composition de la page en fonction de la largeur de l'écran. Les éléments fluides occupent le même pourcentage d'espace sur les différents écrans. Par exemple un élément prendra 50% de la largeur, quelque soit le terminal.

En réduisant progressivement la taille de fenêtre du navigateur, le site s'adapte en fonction des pourcentages correspondants.

 


Tailles de blocs en %

#nav
{
    float: left;
    width: 25%;
    height: 150px;
    background-color: #999;
    margin-bottom: 10px;
}

#content
{
    float: left;
    margin-left: 5%;
    width: 65%;
    height: 150px;
    background-color: #999;
    margin-bottom: 10px;
}

#footer
{
    clear: both;
    height: 50px;
    background-color: #666;
    margin-bottom: 10px;
}

 

Les images responsive

Il s'agit de proposer des images dont la taille et la disposition s'ajustent automatiquement en fonction de la taille de l'écran. Attention, il faut prendre en compte la taille en pixels de l'image ainsi que le poids. Plusieurs solutions sont envisageables.

 

Unités relatives

Il s'agit de définir les images en unités relatives, le redimensionnement de l'image est alors laissé au navigateur.

Si cette solution a l'avantage de la simplicité, le résultat est malheureusement loin d'être optimal en terme de qualité et le poids de l'image reste inchangé, ce qui peut poser problème lors de connexion à faible débit (GPRS, Edge, …).

 

Media queries

Une autre solution est d’afficher certaines images (par exemple celles liées au design) à l'aide des media queries.

Par exemple, en définissant une feuille de style dédiée aux écrans de moins de 480px, les images utilisées dans cette feuille de styles peuvent être spécifiquement adaptées à cette résolution : le redimensionnement est fait à l’avance par un logiciel spécialisé et le poids de l’image est réduit. Pour les images intégrées dans le corps de la page, il suffit de déclarer chacune des images et d'afficher/cacher les images à l'aide des media queries.

Tous les navigateurs ne gèrent pas les media queries notamment IE7 et IE8. Toutefois, il existe plusieurs librairies javascript qui permettent de contourner cette limit : adapt.j ou encore css3-mediaqueries.js

Attention toutefois, le navigateur télécharge toutes les feuilles de styles ! Le principal défaut de cette méthode est que les images cachées seront aussi téléchargées.

 

Javascript et media queries

L'utilisation de javascript est une troisième piste intéressante puisqu’elle permet d'optimiser le chargement des images et éviter que le navigateur ne charge des images inutiles ; les media queries étant utilisées pour le reste.

En utilisant le plugin jQuery, il est possible de tester la taille de la fenêtre $(window).width() au chargement de la page $(document).ready(function()) et d'appliquer une expression régulière pour modifier la source de toutes les images afin d'y ajouter une information de taille. Il faut bien sûr disposer sur le serveur d'un outil de redimensionnement des images ou, simplement, d’images déjà redimensionnées.

Le CMS Ametys permet nativement de redimensionner les images.

Si cette solution prend en considération la taille de la fenêtre au chargement, elle laisse cependant de côté l'ajustement d'affichage pour les périphériques pouvant être orientés (passage de portrait à paysage). D'autres solutions sont envisageables notamment en jouant sur l'image de fond.

 

HTML5 et jQueryPicture

Le plugin jQueryPicture permet d'ajouter des fonctionnalités pour gérer les images en responsive. Il propose l'utilisation de deux balises : <figure> ou <picture>. Ces balises ont été proposées à la standardisation, mais pas encore validées. Nous pouvons espérer qu'elles soient implémentées en natif dans les navigateurs dans un futur proche.

Il est possible d'utiliser le tag <figure>, ou le tag <picture> et le tag <source>. La balise <noscript> est utilisée pour la compatibilité avec les autres navigateurs.

 

Utilisation de la balise <figure>

Il suffit d'initialiser le plugin dans le header.



<script type="text/javascript">
    $(function(){
        $('figure.responsive').picture();
    });
</script>


Puis dans le code de déclarer la <figure> en utilisant data-mediaXXX. XXX est remplacé par la taille souhaitée.



<figure class="responsive" data-media="image-400px.png" 
data-media600="image-600px.png" 
data-media800="image-800px.png" 
title="Test picture">
   <noscript>
     <img src="image-800px.png" alt="Test picture">
   </noscript>
</figure>


Pour insérer un lien sur l'image, il suffit d'entourer la balise <noscript> par le lien <a href>.



<figure class="responsive" data-media="image-400px.png"
data-media600="image-600px.png" 
data-media800="image-800px.png"
title="Test picture">
  <a href="http://www.ametys.org">
      <noscript>
        <img src="image-800px.png" alt="Test picture">
      </noscript>
   </a>
</figure>


 

Utilisation de la balise <picture>



<script type="text/javascript">
    $(function(){
        $('picture').picture();
    });
</script>


Puis dans le code de déclarer la <picture> en utilisant des <source> et des attributs media sous forme de media queries.



<picture alt="Mon image">
    <source src="image-400px.png">
    <source src="image-600px.png"  media="(min-width:640px)">
    <source src="image-800px.png"  media="(min-width:840px)">
    <noscript>
      <img src="image-800px.png" alt="Mon image">
    </noscript>
</picture>


En conclusion, il est dommage que le display:none n'ait pas d'action sur le chargement des images, cela simplifierait le code et le fonctionnement. Néanmoins les solutions existantes restent assez simples à mettre en œuvre.