J’emploie souvent le terme de “site responsive”.

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 s’affiche.

Laurent a beaucoup insisté sur ce sujet.

Voici un compte-rendu détaillé 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 ?

6 points clés sur la notion de site Responsive - Marketing Digital

L’une des premières mentions du responsive design nous est due à Ethan Marcotte. Ethan est un designer web qui en 2010 évoque le responsive pour la première fois dans cet article sur A List Apart !

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

Par exemple, un site web parfaitement lisible sur votre iPhone, votre tablette Samsung, votre écran d’ordinateur de 22 pouces, ou encore votre PC portable…

Comme vous l’imaginez, un site dont les dimensions et l’architecture sont conçues pour une seule de ces tailles d’écran est difficilement visualisable sur les autres types d’écrans. Par exemple, sur un smartphone, tout est affiché en vertical à la différence d’un PC où le design est beaucoup plus “carré” comme affichage.

Le responsive design est donc la facilité d’adaptation d’un site Web à ces différents contextes, et en particulier :

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

2. Quelle est l’utilité d’un Site Responsive ?

6 points clés sur la notion de site Responsive - Marketing Digital

C’est très simple.

Selon cet article des Echos, le trafic mobile (sur smartphone et tablette) en 2019 représente 67% du trafic Internet.

Autant dire qu’un site Web « normal » (pour écran de PC) est 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 perdez beaucoup de visiteurs si vous n’avez pas une version lisible sur mobile du site Web de votre entreprise.

Avec un site responsive, non seulement vous ne perdez pas de visiteurs (clients…), mais aussi vous leur réservez 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 perdez des places dans les pages de résultats de Google !

3. Quelles sont les options pour rendre un Site Responsive ?

6 points clés sur la notion de site Responsive - Marketing Digital

Maintenant que vous comprenez l’intérêt d’un site responsive design, la question suivante est de savoir comment avoir un site responsive !

Il y a de nombreuses options mais parcourons les 3 principales :

Un site mobile dédié

Pourquoi pas créer un site dédié aux terminaux mobiles.

Par exemple créer 3 versions du design selon le type d’écran :

  • Smartphones,
  • Tablettes,
  • Ordinateur.

Evidemment, vous éliminez le problème d’adaptation à la taille d’écran puisque un design spécifique a été créé exprès.

Par contre, quelle complexité !

En effet, vous allez 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), vous retrouvez les applications disponibles au sein de magasins d’applications en ligne appelées les « Stores » :

  • AppStore pour Apple,
  • Google Play pour Google,
  • Windows store pour windows.

Donc Jean, dans le métro, au lieu de visiter un site non adapté, peut être automatiquement redirigé vers une page pour télécharger l’application vers le bon « Store ».

En effet, c’est facile de déterminer quel type d’appareil est utilisé.

En 2 ou 3 clics, Jean télécharge votre application et navigue de manière très fluide sur celle-ci. C’est une expérience client idéale et votre internaute est forcément content. Et de votre côté, vous savez que Jean a votre application sur son mobile avec lequel il se déplace en permanence. Vous l’avez fidélisé.

6 points clés sur la notion de site Responsive - Marketing Digital

Mais 2 principaux inconvénients :

  • Vos internautes doivent télécharger votre application. Ce n’est pas facile à obtenir de la part des clients qui vous sont peu fidèles.
  • Le développement d’une application mobile est un investissement non négligeable. En plus, il est nécessaire d’avoir au moins 2 versions : Une pour Apple et une autre pour Google Android … Sans parler de la maintenance régulière. Et les développeurs d’applications mobiles sont moins nombreux que ceux qui maîtrisent WordPress.

Donc, bien que l’idée soit séduisante, elle semble trop onéreuse pour moi !

Une version responsive du site actuel

Vous l’avez compris, Avoir une version responsive de #audreytips est mon option préférée. Et c’est a priori la plus simple puisqu’il s’agit de modifier le site Web existant pour qu’il soit adapté aux mobiles et tablettes.

J’ai trouvé 2 solutions que je veux vous présenter.

4. Et WordPress dans tout ça ?

Si vous avez comme moi retenu WordPress comme CMS, sachez que les thèmes graphiques proposés pour WordPress ne sont pas forcément « responsives ».

Pourtant, la solution la plus simple est de choisir un thème responsive.

Pour cela, rendez-vous sur la bibliothèque de thèmes de wordpress, puis :

  • Cliquez sur les Filtres
  • Sélectionnez “Responsive layout”,
  • Puis cliquez sur Apply filter pour afficher la liste des thèmes responsive.

6 points clés sur la notion de site Responsive - Marketing Digital

Note : Sélectionnez d’abord la boîte à cocher (flèche rouge) puis le bouton (flèche verte).

En général, tous les sites proposant des thèmes WordPress indiquent clairement s’ils sont responsives.

Par exemple la page du thème « Salient » sur Themeforest indique clairement ce critère :

6 points clés sur la notion de site Responsive - Marketing Digital

5- Mais encore plus sur WordPress pour le responsive

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

En effet,  l’article de Fidel Navamuel sur « outils WP« , énumère de nombreuses extensions (plugins) pour WordPress pour rendre responsive votre thème existant.

L’article date un peu mais il recense 2 extensions gratuites pour rendre votre thème responsive :

Je n’ai pas testé ces extensions. Je vous conseille de les installer puis de vérifier immédiatement que votre site ne comporte pas d’erreur. Vous n’êtes jamais sûr que ce type d’extension magiques soient compatibles avec votre existant.

Il y a des nouvelles extensions en permanence, donc recherchez de manière régulière.

Pour ma part, cette solution est séduisante pour un site existant pour lequel vous le voulez pas modifier le design via un nouveau template. C’est une solution temporaire et, comme je me lance sur le web, je choisis 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”. Ainsi, vous évitez des erreurs dommageables pour notre site Web.

Dans cette logique, une fois le design responsive installé sur votre site Web, testez, testez, et re-testez 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 êtes sûr(e) que le site est bien lisible sur tous ces tailles d’écran.

Et voilà, c’est 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 🙂

Autre piste, principalement pour les sites essentiellement textuels, le format Google AMP.

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.