Envisager la création d’un site Internet uniquement comme une manière d'afficher des informations est aujourd'hui une idée dépassée, notamment grâce à l'influence des smartphones et des tablettes. Mais comment résoudre le problème d'une présentation fluide sur différents appareils ? Les termes « Responsive Webdesign » ou « conception de sites web adaptatifs » résonnent familièrement. Le « Responsive Webdesign » peut être approximativement divisée en deux domaines : « Adaptive Layout » et « Responsive Layout ». Mais que recouvrent réellement ces concepts et lequel des deux doit-on utiliser ? Voici un éclairage bienvenu parmi les ténèbres de la mise en page !
Quelle est la différence entre un Adaptive Layout et un Responsive Layout ?
La conception de sites web adaptatifs « Responsive Webdesign » vise à permettre un affichage fluide d'un site Internet sur n'importe quel support, que ce soit un smartphone, une tablette ou un ordinateur. Pour cela, des éléments comme les images, les polices et les barres de navigation, sont conçus de manière « flexible » ou « élastique ». Le site Internet s'adapte alors à la largeur d'écran de l’appareil.
Les mises en page réactive et adaptative sont toutes deux rattachées au responsive web design, soit la conception de sites web adaptatifs. Elles prennent plus ou moins en charge les mêmes éléments, ce qui aboutit souvent à des formes mixtes. Toutefois, il existe des différences marquées.
Le Adaptive Layout est réalisée individuellement pour chaque format d'affichage. Il en découle différentes structures en fonction de l’appareil concerné (smartphone, tablette, moniteur). Il s'agit d'une mise en page comportant différentes largeurs fixes. Chaque largeur est caractérisée par ce que l'on appelle un « point d'arrêt » (break point).
Afin de constater par soi-même où se situent les points d'arrêt d'un site Internet, il suffit de réduire la largeur de la fenêtre du navigateur. La page est de nouveau « verrouillée » au niveau de certains points, où des éléments vont alors disparaître ou se modifier : la barre latérale disparaît, la barre de navigation se modifie, le logo se déplace et les images s'ajustent.
Mise en page adaptative
Source: http://cafeevoke.com/
Cafe Evoke a choisi une mise en page adaptative pour sa page d'accueil. L'illustration ci-dessus montre trois fois la même page : sur un ordinateur (1), sur une tablette (2), sur un smartphone (3). C’est l'espace vide sur les pages des images 2 et 3 qui permet notamment de conclure à une solution adaptative. Les images et la police ne sont pas élastiques. Elles ont une taille prédéfinie pour chaque support. On l'observe particulièrement sur le slider d'image : en passant de l'ordinateur à la tablette, une partie a été coupée.
Mise en page réactive
À l'inverse, une mise en page réactive s'affiche avec des trames flexibles. Cela signifie qu'il continue d'y avoir des points fixes à partir desquels la mise en page s'oriente, mais les éléments placés entre ces points fixes sont désormais flexibles. L'espace du support est ainsi parfaitement exploité. Aucun espace qui pourrait être rempli avec du contenu n'est laissé vide.
Source: http://stephencaver.com/
Le site Internet de Stephen Caver en est un bon exemple. Les trois images représentent de nouveau ce qui est vu sur un ordinateur (1), un iPad (2), et un iPhone (3). Sa page est réactive. Elle ne laisse aucun espace inutilisé. Même lorsque la fenêtre du navigateur se réduit, la police et la bannière d'en-tête s'ajustent proportionnellement à la taille de l'écran. Il n'y a alors aucun espace vide laissé autour des bords de la page.
Les différents éléments sont positionnés en relatif. Une barre latérale doit par exemple occuper un tiers de la surface d'affichage. En cas de solution réactive, les images et les polices sont élastiques et adaptent leur dimension au support. Cela s'annonce très prometteur car les nouveaux appareils permettent également de nouvelles résolutions d’écran.
Quelle est la meilleure solution ?
De prime abord, il semble facile de répondre à la question : le Responsive Layout s'avère le meilleur choix. Cependant, il faut tenir compte du revers de la médaille, et certaines raisons justifient que l’on ne recourt pas à des trames flexibles.
un Responsive Layout doit être intégrée dès la conception du site Internet. Les images et les éléments doivent être flexibles, ce qui n'est pas souvent le cas pour les sites Internet existant déjà. Pour les entreprises, une refonte complète d'un site est hors de question. Cela nécessite donc de recourir à une solution pragmatique. La réponse est alors donnée avec le terme « adaptatif », synonyme d’une intégration après coup.
Avec les trames flexibles, le travail est, comme son nom l'indique, flexible. C'est pourquoi il est difficile d'évaluer le produit fini. Aucune planification n'est suffisamment parfaite pour prévoir des chiffres précis.
Le développement d'une mise en page flexible coûte cher. La durée et les frais requis pour ce type de page sont significativement plus importants que pour des mises en page adaptatives. La phase de test dure également plus longtemps, ce qui engendre des coûts supplémentaires et des ressources plus élevées.
Toutefois, une mise en page réactive présente d'énormes avantages. À l'inverse d'une mise en page adaptative, elle est préparée d'après des nouveaux modèles. Elle ne doit donc pas être réadaptée à d'éventuels futurs supports.
Le principal avantage de la mise en page réactive réside dans sa flexibilité. Là où un Adaptive Layout atteint ses limites, le Responsive Layout continue sa progression. Tout l'espace est parfaitement exploité sur chaque support.
Résumé
La communauté des webdesigners s'accorde pour dire que la conception de sites web adaptatifs « Responsive Webdesign » est promise à un bel avenir. Mais quel est le meilleur choix pour aujourd'hui ?
Pour les nouveaux sites Internet, c'est évident : une trame flexible et un Responsive Layout sont la bonne solution. Grâce à la flexibilité de la mise en page, son utilisation devient incontournable sur les nouveaux types d'appareils.
Toutefois, il convient de noter que cela coûte plus cher qu'une solution adaptative. Pour les sites web déjà existants, il s'avère en partie impossible d'intégrer une mise en page réactive. Cela ne vous empêche pas pour autant de vivre avec votre temps et de vous adapter aux nouveaux formats d'affichage. Pour ces sites Internet, la mise en page adaptative avec largeurs fixes convient alors parfaitement.