Les sites changent de visage, 2013 est l’année du Responsive Web Design

Cette année marquera le web avec une nouvelle tendance de conception de sites internet. Il suffit de voir les sites de référence Mashable, Smashing Magazine ou encore Time.com qui ont lancé leurs nouvelles versions repensées totalement avec les notions de web fluide et adaptatif et fortement allégé graphiquement. Ces sites sont passés au Responsive Web Design.

Visuellement, on présente le Responsive Web Design comme la méthode qui va permettre à un site de s’adapter dynamiquement, avec un seul template à plusieurs types de résolutions d’écran. De façon à être optimal aussi bien sur un écran de bureau, sur une tablette ou sur un smartphone.

Mais le RWD est un peu plus complexe que cela. Pour commencer, il est difficile de passer un site existant en Responsive, il faudra repenser toute la structure du site, mais également tout le design, car celui-ci doit être le plus léger possible. En effet, le Responsive va également permettre l’affichage du votre site sur mobile, là où les connexions internet sont souvent très lentes ( EDGE, voire GPRS ), il est déconseillé d’afficher des backgrounds de 900ko, ici, vous devez miser un maximum sur le CSS 3.

La conception d’un site responsive se fait à l’envers, il faut d’abord concevoir le mobile et ajouter des blocs petit à petit pour concevoir les versions du site. Il est recommandé également d’oublier le «liquid design» pour passer à un «fluid design», ce qui permettra de mieux contrôler tous les formats d’affichage existants.

Personnellement, je ne suis pas fan à 100% des ces sites élastiques dénués d’âmes, mais je tenais tout de même m’appuyer sur le Responsive Web Design pour améliorer l’expérience sur Techtrends. Si vous avez un écran large, vous ne verrez pas de différence avec la version précédente, sur Tablette, par contre, le site passe en affichage optimisé pour une lecture verticale et il pourra encore se réduire pour s’adapter au smartphone. Je n’ai pas réalisé de version pour les écrans larges, car je ne voyais pas d’intérêt d’ajouter des blocs de contenu inutiles ou d’étirer la zone du texte. En effet, lorsque j’ai choisi le format resserré pour mes articles, c’était pour faciliter la lecture de ceux-ci. Si les longues lignes de texte n’étaient pas optimales, il y a 5ans, je ne pense pas qu’elles le soient plus aujourd’hui, il faut donc faire attention à ne pas partir vers le but inverse à celui recherché, c’est-à-dire diminuer le confort de l’internaute. Si Smashing Magazine, référence dans le domaine, a de larges colonnes, c’est pour cette même raison.

En redimensionnant votre navigateur, vous pourrez facilement voir les étapes de ce site. Les techniques de modifications dynamiques du design s’appuient sur le CSS et jQuery, ce n’est pas particulièrement compliqué à réaliser. Là où les difficultés arrivent, c’est sur les smartphones et tablettes. Vous devez jouer sur le viewport pour proposer l’affichage qui s’adapte le mieux au smartphone. J’ai testé technique sur différents appareils mobiles d’Apple et un peu sur Android, mais je ne peux pas garantir que ça s’affiche de façon optimale sur toutes les platormes. Comme Il est préférable que le site s’affiche toujours à 100% de la largeur de l’écran et il faut donc faire énormément de tests avant de lancer un site au Responsive Web Design.

Actuellement, la version mobile de Techtrends n’est optimisée QUE visuellement. Un vrai site mobile ne devrait pas contenir de scripts et images lourdes que l’on emploie en général sur un site. Il faut également revoir les scripts de partage vers Facebook et Twitter qui devraient être remplacés par de simples boutons codés à la main.

Une vraie cassure dans nos habitudes de créateurs de sites web.

Le Responsive Web Design n’est pas une simple mode, c’est grosse évolution de la conception web, nécessaire, mais avec beaucoup de concessions. Avant de proposer à vos clients et vos supérieurs de revoir leur site en RWD, vous devez vous assurer qu’ils soient prêts à changer leurs habitudes, accepter d’être coincés dans une structure de site différente de ce qu’ils connaissent et prévoir beaucoup de temps pour les tests sur différents navigateurs. Mashable, un des sites responsive les plus avancés bugge totalement sur certains smartphones, c’est malheureusement inévitable, car les premiers navigateurs iOS et Android n’étaient pas complets dans leur gestion du CSS, quant à la compatibilité IE6-7, à oublier, on fait de l’HTML5, maintenant!

Quant à moi, je me réserve cette année pour découvrir, tester et analyser les bonnes idées en matière de Responsive Web Design, avant de revoir totalement le design de Techtrends. Et vous? Avez prévu de switcher prochainement?

Vous désirez réagir à cet article? Retrouvez-le sur la page Facebook de Techtrends

la diffusion d’annonces sur ce site relève de ma responsabilité et ne représente pas les positions d'une entreprise pour laquelle je travaille

Rédigé par
Chris Lefevre
Publié le
13 janvier 2013

00:28

Partagé sur
Partager+Twitter
Partager+Facebook
Partager+LinkedIn
Partager+Google+
Partager+Scoop-it!