Qu'est-ce qu'un site web Responsive?
 Marjorie Côté      /      7 septembre 2016

Qu’est-ce qu’un site web responsive?

 

Année après année, le nombre de personnes accédant à un site web à partir d’un téléphone intelligent (cellulaire) ou d’une tablette ne cesse d’augmenter. Il est donc devenu incontournable de créer des sites web responsive (« Responsive Web Design » en anglais) afin d’offrir l’expérience la plus confortable et ergonomique à ces utilisateurs. Mais que signifie « responsive »?

Le Responsive Web Design est une façon de concevoir un site web afin que son contenu s’adapte automatiquement selon l’appareil utilisé, que ce soit un ordinateur, un téléphone intelligent ou une tablette. Cela signifie donc que les pages, les images et le contenu d’un site web responsive se redimensionnent et se recadrent en fonction de la taille d’écran de l’appareil utilisé.

Par exemple, sur l’illustration ci-dessous, les 4 boîtes colorées apparaissent sur 4 colonnes sur un ordinateur alors que sur un téléphone intelligent, elles sont affichées sur deux colonnes et réparties sur deux rangées. De plus, vous remarquerez que le texte a lui aussi été redimensionné : il est divisé en 3 colonnes sur l’ordinateur et occupe la largeur (1 colonne) du téléphone intelligent.

 

Uni-d - Site web Responsive

 

C’est ce qu’on appelle un site web responsive puisque le contenu est centré automatiquement selon la taille de l’écran sans que l’utilisateur ait à déplacer ou agrandir le contenu pour bien lire.

Dans l’image suivante, vous verrez à quoi ressemble un site web qui n’est pas responsive sur un ordinateur, une tablette et un téléphone intelligent.

 

Uni-d - Site web non-Responsive

 

Un site web qui n’est pas responsive s’affiche de la même façon sur l’écran d’ordinateur que sur les tablettes et téléphones intelligents, mais plus l’écran du mobile est petit, plus le contenu est réduit. Cela force donc l’utilisateur à faire un zoom avant/arrière et à faire un mouvement gauche/droite avec ses doigts pour être en mesure de bien lire le contenu. Il s’agit là des deux actions les moins appréciées par les utilisateurs lorsqu’ils visitent un site web sur leur mobile. Vous devez toujours penser à la façon la plus simple, la plus agréable et la plus efficace pour les utilisateurs afin d’améliorer leur expérience lorsqu’ils consultent votre site web. Il faut comprendre que si votre site internet n’est pas adapté pour les mobiles, vous risquez de laisser une mauvaise impression à vos visiteurs.

 

Uni-d - Mobile - Zoom et mouvement latéral

 

Actuellement, il existe 3 façons d’afficher du contenu web sur des appareils mobiles : un deuxième site web consacré à la version mobile, une application mobile et le Responsive Web Design.

 

Il existe un si grand nombre d’écran de tailles différentes pour les téléphones intelligents et les tablettes qu’il faudrait faire autant de versions mobiles qu’il existe d’appareils différents, ce qui serait définitivement une perte de temps et d’argent. De plus, l’affichage d’un site web change complètement en fonction de l’orientation (paysage ou portrait) que vous donnez à votre cellulaire ou à votre tablette, ce qui veut dire qu’en plus de créer une version mobile pour les différents appareils, il faudrait en créer une pour les orientations de chacun de ces appareils.

Créer deux sites donne inévitablement deux fois plus de travail puisqu’il faut dupliquer toutes les informations du site internet sur la version mobile de ce dernier. Lorsqu’il s’agit d’un site mis à jour régulièrement, ce processus est très compliqué et peut causer de nombreuses erreurs.

En créant un seul site et de façon responsive, vous économiserez temps et argent tout en vous assurant que votre contenu soit correctement mis à jour sur tous les appareils mobiles. De plus, en créant deux sites distincts, vous obtenez des adresses différentes (Exemple : uni-d.ca et m.uni-d.ca) et le fait de dupliquer l’information nuit considérablement au référencement de votre site web.

 

« Pourquoi ne pas créer une application mobile pour mon site web? », me direz-vous. Bien que cela puisse sembler être une excellente alternative, l’application mobile comporte plusieurs inconvénients. En effet, elle doit être développée dans plusieurs langages différents (iOS, Android et Windows Phone) et le coût pour les licences, la maintenance de chacun des systèmes d’exploitation ainsi que le développement de l’application est faramineux!

