C’est l’un des grands thèmes de cette année : le responsive web design, ou design adaptatif, un affichage des pages web qui s’adapte aux terminaux des utilisateurs. Nous consacrons un billet à ce thème car, si au premier coup d’œil les avantages peuvent sembler évidents, le responsive web design n’est pas forcément nécessaire pour tous les sites internet.
Que signifie responsive webdesign ?
Imaginez que vous possédez non seulement un ordinateur portable ou un ordinateur de bureau avec moniteur, mais également une tablette et un smartphone.
Et maintenant consultez le même site internet sur ces trois terminaux – quelles sont les différences de mise en page ? Dans de nombreux cas, il n’y en a tout simplement pas. Pourtant, il semble évident que le site web devrait revêtir une autre apparence sur l’iPad que sur le grand écran de l’ordinateur fixe.
C’est cela, justement, le responsive web design : la mise en page d’un site web réagit en fonction de l’appareil. Il s’adapte, de manière flexible, à la résolution disponible de l’écran, positionne différemment le contenu en fonction de l’appareil et adapte les textes, images et autres éléments à la bonne échelle. D’un point de vue technique, cela passe principalement par des codes CSS spécifiques qui sont envoyés au terminal concerné.
Ainsi, un site en responsive web design réussi ressemble aux exemples ci-dessus (galerie d'images)
Mais quel est l’intérêt du responsive web design ?
Ces dernières années, les web designers étaient contraints de faire un grand écart entre des moniteurs d’ordinateurs fixes affichant des résolutions toujours plus élevées et l’utilisation croissante de petits appareils mobiles pour surfer sur internet. Cela a eu deux conséquences : d’une part l’affichage des sites web n’était pas parfait sur tous les appareils et, d’autre part, les web designers devaient composer avec une multitude de résolutions d’écran, qu’il fallait - dans la mesure du possible - toutes prendre en compte. Pour être plus clair : rien que parmi les différents terminaux mobiles, la résolution varie de 240x320 pixels sur un petit téléphone portable à 768x1024 pixels sur l’iPad en mode portrait. Les moniteurs des ordinateurs de bureau atteignent une résolution de 1280 pixels.
Le responsive web design est une solution potentielle à cet exercice très ardu auquel se plient les web designers : si un site web est doté d’un design adaptatif, il réagit en fonction du terminal et affiche les contenus en mode multi-colonnes sur l’ordinateur de bureau par ex. alors que les mêmes contenus sont affichés sur une seule colonne sur l’iPhone.
Quel est l’avantage pour l’utilisateur ? La convivialité d‘utilisation ! Car les utilisateurs ne sont plus liés aux appareils pour pouvoir visualiser votre site internet. Un responsive design bien pensé est en lui-même concluant et facilite la vie de l’utilisateur. Certes, le positionnement du contenu varie en fonction de la résolution, mais les éléments centraux tels les logos ou les thèmes de couleurs restent identiques et l’utilisateur s’y retrouve facilement, sans avoir à apprendre à connaître la nouvelle structure de navigation.
Quel est l’investissement requis par le responsive web design ?
Quels que soient les avantages qu’offre la mise en page adaptative, il ne faut évidemment pas négliger l’investissement supplémentaire. Avant de se lancer, plein d’entrain, dans la création d’une page avec responsive design, il faut ainsi se demander si cela est vraiment nécessaire pour l’entreprise ou le projet en question.
Car un site internet avec une réaction si flexible constitue un projet important et concerne l’ensemble des étapes du développement : lors de la phase de conception, des versions pour ordinateurs fixes et des versions mobiles doivent être conçues, puis plusieurs versions supplémentaires sont nécessaires pour les différentes résolutions. Le codage CSS et les tests qui sont ensuite effectués entraînent également un supplément d’investissement.
Pour résumer, on peut dire que le responsive web design est une tendance qui pourrait rapidement gagner du terrain à l’avenir car il renferme d’importants potentiels de convivialité d’utilisation et de portée. Néanmoins, le responsive web design n’est pas automatiquement la meilleure solution pour tous les sites internet, car il faut que le rapport coût / investissement soit équilibré.
À quoi ressemble votre site internet sur différents appareils ?
Vous voulez voir à quoi ressemble votre site actuel avec différentes résolutions ? Sur http://mattkersley.com/responsive/ ou http://quirktools.com/screenfly/ vous pouvez tester chaque URL.
D’après vous, quand le responsive web design est-il indiqué – et quand ne l’est-il pas ? Connaissez-vous d’autres exemples de sites internet réussis ?