{"id":47218,"date":"2017-09-12T13:38:37","date_gmt":"2017-09-12T13:38:37","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-responsive\/"},"modified":"2026-06-10T10:33:36","modified_gmt":"2026-06-10T10:33:36","slug":"creation-site-responsive","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/fr\/creation-site-responsive\/","title":{"rendered":"Conception web responsive"},"content":{"rendered":"

L\u2019arriv\u00e9e des smartphones a marqu\u00e9 une v\u00e9ritable r\u00e9volution dans le monde du web design<\/strong>. Du jour au lendemain, tout le monde voulait \u00eatre le premier \u00e0 proposer des sites avec un design web responsive<\/strong>. C\u2019\u00e9tait presque de la magie : redimensionner la fen\u00eatre du navigateur et voir tout le site s\u2019adapter instantan\u00e9ment \u00e0 la nouvelle r\u00e9solution, jusqu\u2019\u00e0 en modifier la structure.<\/p>\n

Lorsque nous pr\u00e9sentions cela \u00e0 nos clients \u2013 ce qui peut sembler surprenant aujourd\u2019hui \u2013 ils \u00e9taient g\u00e9n\u00e9ralement stup\u00e9faits. Et pourtant, cela ne remonte pas \u00e0 si longtemps. D\u00e9sormais, cette approche est devenue la norme.<\/p>\n

Cependant, il reste encore beaucoup \u00e0 faire en mati\u00e8re de design web responsive<\/strong> ou adaptatif. Il ne suffit pas de s\u2019appuyer sur un framework CSS comme Bootstrap et de penser que tout le travail sera fait. Pour cr\u00e9er un v\u00e9ritable lien avec l\u2019utilisateur final<\/strong>, il faut lui offrir une exp\u00e9rience adapt\u00e9e \u00e0 son appareil<\/strong>. Cela implique de comprendre comment il interagit avec son support et d\u2019anticiper ses attentes de navigation.<\/p>\n

Sur un ordinateur de bureau, la souris reste l\u2019outil principal de navigation. \u00c0 l\u2019inverse, sur smartphone, la navigation est tactile : il est donc essentiel de concevoir un design web<\/strong> qui facilite cette interaction.<\/p>\n

Les cl\u00e9s d\u2019un bon design web responsive<\/h2>\n

Menu de navigation<\/h3>\n

Le menu de navigation doit \u00eatre simple d\u2019utilisation<\/strong> pour l\u2019utilisateur. Pour cela, il est judicieux d\u2019int\u00e9grer un bouton qui affiche le menu<\/strong> de notre design web<\/strong>, que ce soit en le faisant glisser depuis le c\u00f4t\u00e9 ou en le d\u00e9roulant vers le bas. Cette solution permet de gagner de la place et d\u2019offrir une interface plus claire.<\/p>\n

\"dise\u00f1o<\/a><\/p>\n

 <\/p>\n

Images adaptatives et coh\u00e9rentes<\/h3>\n

Il est essentiel que les images de votre design soient parfaitement adaptatives<\/strong>. Elles doivent s\u2019afficher correctement autant sur un \u00e9cran de 27″ que sur un iPhone<\/strong>.<\/p>\n

Au-del\u00e0 de cet aspect fondamental, il est crucial de veiller \u00e0 la coh\u00e9rence des proportions. Les images doivent respecter l\u2019orientation de l\u2019appareil<\/strong> ou de l\u2019\u00e9cran. Par exemple, une image tr\u00e8s panoramique pens\u00e9e pour la version desktop risque, sur smartphone, de n\u2019occuper que quelques centim\u00e8tres de hauteur pour toute la largeur de l\u2019\u00e9cran \u2013 ce qui n\u2019a souvent pas de sens.<\/p>\n

La meilleure solution consiste donc \u00e0 proposer un format interm\u00e9diaire<\/strong> ou \u00e0 remplacer l\u2019image<\/strong> sp\u00e9cifiquement pour l\u2019affichage sur mobile.<\/p>\n

Ordre et hi\u00e9rarchie<\/h3>\n

L\u2019ordre dans lequel vous organisez les sections de votre site est primordial. En passant \u00e0 une version mobile, la plupart des contenus seront affich\u00e9s en une seule colonne, les uns sous les autres. Il faut donc anticiper l\u2019ordre dans lequel l\u2019utilisateur d\u00e9couvrira vos sections<\/strong> et placer les plus importantes en haut de page<\/strong>.<\/p>\n

Moins, c\u2019est mieux<\/h3>\n

Dans la continuit\u00e9 du point pr\u00e9c\u00e9dent, il est recommand\u00e9, lors de la conception pour mobile, de supprimer les sections non essentielles<\/strong> pour les visiteurs sur ces appareils. Par exemple, les pieds de page classiques peuvent \u00eatre supprim\u00e9s ou r\u00e9duits \u00e0 une simple ligne d\u2019informations de contact.<\/p>\n

Exploitez toutes les fonctionnalit\u00e9s disponibles<\/h3>\n

Pour optimiser l\u2019exp\u00e9rience sur smartphone, il est indispensable de tirer parti des fonctionnalit\u00e9s sp\u00e9cifiques \u00e0 ces appareils. Par exemple, si la version desktop propose une carte de contact, la version mobile devrait permettre d\u2019ouvrir directement le GPS en un clic<\/strong>. Vous pouvez \u00e9galement int\u00e9grer des boutons d\u2019appel direct<\/strong> pour simplifier la prise de contact.<\/p>\n

Quelques chiffres cl\u00e9s<\/h2>\n

Aujourd\u2019hui, les statistiques montrent que la majorit\u00e9 des internautes consultent les sites web depuis un appareil mobile<\/strong>. On compte 51 % de visiteurs sur mobile<\/strong> contre 42 % sur desktop<\/strong>, les 7 % restants utilisant d\u2019autres types de terminaux.<\/p>\n

\"diseno<\/a><\/p>\n