Créer un design responsive

Présentation

Le responsive est une méthode permettant de rendre votre site compatible sur n'importe quelle taille d'écran. Il adaptera son contenu automatiquement en fonction de sa largeur. Exemple sur mon site, avec les différentes tailles d'écran :

Le principe du responsive est d'appliquer une surcouche CSS en fonction de la largeur de l'écran, grâce aux Media Queries. Le contenu de la page ne change pas, le HTML reste le même, juste certaines règles qui s'appliqueront en plus. Vous pouvez tester par vous-même directement sur cette page, en redimensionnant la taille de votre navigateur (si vous êtes sur ordinateur, bien entendu).

Découverte des Media Queries

L'attribut media de la balise link existe depuis le CSS2. Elle permet d'associer la feuille de style au média sélectionné (screen pour les écrans, print pour l'impression, projection pour les projections, ...) :

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

Il est par ailleurs possible de le faire directement en CSS :

1 @media screen {
2     /* ... */
3 }
4 @media print {
5     /* ... */
6 }

Les Media Queries (en CSS3) nous permettent de faire des restrictions bien plus sélectives, en nous offrant de nouvelles propriétés, certains prenant des paramètres numériques. Par exemple :

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

Voici quelques propriétés intéressantes que les Media Queries proposent :

• width, min-width, max-width : largeur de la zone d'affichage
• height, min-height, max-height : hauteur de la zone d'affichage
• orientation : Orientation de l'écran (landscape ou portrait)

Vous trouverez la liste complète sur W3.org.

Mise en place d'un design responsive

Avec les Media Queries, c'est maintenant assez facile d'appliquer des propriétés CSS en fonction de la largeur de l'écran. En testant par vous-même de redimensionner le navigateur sur votre site, vous pouvez voir ce qui vous semble non adapté, et donc ajouter une surcouche CSS vous permettant soit, par exemple, de réduire la largeur de l'élément, soit même de le cacher.

Prenons un exemple concret : dans le footer de ce site, il y a 3 blocs : la liste des derniers articles, la liste de mes réseaux sociaux, ainsi que la liste de mes derniers tweets. Tous sont affichés si votre navigateur fait plus de 1000 pixels de large. Cependant, avec une largeur inférieure, vous pourrez voir que les tweets disparaissent :

1 @media screen and (max-width: 1000px) {
2     #last_tweets
3     {
4         display: none;
5     }
6 }

Et avec une largeur encore moins large (inférieur à 600px), il ne reste plus que mes réseaux sociaux, et le texte est centré :

 1 @media screen and (max-width: 600px) {
 2     #bloc_articles
 3     {
 4         display: none;
 5     }
 6     .bloc h6
 7     {
 8         text-align: center;
 9         margin: 0 0 10px;
10         padding: 0;
11     }
12     .bloc p
13     {
14         text-align: center;
15     }
16 }

Conclusion

Cette technique est bien plus simple que de faire un thème spécialisé pour les mobiles, et de rediriger vos visiteurs dessus. Surtout qu'il faut aussi penser à ceux avec des tablettes, ou même ceux avec des grands écrans. Avec un design responsive, vous n'aurez qu'un seul thème/site à maintenir.

Attention cependant à bien penser à l'ergonomie et aux ressources. Les éléments cachés dans votre page sont quand même chargés (les images, les derniers tweets, les scripts JS, ...). Vos visiteurs sont peut-être avec une connexion type 3G, et il est inutile de les faire charger tout un tas de ressources dont ils ne serviront pas. Pensez également que la navigation sur mobile ne se fait pas pareil qu'avec une souris devant un écran. La navigation sur votre site doit être fluide et simple, les boutons pas trop gros, la police pas trop petite, ...