Méthode et préconisations pour votre Responsive Web Design

Mathieu Chartier Programmation 8 commentaires

Le Responsive Web Design est une manière de présenter les sites web en vogue depuis quelques années (ou quelques mois dans l'application réelle) qui permet de générer des mises en page et mises en forme adaptatives en fonction de la résolution d'un écran, de son orientation, de son nombre de couleurs, etc. Avec cette nouvelle "discipline", nous pouvons désormais réaliser des pages web à dimensions modulables afin de proposer un affichage plus adapté sur des écrans de smartphones ou de tablettes.

Au fond, l'idée du Responsive Web Design se résume juste à adapter une interface graphique à l'appareil qui lit les sites web. Les dernières trouvailles du CSS 3 ont permis de développer davantage ce système mais en réalité, la majorité des outils que nous allons utiliser dans notre démonstration étaient déjà compatibles avec CSS 2 et avec des navigateurs relativement anciens, Internet Explorer exclu (comme souvent...).

La méthodologie d'application d'un bon Responsive Web Design ("rwd" pour les fans d'abréviations) est extrêmement simpliste, mais nous verrons que certains aspects demeurent encore quelques peu obscurs et peuvent poser des problèmes dans certains cas précis. En réalité, trois techniques novatrices permettent de réaliser des versions web pour les appareils mobiles :

  • les applications mobiles codées dans des langages spécifiques et téléchargeables sur les "Stores" d'Apple, Androïd, Symbian (...) ;
  • les sites web mobiles créés en parallèle des versions courantes, permettant d'appuyer sur uniquement certains points majeurs du site web initial ;
  • les mises en pages adaptées avec le Responsive Web Design.

Nous travaillons donc ici uniquement sur la dernière technique, qui consiste principalement à agir sur les fichiers CSS de nos sites.

Méthode du Responsive Web Design en quelques points :

Idéalement, il vaut mieux partir à zéro pour réaliser une interface responsive réussie, car aucune "impureté" dans les CSS viennent s'entremêler avec les nouvelles recommandations spécifiques. Toutefois, il est possible à tout moment de repartir d'un CSS existant pour aboutir à une interface modulable pour les appareils mobiles (ce fut le cas de ce blog notamment...).

  1. Intégrer les pages en HTML (quelque version que ce soit) ;
  2. Créer une feuille de style globale ou des feuilles de style spécifiques selon les types de supports mobiles pour lesquels l'interface est censée s'adapter ;
  3. Opter pour une adaptation complète du site web en version mobile ou pour conserver uniquement certains blocs visibles (en cachant les autres avec des "display:none;") ;
  4. Identifier les points de rupture (résolutions qui vont impliquer des modifications dans l'affichage des pages web) ;
  5. Utiliser les medias queries (attribut "media" en HTML et/ou fonction @media en CSS) pour chaque point de rupture identifié ;
  6. Faire du Mobile First (nous détaillerons l'intérêt de cette vision technique) ;
  7. Réaliser une mise en page flexibles en favorisant les unités relatives en CSS (pourcentages, em, ex, etc.) ;
  8. Nettoyer tous les éléments qui peuvent poser des problèmes d'intégration sur mobiles (Javascript, Flash, etc.).

N.B. : pour les personnes qui souhaitent compresser les fichiers CSS contenant des medias queries, faites attention lors des compressions CSS ("CSS minify" en anglais) car les fonctions CSS @media sont parfois modifiées...

Faire du Mobile First

L'idée de "Mobile First" se résume aisément : il s'agit de penser dans un premier à établir le graphisme sur les interfaces mobiles avant d'envisager l'interface des sites web sur les écrans de grandes tailles (ordinateurs, télévisions, etc.). Généralement, nous préférons adapter nos interfaces en version mobile mais nous allons constater qu'il est préférable d'envisager l'inverse pour des raisons de poids de sites web, etc.

En effet, lorsque nous procédons des plus grandes résolutions aux plus petites, nous oublions totalement que les grandes images vont être chargées puis les petites également si notre résolution est plus petite. Voici une démonstration simple pour comprendre :

  1. Notre mise en page adaptative (ou "responsive") dit en CSS que les écrans de grandes tailles doivent charger le grand logo appelé "logo-hd.png" et que les écrans de petites tailles doivent opter pour le petit logo intitulé "logo-bd.png".
  2. Nos medias queries vont des grandes résolutions aux plus petites. Par conséquent, les caractéristiques des grandes résolutions sont reprises dans les autres groupes @media en CSS pour les plus petites résolutions car ces dernière ne servent uniquement à dire ce qui doit être changé par rapport à la version initiale du site (donc la grande dans notre exemple).
  3. Le grand logo est donc chargé sur mobile (chargement par défaut --> version initiale du site) mais également le petit puisque ce dernier est justement dédié aux résolutions des smartphones.

En procédant dans le sens inverse, nous allons uniquement faire charger le petit logo sur les smartphones et c'est seulement dans le cas de grandes résolutions que le grand logo serait chargé. Il s'agit de la seule méthode fiable en Responsive Web Design pour éviter de ralentir le chargement des pages web sur les appareils mobiles.

Choisir les points de rupture et les medias queries adaptés !

Identifiez dès le début les points de ruptures que vous souhaitez travailler pour réaliser votre Responsive Web Design. Globalement, nous utilisons 3 à 4 points de rupture au total, mais vous êtes libres d'en choisir moins ou davantage selon vos besoins. Voici ce que je préconise pour la majorité des sites web actuels :

  • Premier point de rupture : 480px ;
  • Second point de rupture : 768px ;
  • Troisième point de rupture : 1024px ;
  • Quatrième point de rupture (optionnel) : 1200px (pour les très grandes résolutions, cela peut parfois s'avérer utile !).

Ce qui se résume en CSS avec les médias queries à écrire des lignes de type :

@media all and (max-width:480px) {

... /* Code CSS à appliquer pour cette résolution */

}

@media all and (min-width:768px) {

... /* Code CSS à appliquer pour cette résolution */

}

Internet-Formation - Responsive web design - Méthode de Mathieu Chartier

Rendre l'interface et les médias flexibles

Pour faire un bon Responsive Web Design, il convient de réaliser une interface entièrement flexible dans l'idéal. Toutefois, il est également possible de conserver des mises en page partiellement fixes si vous avez bien choisi vos points de rupture, cela permet de contrer certains problèmes parfois. L'objectif n'est pas nécessairement d'avoir un design 100% adaptatif, vous pouvez très bien avoir plusieurs mises en page fixes en fonction des médias queries utilisés, ce n'est pas du tout un problème, contrairement à ce qui peut se lire ci et là...

Pour l'interface générale, la méthode se résume à éviter à tout prix d'utiliser les unités fixes et notamment les "px" que l'on retrouve partout. Dorénavant, pensez en "em" ou en "%". Par exemple, si vous avez une interface générale de 960px, vous pouvez opter pour le pourcentage le plus proche à l'oeil (par exemple, 70%) comme base de départ, mais il est conseillé d'opter pour la propriété max-width en CSS (reconnue jusqu'à IE 7). Ainsi, il suffit d'écrire max-width:960px; pour que l'interface parte sur de bonnes bases et ne risquent pas de trop s'agrandir si vous avez une très grande résolution.

Pour toutes les autres parties du site, il convient de choisir les pourcentages correspondant aux tailles initiales en px. Une formule mathématique simple permet de trouver les pourcentages utiles :

Taille initiale de la zone (en px) / Taille initiale du contexte (en px) = taille désirée en %

Par exemple, si vous désirez trois colonnes de 320px dans votre interface de 960% maximum de largeur, vous écrivez "320/960" soit 33,33% pour chaque colonne (les chiffres après la virgule fonctionnent bien en général).

Rendre les médias flexibles

Pour tous les fichiers images, vidéos, canvas (...), rien de plus simple, il suffit d'ajouter une ligne en CSS et de retirer les tailles fixes écrites dans le code HTML :

img {
max-width:100%;
height:auto; /* Adapte la hauteur des médias à la largeur utilisée */
width:auto; /* Evite les problèmes sur les anciennes versions d'IE */
}

Le seul problème de fonctionnement des médias flexibles s'apparente à la propriété CSS background-image. En effet, les propriétés width et height fonctionnent uniquement avec des tailles fixes lorsqu'une image de fond est présente, les pourcentages font tout simplement disparaître l'image à l'écran sur certains navigateurs. Heureusement, une propriété CSS 3, background-size, vient régler ce problème en partie. Elle peut prendre plusieurs formes :

  1. background-size : 100%; ou background-size:100% 100%; (largeur puis hauteur lorsqu'il y a deux valeurs)
  2. background-size:cover; --> s'adapte à la taille du contenant et rogne ce qui dépasse (une sorte de overflow:hidden;)
  3. background-size:contain; --> s'adapte à la taille du contenant sans être rogné

Le problème de cette propriété, c'est qu'elle n'est pas reconnue par les anciens navigateurs et surtout par Internet Explorer 7 et 8. Par conséquent, aucune méthode idéale ne permet d'adapter parfaitement les images de fond. Il existe bien quelques scripts Javascript pour résoudre ce problème, mais cela rajoute d'autres soucis de compatibilité.

Envisager les incompatibilités et résoudre les problèmes

Le Responsive Web Design n'est pas une science exacte malheureusement, et il réside encore quelques points noirs néfastes qui peuvent déranger l'adaptation des interfaces aux écrans de toute taille. En voici une liste avec les résolutions possibles à envisager :

  1. Les écrans des mobiles récents se sont adaptés au média "screen". Par conséquent, il faut ajouter la ligne suivante pour que ces écrans comprennent les différentes résolutions :
    • <meta name="viewport" content="initial-scale=1.0,width=device-width" />
  2. Faites attention aux médias utilisés. Trop souvent, nous résumons les styles au média "screen" alors que "handheld" (portable) et "tv" (navigateur dans une console de jeux par exemple) ont également un rôle important !
  3. Javascript est parfois désactivé sur les appareils mobiles et il peut s'avérer lourd à utiliser dans d'autres cas, il peut être intéressant d'utiliser des chargeurs Javascript pour éviter tout problème de compatibilité.
  4. Trop de Javascript peut être perturbant sur mobile, il peut être intéressant de remplacer un slideshow par une simple image flexible par exemple, un menu déroulant par un menu fixe...
  5. Les médias queries @media ne fonctionne pas sur les anciennes versions de navigateurs, utilisez des scripts comme respond.min.js ou css3-media-queries.js pour contrer ce problème d'incompatibilité.
  6. Les background-image posent des problèmes pour se retailler convenablement. Deux choix s'offrent à vous :
    • Vous utilisez background-size et vous devez régler les pertes de qualités sur Internet Explorer avec l'objet AlphaLoaderImage pour chaque image placée en background ;
    • Vous optez pour des images fixes de tailles différentes en fonction du média query utilisé (comme dans l'exemple du logo cité précédemment)

D'autres problèmes existent certainement mais je vous ai cité les plus courants, il convient désormais de travailler là-dessus pour réaliser vos interfaces flexibles idéales. Bon courage !

Visualiser le résultat du travail en ligne

Beaucoup d'outils existent pour tester nos sites web, l'idéal étant de posséder déjà plusieurs navigateurs sur son ordinateur ou sur ses appareils mobiles (smartphones et tablettes notamment) pour voir le résultat en direct. Cependant, Firefox propose depuis quelques versions un outil très pratique appelé "vue adaptative" disponible dans le menu "outils" puis "développeur web". Plusieurs résolutions sont disponibles et vous pouvez modifier la dimension de la fenêtre pour voir les changements en direct.

Pour tester sur plusieurs versions d'Internet Explorer, vous pouvez utiliser l'outil IE Tester ou encore des extensions Firefox comme Ie TAB v2.

Enfin, vous pouvez essayer des versions mobiles sur les quelques émulateurs mobiles du marché, cela permet de se donner une idée du résultat final.