Intégration responsive : back to the roots

En 2012, personne (ou presque) ne peut se permettre de fermer les yeux devant l’intégration responsive. Face à la multiplicité des supports-écrans aux tailles pouvant varier de 240px à plus de 2500px, le responsive n’est plus une option, mais une norme.

Ce point de vue peut sembler extrême et ne s’applique pas dans certains cas où la présence du site n’a pas de sens sur les supports mobiles, mais pour la majorité des cas, il n’y a plus de compromis possible.

À l’heure actuelle, rendre un site responsive est simple et très accessible. En effet, il existe pléthore de Framework et autres Grid System qui faciliteront votre vie d’intégrateur. Vous pourrez ainsi rendre votre site proprement Responsive avec des mises en page redéfinies à chaque Media Queries. Ou encore, choisir l’angle d’attaque Fluid qui rendra votre site parfaitement réceptif aux redimensionnent du viewport.

Malgré tout, je pense qu’il est indispensable de maîtriser les bases de l’intégration responsive, bases qui existaient bien avant l’invention des Media Queries et des Framework CSS. Dans son talk lors de la Frontend conférence de Zurich, Rupert Breheny, un grand bonhomme au propre comme au figuré, a émis quelques principes de base à respecter scrupuleusement lors de l’élaboration d’un site :

— Toutes les pages doivent être rendues lisiblement sur tous les supports.
— Le contenu n’est écrit qu’UNE fois et est visible partout.
— On ne doit JAMAIS avoir de scrollbars horizontale !

Ces principes peuvent sembler d’une logique implacable, mais une fois ce credo respecté, votre site sera responsive !

Avant de tenter quoi que ce soit pour rendre votre site responsive, déclarez la méta viewport, indispensable au bon comportement de votre interface.

ou plus complète

Cette méta défini, en gros, que la largeur du contenu est égale à la largeur du support et empêche les zooms (positif ou négatif).

Ensuite, et pour la fin de votre vie, laissez tomber les width en pixel pour la structure et utilisez des max-width. Grâce à ce petit changement, vous pourrez définir une largeur à ne pas dépasser, même sur un grand écran, mais qui permettra toujours un redimensionnement négatif de votre bloc.

Ce principe est aussi valable pour les height. Laissez-les tomber pour des min-height qui permettront au contenu de se répartir vers le bas lors du redimensionnement négatif du viewport.

Maintenant, si vous souhaitez disposer de plusieurs colonnes, définissez une width en pourcentage et faites « floater » vos éléments. Vous obtiendrez ainsi une grille limitée en largeur par la max-width de votre wrapper et qui s’adaptera lors du redimensionnement.

Pour finir, les médias. Je sais ce que vous vous dites, c’est toujours une source de problèmes de rendre des médias reponsive, mais avec ces recettes, fini les soucis.