Comment passer son site en responsive design ?

Comprendre l’importance de l’adaptabilité de votre site sur tous les supports est une chose, le mettre en application en est une autre. Suivez le guide !

Cela fait déjà quelques années qu’Internet est dans le quotidien de la majorité de Français, sa place n’est plus à discuter ! Nous devons donc suivre une règle absolue : comprendre les nouvelles habitudes des internautes pour créer un support web qui leur parle réellement.

Il y a de ça quelques jours, nous mettions en avant la nécessité et même l’importance de l’aspect responsive design des sites internet aujourd’hui.

Pour rappel, le responsive design est une méthode de conception de site internet qui assure une consultation et navigation efficace et fluide sur tous les supports possibles (mobiles, tablettes, ordinateurs…).

Maintenant, il est nécessaire de voir comment ça se passe en application réelle ! Prenez votre carnet de notes, installez-vous et c’est parti :

• 3 étapes pour créer un site internet responsive efficace
• Le cas d’une refonte : comment faire ?

3 étapes pour créer un site internet responsive efficace

Créer des maquettes de site pensées pour le format mobile

Tout bon projet de site web commence par la phase de maquettage. Il s’agit du moment où le webdesigner, votre prestataire web, s’emploie à créer des visuels (des maquettes) qui représentent une image de ce à quoi va ressembler le site.

Nous vous recommandons, dès cette phase, de penser d’abord à un format mobile pour votre site web. En effet, la navigation sur un smartphone (ou une tablette, d’ailleurs) et sur un écran de bureau sont deux expériences très différentes : votre site doit s’adapter à l’une comme à l’autre. D’ailleurs, notez que le format mobile représente 60 % du trafic web mondial : il est donc primordial que votre site professionnel soit adapté à ce support !

Si vous souhaitez créer votre site web professionnel seul, veillez à ce que le logiciel de création de site utilisé (CMS), respecte les bonnes pratiques du responsive design. Si vous utilisez WordPress ou Prestashop par exemple, attention à votre choix de modèle (templates), puisqu’ils ne s’adaptent pas tous aux différents formats.

Et Simplébo ?

Le logiciel de création de site internet Simplébo propose des designs optimisés pour tous les supports ! Vous pouvez facilement choisir les éléments d’une page qui doivent apparaître ou non sur mobile, par exemple. Dans les paramètres, vous avez la possibilité d’avoir directement un rendu de l’affichage de vos pages sur mobile et tablette.

Aussi, sachez qu'avec nous, pas besoin de maquetter votre site : un simple questionnaire à remplir et nous vous envoyons 4 propositions de design, puis le tour est joué !

Penser à l'expérience des visiteurs du site sur mobile

Lors du maquettage de votre site, vous devrez penser à la navigation entre les différentes pages pour les utilisateurs de smartphones. Celle-ci doit être aussi simple et intuitive que sur un ordinateur.

L’écran étant beaucoup plus petit sur mobile, il faut que tous les éléments qui permettent de passer d’une page à l’autre s’adaptent. Ce doit être le cas :

• Du menu de navigation. Tandis qu’au format ordinateur, on aura souvent un menu horizontal, en format mobile et tablette, on choisira un "menu hamburger". Il s’agit généralement de 3 lignes horizontales qui, lorsque l’on clique dessus, permettent d’ouvrir un menu déroulant, rendant plus simple le passage d’une page à une autre. Cette disposition des éléments du menu est parfaitement adaptée au mobile et à la position des doigts d'un visiteur sur un smartphone.
  
  
• Des boutons d’appel à l’action. Ces boutons (ou bannières visuelles) sont le gage que vos visiteurs pourront se diriger vers les pages que vous leur recommandez. En format mobile, les appels à l’action seront plus grands et donc plus aisément cliquables du bout du doigt.
  
  
• Des formulaires. Qu’il s’agisse des formulaires de contact, de téléchargement, ou de demande de devis, la règle est la même : il doit être aisé de les remplir sur mobile et tablette. Les champs et leur description deviennent ainsi souvent plus larges, et le clavier de l’appareil utilisé permet de passer aisément d’un champ à un autre.

En soignant le caractère responsive de ces 3 éléments, vous assurez à vos visiteurs une navigation fluide et sans encombre.

Organiser les différents éléments du site web

