Le temps des sites web centrés en taille fixe est « presque » révolu. Les problèmes d’intégration liés aux bugs d’affichage des vieux navigateurs n’est plus au cœur des préoccupations des intégrateurs. Avec le développement massif du web mobile sur smartphone, tablette, mini tablette, de nouveaux enjeux techniques et marketing apparaissent. Il faut désormais réussir à concevoir des sites dont le contenu pourra s’adapter aux différentes tailles d’écrans sans bouleverser l’expérience utilisateur. On parle de responsive design pour définir ce concept.

Concevoir un site extensible pour différentes tailles d’écran nécessite de poser 3 bases techniques : Premièrement, recourir à l’utilisation d’un Viewport adapté au responsive design. Dans le code HTML c’est lui qui forcera la taille du site web à suivre celle de l’écran (device-width, device-height).

Ensuite, côté feuille de style, il faudra jouer avec des unités en pourcentage pour les tailles de bloc, les marges, etc, afin que le template du site devienne complétement extensible. On parle de template fluide.

Cependant, dans certains contextes la solution de redimensionnement n’est pas forcement idéale. C’est le cas par exemple avec des blocs qui une fois redimensionnés deviennent trop petit pour faire ressortir correctement du texte ou des images.

Dans cet exemple, un redimensionnement des blocs de droite pose un problème car les images deviendraient trop petites et donc illisibles.

Résolution écran : 1024px

Les media queries vont permettre de résoudre ce problème, en appliquant des styles CSS différents selon les tailles d’écran. On pourra par exemple choisir de forcer un bloc à passer à la ligne ou bien de le masquer.

Voici un exemple avec des blocs repositionnés en dessous de 1024px.

Résolution écran : 768px

Il faudra également être vigilant sur les résolutions d’images à utiliser pour un affichage optimal multi-device. On pourra privilégier l’utilisation d’images HD qui s’afficheront parfaitement sur des écrans haute définition type Retina (Apple) ou Hdpi/Xhdpi (Samsung, Sony).

En amont de la phase d’intégration il faudra raisonner sur des interfaces prenant en compte ces contraintes. L’usage d’un story-board précis pourra alors décrire les comportements des différentes zones du site selon les tailles de devices : smartphones, tablettes.

Enfin, côté création, le design choisi devra être simple et épuré (flat design) pour bien se prêter au redimensionnement ou au repositionnement des différents éléments.

Trois gros avantages apparaissent pour un site en responsive design :

– Une seul URL de site pour l’internaute
– Une conception unique
– Une maintenance simplifiée

Mais aussi quelques inconvénients :

– Des problèmes de performances (toutes les données du site sont chargées même si on n’affiche par exemple que la moitié sur un mobile)
– Les gabarits de pages sont parfois longs et complexes à intégrer
– Des créations parfois trop sobres pour faciliter l’extensibilité du design du site

Le responsive design est donc une solution intéressante pour intégrer des sites de contenu simple du type blog ou vitrine. Pour ceux ayant beaucoup de médias : vidéo, images HD (gourmand en bande passante), on privilégiera de faire des sites distincts, dédiés à chaque terminal (mobile/desktop/tablette…). Bien évidemment, cette approche est également pertinente dès lors que les besoins et les attentes des utilisateurs en matière de fonctionnalités sont très différents selon qu’il se trouve en situation de mobilité ou bien devant son PC.

Cependant, l’arrivée de RESS (responsive design + server side component) permet déjà de combler les faiblesses du responsive design. Cette technologie côté serveur permet de ne charger que les fonctionnalités utiles pour le device utilisateur. Les problèmes de performance sont donc résolus.

Dans les prochaines années, le RESS a donc de bonnes chances de s’imposer sur un plus large panel de dispositifs digitaux !