Le design responsive est le fait de pr\u00e9senter la m\u00eame page en s’adaptant aux supports <\/strong>de visualisation de l’utilisateur.<\/strong> Que l’on soit sur un mobile, une tablette ou un ordinateur, la page r\u00e9organise les \u00e9l\u00e9ments pour un affichage adapt\u00e9 \u00e0 la largeur de l’\u00e9cran. Il y a un r\u00e9el travail \u00e0 fournir pour optimiser le code au niveau des balises, des images, de la typographie, de la navigation et des diff\u00e9rents \u00e9l\u00e9ments composant la page. C’est un gros travail \u00e0 r\u00e9aliser pour les d\u00e9veloppeurs qui doivent fournir plus d’efforts pour afficher correctement la page sur tous les navigateurs. Heureusement des frameworks comme Bootstrap permettent de simplifier l’int\u00e9gration une base de travail tr\u00e8s avanc\u00e9e. Le m\u00e9tier de d\u00e9veloppeur web et d’int\u00e9grateur s’en trouve facilit\u00e9 en r\u00e9duisant les d\u00e9lais de conception d’une page HTML.<\/p>\n\n\n\n Dans l’ann\u00e9e qui a suivi la publication du livre d’Ethan Marcotte, le W3C standardisa les m\u00e9dias queries<\/strong> comme une toute nouvelle fonctionnalit\u00e9 du CSS 3 apr\u00e8s plus de 10 ans de travaux. Cette avanc\u00e9e majeure permet aux d\u00e9veloppeurs et aux int\u00e9grateurs d’appliquer du CSS en fonction de la largeur du navigateur ou de tout autre \u00e9l\u00e9ment. C’est une standardisation allant dans le m\u00eame sens que l’apparition des navigateurs modernes dans les syst\u00e8mes iOS et Android. Le concept de design responsive est donc fortement li\u00e9 \u00e0 l’usage du mobile sur Internet, d’ailleurs en 2017 pour la premi\u00e8re fois l’usage des navigateurs mobiles sur le net est sup\u00e9rieur \u00e0 celui des ordinateurs.<\/p>\n\n\n\n Le Responsive Web Design<\/strong> fait r\u00e9f\u00e9rence \u00e0 de nombreux concepts pour faciliter l’ergonomie sur les diff\u00e9rents supports. Par exemple les \u00e9l\u00e9ments de la page s’affichent diff\u00e9remment en fonction de la largeur de la fen\u00eatre. Le menu de navigation est affich\u00e9 normalement sur un navigateur desktop mais sur mobile il se mat\u00e9rialise par menu burger ouvrant une sidebar quand on clique dessus. Ces concepts peuvent aussi cr\u00e9er des probl\u00e8mes au niveau r\u00e9f\u00e9rencement par exemple avec un menu diff\u00e9rent sur mobile et desktop on peut doubler le nombre de liens dans une page. Il est important de r\u00e9fl\u00e9chir \u00e0 tous les impacts que chaque \u00e9l\u00e9ment responsive peut engendrer et de mettre en place une solution pour l’utilisateur sans impacter le r\u00e9f\u00e9rencement.<\/p>\n\n\n\n Aujourd’hui tous les frameworks JavaScript \/ CSS <\/strong>sont bas\u00e9s sur le responsive design. Que ce soit Bootstrap, Tailwind CSS, Foundation ou les autres, ces outils proposent une base de code tr\u00e8s pouss\u00e9e pour cr\u00e9er des pages adaptatives sur tous les supports. Ils poss\u00e8dent une panoplie de fonctionnalit\u00e9s comme les breakpoints, les conteneurs, les grilles, les colonnes, la navigation, etc. Toutes ces fonctionnalit\u00e9s permettent aux d\u00e9veloppeurs de site Internet d’acc\u00e9l\u00e9rer leurs d\u00e9veloppements en \u00e9tant plus rapides et donc plus rentables. Depuis 2011 ces frameworks open source \u00e9voluent et sont devenus des r\u00e9f\u00e9rences en responsive design et en d\u00e9veloppement web.<\/p>\n\n\n\n Il n’y a pas de version<\/strong> du responsive web design, ce n’est pas consid\u00e9r\u00e9 comme un standard tel quel. C’est un concept qui \u00e9volue en fonction des techniques partag\u00e9e par la communaut\u00e9 des d\u00e9veloppeurs, des chercheurs et des standards du W3C. Une grande difficult\u00e9 vient des \u00e9crans \u00e0 tr\u00e8s grande r\u00e9solution comme les \u00e9crans 4K et plus. Dans la majorit\u00e9 des cas le site va s’afficher avec une largeur fixe au-del\u00e0 de 1200 ou 1400 pixels et rester centr\u00e9 \u00e0 l’\u00e9cran, mais il est possible d’afficher des zones et des textes plus grands.<\/p>\n\n\n\n Les moteurs de recherche comme Google <\/strong>recommandent l’utilisation du responsive design<\/strong> pour cr\u00e9er des pages HTML et les diff\u00e9rentes raisons avanc\u00e9es sont les suivantes :<\/p>\n\n\n\n Le web est une industrie qui \u00e9volue rapidement et il est intrins\u00e8quement li\u00e9 aux \u00e9volutions du secteur informatique<\/strong>. Sans la d\u00e9mocratisation des smartphones et des tablettes, le responsive design n’aurait jamais \u00e9merg\u00e9 ou plus tardivement. Cet ensemble de r\u00e8gles n’est pas oblig\u00e9 d’\u00eatre suivi \u00e0 la lettre, chaque d\u00e9veloppeur peut int\u00e9grer les fonctions d’un framework qu’il souhaite utiliser et les compl\u00e9ter par les siennes. On trouve beaucoup de ressources et des essais en responsive web design fait par des d\u00e9veloppeurs ou des professionnels.<\/p>\n\n\n\n Tous les templates WordPress ou des autres CMS incorporent ce concept et le mettent en avant dans leurs communications pour vendre leurs produits. Il existe \u00e9galement des entreprises et des freelances sp\u00e9cialis\u00e9s en int\u00e9gration web et qui transforment une maquette en un code CSS utilisant le responsive design.<\/p>\n\n\n\n Enfin des leaders du secteur informatique proposent des chartes et des r\u00e8gles \u00e0 suivre pour faire \u00e9voluer les interfaces web au niveau graphique et interactif en am\u00e9liorant l’exp\u00e9rience utilisateur. On retrouve par exemple le Material Design<\/strong> de Google ou Fluent<\/strong> chez Microsoft ou encore les \u00e9volutions du design de iOS et iPadOS chez Apple. Les applications proposent aussi un design adaptatif en fonction du support de l’utilisateur que ce soit une tablette ou un smartphone. Les web designers peuvent s’inspirer de ces recommandations pour proposer des interfaces web plus innovantes, intuitives et ergonomiques.<\/p>\n![\"\"](\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/illustration_responsive-web-design.jpg\")
Les frameworks responsives<\/h2>\n\n\n\n
\n
L’avenir sur responsive<\/h2>\n\n\n\n