Conseils pour un site responsive réussi !

Le responsive, qu’est-ce que c’est exactement ?

---

Le but du responsive, est de rendre votre site visible sur tous types et toutes tailles d’écrans, du smartphone à l’écran d’ordinateur, en passant par la tablette. Vous aurez donc un seul et même site web dont les éléments qui le composent viendront s’adapter et se positionner différemment en fonction de la taille de l’écran de l’appareil que vous utilisez pour surfer sur le web.

Comme vous avez pu le constater, la consultation des sites internet sur mobiles et tablettes a pris énormément d’ampleur depuis plusieurs années. En effet, en 2018, selon une étude de Médiamétrie, le mobile est devenu l’écran numéro 1 pour se connecter à internet. Le responsive design est donc devenu incontournable afin de rendre votre site web accessible à tous et d’en faciliter la navigation depuis un smartphone ou une tablette.

Les conseils pour réussir son site internet responsive 

Tout d’abord, la première chose à faire est de définir les différentes tailles sur lesquelles votre site sera optimisé. Généralement, 3 tailles moyennes sont définies, celle d’un écran d’ordinateur, celle d’un écran de tablette et celle d’un écran de smartphone. Il est possible de fonctionner par tranche de taille. Dans le code html de votre site, vous pourrez par exemple indiquer : Pour un écran jusqu’à 400px, l’affichage se fera comme cela, puis pour un écran jusqu’à 800px, l’affichage se fera comme cela et enfin pour un écran jusqu’à 1900px, l’affichage se fera comme cela.

Maquette en fonction de l’écran

Ensuite, une fois vos tailles choisies, vous pouvez, si votre agence web vous le propose, définir avec elles différentes maquettes en fonction des tailles d’écrans. Ceci afin d’envisager le positionnement des différents blocs présents par exemple sur votre page d’accueil. Par exemple, si sur vote page d’accueil desktop, vous avez 2 images accolées, alors, sur mobile, afin qu’elles ne soient pas trop petites et plus visibles, il sera préférable de les mettre l’une en dessous de l’autre.

Les différences entre version desktop et mobile

La version responsive mobile de votre site internet, a pour but d’être simplifiée ou modulée par rapport à votre version desktop afin d’assurer une bonne visibilité. En ce qui concerne le menu de navigation, sur mobile, on le retrouvera davantage sous forme de menu déroulant afin que la police soit lisible étant donné que la largeur de l’écran sera beaucoup plus petite.

Donc, si votre version desktop présente une image pleine largeur sous forme de diaporama, il sera peut-être judicieux d’afficher ses photos sur une autre page et sous un autre format afin qu’elles soient bien visibles.

De plus, certains blocs ou certaines informations, ont plutôt vocation à apparaître sur une version desktop qu’une version mobile où l’internaute recherchera une information précise et ce rapidement. N’hésitez donc pas à supprimer ces informations sur version mobile.

Les erreurs à ne pas commettre 

En termes techniques, il y a des erreurs à ne pas commettre afin d’optimiser l’affichage de votre site internet sur version mobile responsive.

Tout d’abord, au niveau des tailles de vos éléments par exemple, ne leur donner pas de taille en pixel mais plutôt en pourcentage afin que les éléments viennent s’adapter parfaitement à la taille de l’écran. Il en sera de même pour les images.

Si votre image fait 800px mais que votre écran en fait 450, alors votre image sera tronquée. Il est donc préférable de lui donner une taille maximale, toujours en pourcentage.

Aussi, éviter d’utiliser des tableaux avec <tr><td>, car la largeur d’un écran d’ordinateur ne contiendra pas le même nombre de colonne que l’écran d’un smartphone. Le tableau sera donc tronqué.

En conclusion…

le responsive est devenu incontournable dans la création d’un site internet pour vous assurer d’être visible peu importe l’écran utilisé par vos clients ou prospects pour visiter votre site.
Néanmoins, cette technologie nécessite de se pencher sur quelques préparations graphiques et techniques pour un résultat optimal.

Viaduc a optimisé ses chartes graphiques afin de répondre au mieux aux diverses contraintes du responsive. Même si certaines manipulations doivent se faire manuellement, la plupart se gèrent automatiquement.

Vous souhaitez refaire votre site internet ou tout simplement en concevoir un via notre éditeur ? Rien de plus simple !
Rendez-vous sur notre site https://www.viaduc.fr/
ou appelez-nous au 01 85 08 72 61  .
Nos conseillers se feront un plaisir de vous apporter réponse en fonction de vos besoins et de votre budget.