Le responsive design regroupe un ensemble de techniques et de codes permettant \u00e0 un site internet de s’adapter automatiquement \u00e0 toutes les tailles d’\u00e9cran. Gr\u00e2ce \u00e0 cette approche, il n’est plus n\u00e9cessaire de cr\u00e9er plusieurs versions d’un m\u00eame site (par exemple, une pour les ordinateurs et une autre pour les smartphones) : un seul site suffit, simplifiant ainsi la gestion et les mises \u00e0 jour.<\/p>\n\n\n\n
Aujourd’hui, cette capacit\u00e9 d’adaptation n’est pas seulement une question d’exp\u00e9rience utilisateur : elle influence \u00e9galement le r\u00e9f\u00e9rencement naturel. Google privil\u00e9gie d\u00e9sormais les sites responsives, leur offrant une meilleure visibilit\u00e9 dans les r\u00e9sultats de recherche.<\/p>\n\n\n\n
Un site responsive est cr\u00e9\u00e9 de sorte \u00e0 s’accommoder \u00e0 toutes les r\u00e9solutions d\u2019\u00e9cran (mobiles, tablettes, etc.) :<\/p>\n\n\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/responsive.gif\")
Votre site web doit pouvoir se lire et se consulter aussi bien sur un petit \u00e9cran de t\u00e9l\u00e9phone que sur un large \u00e9cran d\u2019ordinateur, pour une meilleure exp\u00e9rience utilisateur<\/a>.<\/p>\n\n\n\n En adoptant un design responsive, le menu de votre site doit automatiquement s\u2019adapter \u00e0 tous types d\u2019\u00e9crans. Cette redimension ne fonctionne pas toujours, notamment si vous avez un menu tr\u00e8s large. Par d\u00e9faut, il va donc appara\u00eetre sur 2 lignes, ce qui diminue l\u2019ergonomie de la navigation.<\/p>\n\n\n\n Vous disposez alors de trois solutions pour cr\u00e9er un menu efficace<\/a> :<\/p>\n\n\n\n La force majeure des sites issus du responsive design, ce sont les blocs. Ils se d\u00e9placent et s’alignent diff\u00e9remment selon la taille de l’\u00e9cran. Il faut donc penser \u00e0 son site comme \u00e0 un jeu de construction modulable, dont les briques peuvent s’agencer diff\u00e9remment, de haut en bas ou de gauche \u00e0 droite. Il est m\u00eame possible d’envisager d’en supprimer quelques-unes pour certains supports.<\/p>\n\n\n Pour que le site soit agr\u00e9able pour tous, il faut donc l’imaginer d\u00e8s le d\u00e9part sur les plus petits \u00e9crans de smartphone, ceux d’anciennes g\u00e9n\u00e9rations. Partir du plus petit pour aller vers le plus grand est la norme habituelle pour ce proc\u00e9d\u00e9.<\/p>\n\n\n\n Dans la majeure partie des cas, il faut imaginer que vos blocs s’aligneront sur une seule colonne sur les \u00e9crans les moins larges… et se demander dans quel ordre vous voulez les voir appara\u00eetre.<\/p>\n\n\n\n \u00c0 lire aussi : Web Design : 5 \u00e9tapes basiques pour un site web performant<\/a><\/p>\n<\/blockquote>\n\n\n\n La compatibilit\u00e9 des affichages sur tous les appareils est aussi valable pour les images. Les photos \u00e0 largeur fixe cr\u00e9ent des probl\u00e8mes d\u2019adaptation, comme des barres de d\u00e9filement lat\u00e9rales et compliquent la navigation sur t\u00e9l\u00e9phone.<\/p>\n\n\n\n Solution\u00a0: Utilisez des dimensions relatives (en pourcentage) et d\u00e9finissez des maximums via des media queries<\/a>.<\/p>\n\n\n\n Pour que l’affichage soit adapt\u00e9, les formats des polices de caract\u00e8re comme des images doivent se modifier automatiquement. Il est \u00e9vident qu’il sera inutile de proposer une image qui occupe tout l’\u00e9cran d’un ordinateur sur un smartphone, au risque que l’utilisateur doive la faire d\u00e9filer pour arriver au menu.<\/p>\n\n\n La r\u00e9solution doit \u00e9galement \u00eatre revue \u00e0 la baisse pour ces outils portables, dont la connexion n’est pas toujours optimale. On part d’une marge allant de 320 \u00e0 480 px pour les smartphones jusqu’\u00e0 1 200 px pour les plus grands \u00e9crans.<\/p>\n\n\n\n Chaque type d’appareil n\u00e9cessite une feuille de style personnalis\u00e9e pour offrir une exp\u00e9rience utilisateur optimale. Pour cela, on utilise les media queries<\/strong>, des outils puissants qui d\u00e9tectent les caract\u00e9ristiques de l’appareil (comme la taille de l’\u00e9cran ou la r\u00e9solution) et ajustent automatiquement l’affichage du site en cons\u00e9quence. Gr\u00e2ce \u00e0 ces r\u00e8gles CSS, la mise en page s’adapte de mani\u00e8re fluide, garantissant une navigation harmonieuse sur tous les supports.<\/p>\n\n\n\n Sur un appareil mobile, les internautes veulent une navigation simple et intuitive. Ils n\u2019ont ni le temps ni la patience de chercher un menu cach\u00e9 ou de lutter pour cliquer sur un bouton trop petit. Les \u00e9l\u00e9ments interactifs, comme les boutons call-to-action<\/a>, doivent donc \u00eatre bien visibles, clairs et facilement accessibles pour garantir une exp\u00e9rience fluide et agr\u00e9able.<\/p>\n\n\n Leur taille ne doit pas \u00eatre trop r\u00e9duite et leur iconographie s’appuiera sur des codes universels. Tout le monde sait aujourd’hui qu’un triangle qui pointe vers la droite fait d\u00e9marrer une vid\u00e9o ou que trois petits traits align\u00e9s symbolisent un menu.<\/p>\n\n\n\n Ne cherchez pas \u00e0 faire plus original, vous risqueriez de perdre vos visiteurs !<\/p>\n\n\n\n L’ancienne \u00e9cole de d\u00e9veloppeurs et de web designers reste parfois ancr\u00e9e dans l’id\u00e9e que la priorit\u00e9 doit \u00eatre donn\u00e9e aux sites pour ordinateurs<\/a>, rel\u00e9guant la conception mobile au second plan. Pourtant, cette m\u00e9thode est d\u00e9sormais d\u00e9pass\u00e9e !<\/p>\n\n\n\n Aujourd’hui, penser ordinateur et mobile simultan\u00e9ment<\/strong> est essentiel. Cette approche implique une r\u00e9flexion globale et int\u00e9gr\u00e9e d\u00e8s les premi\u00e8res \u00e9tapes de conception, pour garantir une exp\u00e9rience fluide et coh\u00e9rente sur tous les \u00e9crans.<\/p>\n\n\n\n Adopter cette strat\u00e9gie duale est la cl\u00e9 pour concevoir un site v\u00e9ritablement responsive, capable de s\u2019adapter aux attentes des utilisateurs tout en maximisant vos chances de transformer vos visiteurs en clients fid\u00e8les.<\/p>\n\n\n La cr\u00e9ation d\u2019un site responsive impose plusieurs d\u00e9fis, notamment en ce qui concerne l’affichage des contenus. L’objectif est de trouver le juste milieu<\/strong> entre trop peu de contenu et trop de contenu.<\/p>\n\n\n\n Sur mobile, il est crucial d\u2019all\u00e9ger le site tout en veillant \u00e0 ce que les utilisateurs aient acc\u00e8s \u00e0 toutes les informations n\u00e9cessaires pour \u00eatre convaincus par vos offres.<\/p>\n\n\n\n Pour optimiser le chargement et l\u2019exp\u00e9rience mobile, certains \u00e9l\u00e9ments peuvent \u00eatre r\u00e9duits ou supprim\u00e9s, tels que :<\/p>\n\n\n\n Cela permettra de garantir une navigation fluide tout en conservant l’essentiel pour convaincre vos visiteurs.<\/p>\n\n\n\n Certaines technologies, comme Flash<\/strong>, ne s’affichent pas sur mobile. Google a \u00e9t\u00e9 clair \u00e0 ce sujet : si vous utilisez encore Flash sur la version bureau de votre site, il est imp\u00e9ratif de passer au HTML5<\/strong> pour la version mobile. Cette transition est cruciale pour garantir que vos contenus soient visibles sur tous les appareils modernes.<\/p>\n\n\n\n Un autre pi\u00e8ge \u00e0 \u00e9viter : les erreurs 404<\/a>. Ces erreurs, souvent caus\u00e9es par de mauvaises redirections entre la version mobile et le site principal, peuvent rapidement frustrer les utilisateurs. Si un mobinaute tombe sur une URL inexistante, il risque de quitter votre site sans plus de retour.<\/p>\n\n\n\n Pour \u00e9viter cela, assurez-vous de v\u00e9rifier r\u00e9guli\u00e8rement votre site avec Google Webmaster Tools<\/a> afin de d\u00e9tecter et corriger toute erreur 404.<\/p>\n\n\n\n En r\u00e9sum\u00e9, pour optimiser votre visibilit\u00e9 et capter efficacement les mobinautes, il est essentiel que votre site responsive offre une exp\u00e9rience utilisateur irr\u00e9prochable, tout en remplissant vos objectifs.<\/p>\n\n\n\n1. Un menu s\u2019inscrivant sur deux lignes<\/h2>\n\n\n
![\"site](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/site-responsive.jpg\")
\n
2. N\u00e9gliger la construction par block pour votre site responsive<\/h2>\n\n\n\n
![\"site](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/theme-wordpress-responsive.jpg\")
<\/figure><\/div>\n\n\n\n
3. Utiliser des images \u00e0 largeur fixe<\/h2>\n\n\n
![\"design](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/logo-responsive.gif\"){kind=logo}
<\/figure><\/div>\n\n\n4. Ne pas adapter la r\u00e9solution des visuels<\/h2>\n\n\n\n
![\"web](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/09\/von_wong_photography_responsive_design_preview-e1569589978231.jpg\")
<\/figure><\/div>\n\n\n5. Ne pas optimiser l’accessibilit\u00e9 des boutons<\/h2>\n\n\n\n
![\"design](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/bouton-animation.gif\")
<\/figure><\/div>\n\n\n6. D\u00e9velopper le site bureau et le site mobile ind\u00e9pendamment<\/h2>\n\n\n
![\"responsive](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/graphiste-mobile-responsive.jpg\")
![\"responsive](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/graphiste-site-responsive-1.jpg\")
<\/figure><\/div>\n\n\n7. Vouloir afficher tous les contenus<\/h2>\n\n\n\n
\n
8. Oublier d\u2019optimiser l\u2019affichage des pages sur mobile<\/h2>\n\n\n
![\"responsive](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/site-mobile-responsive.jpg\")
9. Vouloir tout faire vous-m\u00eame<\/h2>\n\n\n
![\"design](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/mobile-responsive.jpg\")