Design graphique pour les sites responsive

Introduction

En 1996, beaucoup de personnes impliquées dans la construction du web auraient ri si vous leur aviez dit que moins de 20 ans plus tard, nous développerions des sites fonctionnant aussi bien sur téléphones portables, tablettes, télévisions, et même dans les voitures et gérant l'éclairage domestique. Le contenu textuel n'est pas un problème dans la mesure où les blocs de texte sont "responsive" (redimensionnables) par défaut, mais l'histoire se complique quand on commence à inclure des contenus graphiques et des mises en page complexes - surtout quand ceux-ci doivent s'adapter à différents affichages ! C'est pourquoi nous avons inclu dans la doc une section complète pour chacun de ces sujets (la section sur laquelle vous êtes actuellement, et la section app layout).

De plus, nous avons de nos jours le choix entre tellement de technologies, comparées à nos humbles BMPs, JPGs, GIFs, ou PNGs. Mais laquelle choisir ? Ceci dépend vraiment des terminaux sur lesquels votre application devra fonctionner, de la complexité de vos contenus graphiques, et du niveau d'interactivité qu'ils recquièrent.

Cet article vous offre une explication de haut niveau visant à vous aider à déterminer les meilleurs options pour vos choix graphiques.

Afficher des images de manière sélective via CSS

En général, vous utiliserez principalement les mêmes contenus graphiques pour vos différentes mises en pages dans un design responsive, mais vous pouvez aussi bien inclure des contenus légèrement différents selon les contextes. Par exemple, si votre affichage pour ordinateur inclut une large image d'en-tête et plusieurs graphismes programmés (par exemple des ombres portées et des dégradés en CSS3), vous pourriez souhaiter simplifier ou supprimer certains de ces éléments pour l'affichage sur téléphone, ou bien les remplacer par des contenus plus petits qui s'adapteraient mieux aux plus petits écrans. De plus, les terminaux mobiles ont en général moins de puissance de calcul et de bande passante disponible, donc on est amené à réduire les calculs et les téléchargements. Enfin, les terminaux mobiles ont des tailles d'écran plus petites, et il est logique d'épurer l'interface sur les mises en pages mobiles.

Les CSS media queries permettent d'utiliser des règles différentes en fonction des dimensions du viewport, et vous devriez réfléchir à utiliser les mobile first media queries quand cela est possible. Ceci signifie que la mise en page par défaut dans votre CSS sera la mise en page destinée aux petits écrans des terminaux mobiles, avant qu'une quelconque media query soit exécutée, et non la mise en page destinée à l'affichage sur de grands écrans (d'ordinateurs par exemple). Donc, quand la page est chargée sur un terminal mobile, le terminal va uniquement charger les contenus mobiles, et non les contenus prévus pour les ordinateurs.

Créer des <img>s HTML responsives n'est pas aussi facile, étant donné qu'il n'y a actuellement aucun mécanisme natif permettant d'afficher des images différentes selon le contexte. Il existe un grand nombre de solutions de contournement, mais aucun d'entre eux n'est parfait à l'heure actuelle. Pour un aperçu des solutions existantes, lisez Choosing a responsive image solution.

S'adapter aux différentes résolutions

Dans cette section nous allons étudier différentes stratégies pour parvenir à faire fonctionner les images sur des terminaux de différentes résolutions. Le problème est que les images matricielles (c'est-à-dire les images bitmap), lorsqu'elles sont affichées sur des écrans haute définition, risquent d'apparaître toutes petites car le même nombre de pixels est affiché sur un espace à l'écran beaucoup plus petit. La plupart des terminaux haute définition appliquent un facteur de zoom (agrandissement) à l'ensemble de la page web de manière à ce que le contenu soit un peu plus lisible, mais le mauvais côté de cela est que les images deviennent pixellisées et laides car elles sont agrandies.

Copies d'images en haute définition et basse définition

Une solution est de créer un jeu d'images haute définition et un jeu d'images basse définition, et d'utiliser les resolution media queries pour les afficher sur les terminaux haute résolution ou basse résolution.

Images calculées

Vous pouvez aussi essayer d'utiliser les images vectorielles/calculées autant que possible : dans la mesure où elles se redimensionnent à l'infini elles s'afficheront précisément en haut résolution. Vous pouvez aussi utiliser des propriétés CSS3 pour générer des effets commes des ombres portées (drop shadows), dégradés (gradients) et coins arrondis (rounded corners), et vous pouvez aussi réfléchir à utiliser SVG pour d'autres éléments d'interface, plutôt que des images matricielles. Les mauvais côtés de ces pratiques sont que les propriétés CSS3 et le SVG ne sont pas supportés par les vieux navigateurs comme IE6-8 (bien que les Polyfills soient disponibles, et qu'on puisse établir des solutions de remplacement), et que SVG n'est pas adapté à des images très détaillées, comme les photographies par exemple.

Utiliser des polices de caractère pour les icônes

Une autre technique à prendre en compte est d'utiliser les web fonts pour créer des icônes. Le texte est redimensionnable à l'inifini sur le web, et vous pouvez aussi utiliser les propriétés CSS de texte pour styler vos icônes en web font, par exemple avec text-shadow et color. Créer votre propre fichier de font peut être assez minutieux, mais il existe plusieurs bons services d'icon font disponibles, comme par exemple font awesome.

Images interactives

Si vos images ont besoin d'intégrer un haut niveau d'interactivité, comme des liens, des zones cliquables, ou des animations, il existe plusieurs options possibles.

CSS

De la même manière que CSS3 vous permet d'ajouter des effets graphiques calculés aux liens (et à n'importe quel autre élément que vous souhaitez), CSS3 vous permet d'écrire des animations et des transitions. Ceci pourrait ne pas être supporté dans les vieux navigateurs comme IE6-8, mais leur dégradation est généralement bien gérée. Ils sont faciles à écrire, et deviennent bien plus puissants et flexibles quand ils sont combinés avec du JavaScript et d'autres technologies.

JavaScript

JavaScript offre des fonctions permettant aux développeurs de créer des animations et autres types d'interactivités. C'est un langage très puissant quand on le combine à d'autres technologies, bien que sa complexité soit une barrière pour les novices en développement.

SVG

SVG, comme HTML/CSS, peut être manipulé avec JavaScript. Donc y ajouter de l'interactivité n'est pas difficile. Vous pouvez aussi ajouter des liens directement dans SVG et créer des animations en utilisant SMIL (Synchronized Multimedia Intergration Language).

WebGL/Canvas

Vous pouvez créer un canvas pour dessiner des graphiques interactifs en utilisant  l'élément HTML <canvas>, puis en utilisant l'API Canvas pour créer des formes, lignes, importer des fichiers images, écrire du texte, faire des opérations de compositing, et bien plus. Le JavaScript standard peut alors être utilisé pour animer l'image en résultant, etc. Vous pouvez créer de l'imagerie en 2D en utilisant le contexte canvas 2D classique, ou bien de l'imagerie 3D en utilisant la naissante WebGL API.

Canvas est très puissant, mais il faut l'utiliser avec prudence. Cela convient bien pour les visuels de jeux, ou des visualisations de données complexes, mais pour des éléments d'interface standard ce n'est pas une technologie efficace. De plus, les Canvas sont simplement des images matricielles, donc le texte créé à l'intérieur n'est pas accessible, et elles ne se redimensionnent pas bien.