On ne consulte pas Internet de la même manière sur un mobile que sur un ordinateur. Il est d’ailleurs prouvé qu’on passe significativement plus de temps à consulter une page sur écran de bureau que sur mobile. C’est pourquoi il est crucial de bien penser l’agencement de vos pages web en fonction du format mobile : vos clients potentiels devront être encore plus rapidement convaincus de l’intérêt de faire appel à vous.

Cela va se caractériser par des techniques de responsive design bien spécifiques :

• On choisira de n’utiliser qu’une seule colonne sur un format mobile. Conséquence ? Vos visiteurs devront simplement faire défiler la page pour voir le reste du contenu. Pensez donc à bien déterminer les éléments-clés qui doivent apparaître en tout premier sur vos pages. 
  
  
• Certains éléments vont même jusqu’à disparaître en responsive. Ce sera le cas, parfois, des images, ou d’une partie du texte non-nécessaire à la compréhension de votre message. À vous de juger quels éléments sont indispensables pour comprendre votre activité, et lesquels ne feraient qu’alourdir la navigation mobile. Sur l’outil Simplébo, un simple paramètre vous permet de déterminer si un élément est visible ou non en version mobile.
  
  
• Si vous avez une partie blog, la potentielle barre latérale va également disparaître sur mobile. On y trouve souvent des éléments très importants, tels que les “articles recommandés”, ou encore des appels à l’action pour s’inscrire à une newsletter, et télécharger un document. Il vous faudra donc trouver un moyen pour que ces éléments-clés passent en dessous ou dans le corps de votre article.
  
  
• Les blocs d’images doivent être configurés pour que leur taille s’adapte à n’importe quel support. Pour le dire simplement : votre site web doit être capable d’afficher les images dans une variété de tailles différentes, pour une expérience utilisateur optimale.

À savoir

Une étude montre que 67 % des utilisateurs déclarent que la lenteur d’un site est la raison principale d’abandon du panier. Ne négligez donc pas la performance de votre site internet responsive : si ses pages mettent trop de temps à charger, vous pourriez bien faire fuir vos potentiels nouveaux clients ! Pour tester la rapidité de chargement de votre site sur mobile et ordinateur, vous pouvez vous rendre sur l'outil "PageSpeed Insights" de Google. Si votre note est inférieure à 50 en mobile, vous devez impérativement optimiser votre site !

Le cas d’une refonte : comment faire ?

Vérifier que son site est bien responsive

Avant de vous lancer, le mieux est de vous rendre compte par vous-même de l’adaptabilité mobile et tablette de votre site internet. 

Plusieurs options s'offrent à vous :

• Réduisez la taille de la fenêtre de votre navigateur ;
  
  
• Rendez-vous sur le test d'optimisation de Google ;
  
  
• Consulter le rapport d'ergonomie mobile de l'ensemble du site sur la Search Console...

Rénover son site pour le rendre responsive

Vous avez détecté un problème de “responsiveness” sur votre site ? Vous êtes désormais confrontés à deux possibilités, pour régler le souci :

• D’une part, vous pouvez envisager de procéder à la refonte intégrale de votre site web. S’il n’est pas responsive, il est probable qu’il ait été conçu il y a longtemps, et que son architecture ne corresponde d’ailleurs plus vraiment à l’image que vous souhaitez donner de votre entreprise. Vous repartez sur des bases saines, en vous posant les bonnes questions pour votre nouveau site. Dans ce cas précis, l’équipe d’experts de Simplébo vous accompagne dans cette transition pour vous livrer un tout nouveau site responsive et au goût du jour !
  
  
• D’autre part, vous pouvez choisir d’adapter le design votre site web actuel au mode responsive. Sachez qu’il s’agit souvent d’un grand chantier, qui demande des compétences techniques en termes de graphisme, mais aussi de développement web (notamment en code HTML et CSS).

Que vous teniez absolument à l’apparence actuelle de votre site ou que vous souhaitiez procéder à sa refonte totale, n’hésitez pas à vous faire accompagner d’un expert, qui saura vous guider.

En plus de connaître les bonnes pratiques de responsive design, il doit pouvoir améliorer les performances de votre site, et vous aider à optimiser son référencement naturel sur les moteurs de recherche.

Chez Simplébo, c’est ce que nous nous employons à faire : vous offrir une création de site internet de qualité pour vous aider à développer votre activité grâce à Internet.