Le Responsive Design est aujourd’hui en passe de devenir un standard de facto dans la création de sites web professionnels. Popularisé rapidement par la déferlante des smartphones et autres tablettes numériques, cette nouvelle manière de concevoir le layout des sites web s’appuie très largement sur des bonnes pratiques et des fonctionnalités apparues avec CSS3, notamment les media queries, et est facilitée par le déploiement des librairies JavaScript telles JQuery.
L’objectif du Responsive Design est de créer des sites web adaptés à tous les usages et une grande variété de supports, particulièrement en situation de mobilité. Les sites web sont donc conçus nativement pour réagir instantanément en fonction de l’appareil, de la taille, de la résolution, etc.
Plus besoin donc de développer un site spécifiquement conçu pour les mobiles, le site sera d’emblée adapté tant pour ceux-ci, que pour les tablettes ou les écrans HD. Au départ, réservée à une avant-garde de web designers en pointe sur les questions techniques, en 2012 cette solution semble s’imposer pour le plus grand nombre. La plupart des CMS du marché, tels Joomla ou Wordpress, proposent aujourd’hui des templates conçus selon les principes du Responsive Design.
L’évolution rapide des résolutions d’écran (1200X800 est aujourd’hui la norme) mais surtout l’élargissement de la gamme des appareils bénéficiant d’un accès à internet, a grandement contribué à l’adoption massive des techniques du Responsive Design. L’approche qui consistait jusqu’alors à créer des designs différents en fonction du support et des mises en page flexibles semble avoir vécue, condamnée à terme par la multiplication effrénée des nouveaux appareils.
L’avantage indéniable du design réactif est de pouvoir s’adapter aux appareils d’aujourd’hui et d’anticiper les nouvelles plate-formes qui pourront voir le jour à l’avenir, les bonnes pratiques évoluant en parallèle aux innovations techniques.
Au final, s’il est judicieux pour les développeurs et designers de s’engager dans la voie du responsive design, car cela réduit le temps et les coûts de développement de plusieurs sites distincts et la charge de débogage technique, cela apporte surtout un confort d’utilisation et une expérience plus riche pour les internautes, qui, quel que soit le type d’appareil utilisé, continuent à bénéficier d’un même confort de navigation.
Alors, qu’en est-il en pratique ? Il y a plusieurs bonnes habitudes à respecter lors de la conception graphique d’un site basé sur les principes du Responsive Design. On pense bien sûr à la navigation, qui en général, sur les grands écrans s’étale à l’horizontal, afin de ne pas obliger l’internaute à scroller. Sur les écrans de petite taille, contraints en largeur, il est judicieux de repenser à ce principe de navigation et lui préférer un regroupement des boutons, sous forme de menu déroulant. La simplicité reste le maître-mot et il conviendra de se concentrer sur l’essentiel et de laisser de côté les effets sophistiqués.
Au niveau typographique, on prendra soin d’augmenter la taille des polices pour les grandes résolutions et de les diminuer pour les petites, afin de conserver un nombre de mots par ligne plus ou moins constant et une bonne lisibilité.
En ce qui concerne les images et autres contenus médias, il faudra avoir recours à des scripts pour recadrer et diminuer en taille les images afin d’adapter celles-ci aux caractéristiques de l’écran. Des bibliothèques de scripts, basées la plupart du temps sur JQuery, telle Response JS, peuvent rendre la tâche plus aisée.
Enfin, les requêtes média CSS3, permettront de mieux cibler les règles à appliquer en fonction de la résolution d’écran de l’appareil. Par exemple, il suffit d’utiliser la syntaxe @media screen and (min-width : 800px) (max-width : 1200px) { body { font-size : 1em ;} }
pour spécifier une taille de texte en résolution standard et faire varier celle-ci en fonction des paramètres de largeur minimale (min-width) et maximale (max-width).
Aujourd’hui, il existe quantité de scripts – la plupart du temps en JavaScript ou basés sur JQuery - permettant de mettre en pratique les principes du Responsive Design de manière simple et créative et d’offrir un confort d’utilisation aux internautes, quel que soit le type d’appareil utilisé pour la navigation. Il n’y a donc plus d’excuses à ne pas se lancer dans la conception graphique de sites respectant les usages du Responsive Design.
| |
Le Responsive Design, guide des bonnes pratiques web
13:47
Création site web en Tunisie
,
Responsive web design
,
Site web adaptatif
,
Web Design tunisie
Edit
0 commentaires:
Enregistrer un commentaire