Même si j’ai déjà employé le terme de “site responsive” plusieurs fois sur ce blog, je m’aperçois que je ne sais pas vraiment ce que ça signifie.

En discutant ce matin avec Laurent, je lui ai demandé de me préciser exactement ce qu’est un site responsive.

En 2 mots, c’est un site dont le design s’adapte automatiquement à la taille de l’écran sur lequel il est affiché.

Laurent a beaucoup insisté sur ce sujet. Je vous donne un compte-rendu de cet échange, sous forme de 6 points-clés à savoir sur le responsive design.

1- C’est quoi le Responsive Design d’un Site Web ?

Tout sur la Notion de Site Responsive, en 6 Points-Clés - Marketing Digital

L’une des premières mentions du responsive design nous est due à Ethan Marcotte, dans cet article qui date de 2010 !

Pour faire simple, un site responsive c’est un site qui s’adapte (du mieux possible) aux innombrables devices (appareils en français) qu’on utilise aujourd’hui pour naviguer sur Internet.

Par exemple, votre iPhone, votre tablette Samsung, votre écran d’ordinateur de 22 pouces, ou encore votre PC portable…

Comme on peut l’imaginer, un site dont les dimensions et l’architecture ont été imaginées pour un seul de ces appareils pourra être difficile à visualiser sur les autres types d’écrans. Sur un smartphone tout est affiché en vertical à la différence d’un PC où c’est beaucoup plus “carré” comme affichage.

Le responsive design, c’est donc l’adaptation du site à ces différents contextes, et cela porte en particulier sur ces points :

  • Le redimensionnement des pages
  • La navigation et le défilement des pages
  • Le recadrage dynamique (des images en particulier)
  • La facilité de lecture

2- A Quoi Ca Va Me Servir Un Site Responsive ?

C’est très simple : selon cet article des Echos, le trafic mobile (sur smartphone et tablette), représentera 67% du trafic Internet en 2019.

Tout sur la Notion de Site Responsive, en 6 Points-Clés - Marketing Digital

Autant dire qu’avoir un site Web normal (pour écran de PC) sera moins important que d’avoir un site adapté aux nouveaux terminaux connectés à Internet.

Compte tenu du fait qu’autant de monde navigue en mode nomade, vous risqueriez de perdre beaucoup de visiteurs si vous n’aviez pas une version responsive de votre site.

Un site responsive vous permet donc ne pas perdre de visiteurs (clients…), mais aussi de leur réserver le meilleur accueil possible.

En effet, pensez à ce petit scénario : Jean est installé dans son siège dans le métro parisien et il navigue sur un site Web. Mais ce site est très lourd à charger, les images sont grosses, et le menu de navigation est illisible. Lorsqu’il agrandit le menu, celui-ci ne se recadre pas correctement et il est impossible de cliquer sur les liens. La frustration de Jean est exactement ce qu’il faut éviter ! Un visiteur qui subit une telle expérience a très peu de chances de devenir un client, au contraire, il va fuir chez les concurrents.

Sachez aussi que les sites responsives sont favorisés par Google dans la liste de ses résultats organiques. Donc si votre site ne l’est pas, vous risquez de perdre des places dans les résultats Google !

3- Quelles sont les Options pour Rendre un Site Responsive ?

OK maintenant que je vois de quoi il s’agit, je comprends l’intérêt d’un site responsive design. Mais la question logique qui suit est de savoir comment avoir un site responsive !

Tout sur la Notion de Site Responsive, en 6 Points-Clés - Marketing Digital

Il y a plein d’options mais parcourons ici les 3 principales :

Un site mobile dédié

Ici, il s’agit tout simplement de créer un site dédié aux terminaux mobiles.

On va par exemple créer un site pour les smartphones, un autre pour les tablettes, et un “normal” pour les écrans d’ordinateur.

Bon, l’avantage évident c’est qu’il n’y aura plus de problème d’adaptation à l’appareil puisque le site aura été créé exprès, mais par contre, quelle complexité ! Cela veut dire devoir gérer plusieurs sites en parallèle, grosso modo pour le même contenu et les mêmes objectifs.

Beaucoup trop compliqué selon moi 🙂

Une application native

Une application native est un logiciel qui se télécharge sur le smartphone ou la tablette, gratuitement ou de manière payante.