Par ailleurs, les utilisateurs doivent faire une étape supplémentaire, soit télécharger votre application mobile sur l’App Store, Google Play ou Windows Store afin de consulter votre site web en version mobile. Et comme c’est le cas quand vous créez un deuxième site web, vous devez faire vos mises à jour à deux endroits : sur votre site web et sur votre application mobile.

Toutefois, une application mobile peut être très utile selon le domaine dans lequel vous êtes. Par exemple, il est très intéressant pour une équipe sportive d’avoir une application mobile puisque les partisans vont régulièrement sur son site web pour consulter les résultats et avoir des nouvelles.

Nous pourrions discuter encore longtemps des applications mobiles, mais nous nous concentrerons sur le Responsive Web Design pour la suite de cet article.

 

Depuis 2015, le nombre d’internautes à avoir effectué une recherche sur Google à partir d’un mobile (écran de moins de 6 pouces) est plus élevé qu’à partir d’un ordinateur. D’ailleurs, en avril 2015, Google a décidé de pénaliser les éditeurs de sites web qui n’adaptaient pas leurs pages pour les téléphones intelligents et les tables. Cela veut dire que lorsque les utilisateurs font une recherche avec leur mobile, Google privilégie les sites web ayant une version mobile (responsive) dans les résultats de recherche sur mobile.

Contrairement à une application mobile ou à un site web dupliqué, un site internet responsive exige très peu de maintenance en plus d’avoir un coût de développement très intéressant. En créant votre site web en Responsive Web Design, vous vous assurez d’avoir une adresse URL unique et vous évitez de faire des erreurs puisque vous n’avez pas de contenu à dupliquer et il n’y a qu’un endroit où vous pouvez faire vos modifications et vos mises à jour. De plus, avec le Responsive Web Design, votre site internet regroupe toutes les versions (classique et mobile), ce qui aide énormément son référencement naturel.

Un autre point positif du Responsive Web Design est que vous avez toujours l’option de visiter le site internet en version mobile ou en version classique (pour ordinateur) lorsque vous utilisez un téléphone intelligent ou une tablette. De plus, le Responsive Web Design permet de mettre en priorité certains éléments du site web qui sont plus importants sur mobile que sur un ordinateur afin d’optimiser l’expérience client. Par exemple, il arrive souvent de voir des restaurants qui ont un site web responsive mettre leur numéro de téléphone de l’avant beaucoup plus sur les mobiles que sur l’ordinateur.

 

Maintenant que vous en savez davantage sur le Responsive Web Design, vous vous demandez sûrement « est-ce que mon site web est responsive? ». Eh bien, vous devez savoir qu’il y a plusieurs moyens faciles et rapides pour le savoir. En voici trois :

  1. Vous pouvez consulter votre site web sur un téléphone intelligent ou sur une tablette. Si votre site internet s’affiche de la même façon que sur un ordinateur, mais en plus petit, et que le contenu est illisible; votre site n’est pas responsive.
  2. Ouvrez votre site web dans un navigateur (Google Chrome, Firefox, Safari, Internet Explorer, etc.) et réduisez la fenêtre, tel qu’illustré ci-dessous. Si le contenu de votre site se redimensionne et se réorganise lorsque vous réduisez la fenêtre, votre site est responsive.
  3. Google offre aussi un outil très simple et efficace afin de savoir si votre site internet est responsive. Il s’agit de Mobile Friendly. Vous n’avez qu’à écrire l’adresse URL de votre site web dans la case à cet effet et à cliquer sur le bouton « Analyser ».

 

Uni-d - Google Webmasters Tools - Mobile Friendly

Uni-d - Google Webmasters Tools - Mobile Friendly

Uni-d - Google Webmasters Tools - Mobile Friendly

 

Voyez ci-dessous ce que Google vous affichera lorsque votre site web est responsive (première image) et lorsqu’il n’est pas adapté pour les mobiles (deuxième image).

 

Uni-d - Google Webmasters Tools - Mobile Friendly - Résultat positif

 

Uni-d - Google Webmasters Tools - Mobile Friendly - Résultat négatif

 

Vous avez remarqué que votre site web n’était pas adapté pour les mobiles? Contactez-nous, il nous fera plaisir de vous donner une estimation de ce que pourrait représenter ce type de travail!