Tout cela implique désormais que les sites internet doivent s’adapter aux supports sur lesquels ils sont utilisés. Le design doit prendre en considération ces nouveaux supports et être pensé pour s’adapter à l’ensemble des écrans existants.
C’est donc ça le responsive design, faire que l’affichage d’un site web s’adapte à tous les médias connectés. Le responsive design, ou Web design réactif en français, est la réponse à la technologie moderne.
Le principe du web design réactif
Réactif, et oui bientôt les sites le seront tous, c’est-à-dire que selon la taille, la forme, la résolution et la capacité de l’écran utilisé les sites s’adapteront aux besoins du lecteur. Plus besoin de zoomer sur son mobile pour réussir à lire une page web, plus d’image coupée sur tablette, enfin un écran optimisé pour chaque support.
Une vraie petite révolution pour l’utilisation du web mobile qui devient plus simple et plus agréable. C’est la récente augmentation du nombre de smartphones et de tablettes qui soulève l’importance de basculer vers cette nouvelle technologie qu’est le responsive design.
Côté technique
Il y a quelques années encore, les designers et développeurs n’avaient qu’à se préoccuper d’un seul support média : l’ordinateur ! Et bien c’est fini, époque révolue, dorénavant l’approche avec une mise en page sur une largeur fixe n’est plus possible !
Heureusement, avec l’arrivée de nouveaux outils comme le HTML5, CSS3 et l’expansion du JavaScript, il est désormais possible de mettre en ligne plus simplement des sites accessibles, rapide et agréable, sur tous supports. Reste que cette technique demande une flexibilité importante des images, des colonnes et également des contenus. En effet, selon le support le contenu (images, texte, mise en page) va être repensé et adapté.
Le responsive design repose notamment sur trois grands principes : les media queries, la mise en page sur grille fluide et des images fluides.
– Les media queries : c’est une manière d’appliquer des règles de CSS (Cascading Style Sheets) à tous les supports selon leurs particularités (dimensions, couleurs, etc.). Cela permet l’ajustement et l’adaptation des sites au mieux pour tous les supports média.
– La mise en page sur grille fluide : on ne doit plus penser en pixel mais en pourcentage de la page totale. Ainsi, la dimension de chaque colonne sera calculée à chaque fois que la fenêtre navigateur changera de taille.
– Les images fluides : même principe pour les images, il faut des visuels fluides qui vont garder leurs proportions intactes quand la dimension de la page change.
Aujourd’hui, quasiment tous les sites Internet sont visités sur tous types de support et doivent donc pouvoir s’adapter. Les entreprises demandeuses de nouveaux sites Internet souhaitent qu’ils soient pensés et utilisables sur tous les supports médias existants.
Quelques sites déjà prêts !
Quelques sites bénéficient déjà de cette technologie, comme le site de la célèbre coffeshop Starbucks ou encore WWF qui a créé un site 3200 tigres sous le principe du responsive design. Testez en diminuant la taille de votre fenêtre internet et vous verrez le site s’adapter à la taille de votre fenêtre web.
Alors qu’en pensez-vous ? Cela change tout !