Pour chaque système d’exploitation (iOS pour Apple, Android pour Google, WindowsPhone pour Windows), on retrouve toutes les applications disponibles au sein de grands magasins d’applications en ligne : l’AppStore pour Apple, Google Play pour Google, Windows store pour windows).

Donc Jean, dans le métro, à la place de visiter un site non adapté, pourra être automatiquement redirigé vers une page lui proposant d’aller télécharger l’application (car une page Web est capable de déterminer quel type d’appareil est utilisé).

Il pourra télécharger en quelques clics votre application et naviguer de manière très fluide sur celle-ci. C’est vraiment super comme expérience et le client en sera très content.

Tout sur la Notion de Site Responsive, en 6 Points-Clés - Marketing Digital

Mais l’inconvénient c’est que c’est cher de créer une application mobile. Il faut l’adapter pour Apple et Google au minimum… et cela nécessite de la maintenance régulière. Les développeurs capables de créer des applications sont encore, pour l’instant, moins nombreux que ceux qui maîtrisent WordPress.

Donc, bien que l’idée soit super, c’est trop compliqué pour moi !

Une version responsive du site actuel

Vous l’aurez compris, c’est l’option que je préfère. Il s’agit de modifier le site Web existant pour qu’il soit adapté aux mobiles et tablettes.

J’ai trouvé 2 solutions et je vais vous dire comment faire dans les points qui suivent.

4- Et WordPress dans tout ça ?

Si vous avez comme moi choisi WordPress comme CMS, il faut savoir que tous les thèmes graphiques proposés pour WordPress ne sont pas responsives.

Donc la solution la plus simple pour moi est de choisir un thème responsive.

En allant par exemple sur https://wordpress.org/themes/,

  • Cliquer sur les Filtres
  • Sélectionner “Responsive layout”, comme présenté ici (d’abord cliquez sur l’élément pointé par la flèche rouge puis celui par la flèche verte) :

Tout sur la Notion de Site Responsive, en 6 Points-Clés - Marketing Digital

Si vous choisissez un thème WordPress payant, en général tous les sites les proposant indiquent clairement s’ils sont responsives, comme par exemple sur la page du thème « Salient » sur Themeforest.

Voici le verrez dans la documentation du thème, ici pour cet exemple :

Tout sur la Notion de Site Responsive, en 6 Points-Clés - Marketing Digital

5- Mais encore plus sur WordPress pour le responsive

Choisir un thème responsive n’est pas votre seule solution !

En effet, comme nous le présente cet excellent article (un peu vieux toutefois), il existe de nombreuses extensions (plugins) pour WordPress qui permettent de garder votre thème existant et le rendre responsive.

L’article ci-dessus recense trois extensions que je vous liste ici :

Sachez qu’il y a des nouvelles extensions créées en permanence, donc faites des recherches de manière régulière.

Pour ma part, je trouve cette solution utile quand on a un site existant et que l’on a pas le temps de changer le design via un nouveau template. C’est donc pour moi une solution temporaire. Pour ma part, comme je me lance sur le web, je choisirai directement un thème responsive.

6- Last but not least : testez et testez encore !

C’est un principe général dans toute activité Web, que ce soit sur un plan technique ou marketing.

Il faut faire des tests pour valider ses “a priori”. Cela permet d’éviter des erreurs qui peuvent être dommageables pour notre site Web.

Dans cette logique de bon sens, je vous propose, après avoir passé votre site Web WordPress en site responsive, de tester celui-ci sur :

  • Un iPhone récent
  • Une tablette
  • Un Mac
  • Un PC
  • Et d’ici quelques années, une montre connectée et des lentilles de contact connectées 🙂

Ainsi vous serez sûr(e) que le site est bien responsive pour tous ces terminaux connectés.

Et voilà, c’était un point un peu technique, mais très important pour la simple raison qu’une part croissante du trafic sur Internet vient d’ailleurs que des PC et Mac traditionnels 🙂

Je sais maintenant ce qu’il me reste à faire : investiguer tout cela pour mon blog Audrey Tips !

Et vous, qu’en pensez-vous ? Avez-vous des retours d’expérience sur le responsive design, des façons de procéder, des choses à garder à l’esprit ?


Also published on Medium.