Qu’est-ce que le Responsive Web Design ? Définition

Un site web ou une interface qui implémente le responsive web design est un outil digital qui a un affichage adapté à tous les formats d’écran aujourd’hui connu tel que :

  • Le smartphone
  • La tablette
  • L'ordinateur de bureau

Pourquoi utiliser le responsive design ?

Le nombre de support de navigation a triplé depuis l’arrivée des premiers ordinateurs personnels.

Un site internet en 2020 intègre naturellement un support pour les supports tablette et mobile, c’est aujourd’hui devenu une source de trafic non négligeable.

Google et le responsive web design

Le nombre de recherches mobiles a évolué de manière drastique ces 10 dernières années. Les recherches organiques provenant des supports mobiles occupent aujourd’hui 60% des recherches sur Google.

Le trafic mobile est devenu si important que Google a récemment annoncé indexer des pages et sites internet de manière différente en fonction du support sur laquelle la recherche est effectuée (desktop ou mobile).

Détection et analyse des pages responsive sur Google Search Console

Le design du moteur de recherche de Google est également repensé sur le format mobile. Google a même remplacé sa pagination historique des recherches pour convenir aux formats mobiles.

Responsive Web Design de la pagination Google

L’accessibilité des nouveaux supports de navigation

Aujourd’hui lorsque nous ne sommes pas sur notre lieu de travail la manière la plus rapide d’accéder à des informations concernant une ressource, un lieu ou un produit est le smartphone dans la majeure partie des cas.

La technologie des smartphone est à ce jour arrivée à maturité et permet aujourd’hui l’arrivée de téléphone à bas coût de très bonne qualité, avec des prix extrêmement compétitif tel que l’Iphone SE à 400$ ou encore le Google Pixel 4a à 349€.

Google Pixel 4a et Iphone SE

Une réelle guerre du meilleur rapport qualité/prix semble s'annoncer sur le marché du low cost entre les géants du web sur les prochaines générations de smartphone.

Aujourd’hui, tous les portefeuilles sont en mesure de se mettre aux normes. Les smartphones sont ainsi devenus un moyen plus populaire et accessible de naviguer sur le web qu’un ordinateur.

Ainsi il devient évident qu’un site qui ne présente aucune optimisation pour tous les formats d’écran mobile ou tablette perd des parts de marché considérable.

4 types de design utilisés sur le web

Petite piqûre de rappel concernant les 4 principaux types de design qui sont aujourd’hui utilisés sur le web.

Le design static

Le design statique consiste à fixer le design d’un site web sur une seule dimension.

Si le un bloc fait 970px de large par exemple cette dimension sera fixe et ne sera pas redéfini pour les petits écrans.

C’était le cas de la majorité des sites avant l’arrivé du responsive design.

Exemple de design statique qui sera simplement dézoomé sur mobile.

Le design fluide

Le design fluide est un site dont toute les valeurs sont exprimées avec des valeurs qui sont variables comme les pourcentages par exemple et qui vient s’adapter automatiquement en fonction de la largeur de l’écran.

Un bloc qui représente 70% de l’écran par exemple, peut sur un écran de 1000px de large représenter 700px et sur un format mobile de 370px représenter 259px.

Design fluide de Google
Dans cet exemple les blocs ont des valeurs variables, chaque résultat a une largeur fixée à 95% de l'espace disponible. A gauche la résolution d'un smartphone et à droite d'une tablette sur la version mobile du moteur de recherche.

Le design adaptative

Le design adaptatif consiste à fixer des points de rupture sur lesquels des valeurs fixes seront redéfinies.

Les points de rupture ont aujourd’hui étaient standardisés pour correspondre aux supports mobile, tablette et bureau (370px, 768px, 1024px, 1920px).

La détection de ces points de rupture a notamment été rendue possible grâce à l’arrivée du CSS 3 avec les media queries.

Design adaptive SDLV
Un point de rupture placé à 1200 pixels indique que le contenu doit être restructuré avec ici une suppression de l'illustration.

Responsive design

Le responsive design peut être considéré comme une amélioration du design fluide qui permet de s’adapter à la taille de l’écran quelque soit sa taille grâce aux media queries.

Ce procédé peut même dans certains cas être combiné au design statique pour rendre l’intégration plus performante.

Le responsive design du site SDLV par exemple se définit par une largeur fixe de 1136px, une réorganisation du contenu lorsque la taille de l’écran est inférieur à 1024px et une largeur maximale ne dépassant pas les 85% de l’espace disponible.

Responsive Web Design SDLV

Gérer le responsive avec du “mobile first” ou du “desktop first” ?

L’impact du CSS 3

L’arrivé de la 3e version du CSS est ce qui a principalement rendu possible l’intégration du responsive design de manière efficace.

Le CSS 3  permet aujourd’hui aux développeurs d’intégrer une page web pour bureau tout en appliquant des règles qui indiquent le comportement à adopter dans le cas où la taille de l’écran est plus restreinte comme pour une tablette ou un smartphone par exemple.

La modularité du CSS 3 permet une mise à jour du langage plus fréquente et simple, ce qui s’est avéré être la réponse parfaite à la démocratisation des nouveaux supports de navigation et leur évolution croissante.

Le mobile first

L’intégration en “mobile first” consiste à penser l’intégration pour un support mobile dans un premier temps puis de l’adapter pour bureau.

Elle est préférée au desktop first car le nombre d’éléments et de règles CSS sont moins importants à charger que sur bureau.

Ainsi un nombre restreint d’éléments est affiché sur mobile et sur un format plus important, tablette ou bureau par exemple, le contenu est adapté ou laisse place à des éléments supplémentaires.

Si les éléments à présenter ne sont pas nombreux cela peut être une bonne solution mais dans le cas inverse, il faudrait rajouter dynamiquement des éléments supplémentaire à l’écran, cela peut impliquer une surcouche de JavaScript.

Un design en mobile first est souvent caractérisé par la présence d’un menu identique pour bureau et mobile.

Le desktop first

Le desktop first est la manière la plus classique de rajouter du contenu pour intégrer le web design d’un site internet.

En commençant par le format bureau on réadapte le design en supprimant ou modifiant des éléments pour que la navigation sur des supports moins importants soit optimisée.

Cette réadaptation du contenu peut-être faite grâce à des points de rupture par exemple dans le cas d’un responsive design statique.

Tester l'efficacité de son responsive web design

Il est important de vérifier que l’intégration de votre responsive web design est compatible sur tous les formats d’écran pour éviter d’avoir de mauvaises surprises une fois votre interface rendue publique.

Les navigateurs connus tel que Google Chrome ou Firefox propose de simuler une expérience mobile et tablette grâce à un outil intégré nativement dans le navigateur.

C’est ce que l’on appelle aussi une émulation.

Cela permet notamment de tester rapidement la compatibilité avec une résolution d’un macbook, d’un ipad et d’un iphone par exemple sans pour autant posséder les 3 supports.

Vous pouvez y accéder en appuyant sur la touche F12 de votre clavier puis cliquer sur l'icône responsive (icône smartphone/tablette).

L'émulation responsive Google Chrome

Emulation du responsive web design de SDLV sur Iphone 6/7/8

Sur l’outil Google Chrome vous avez la possibilité de simuler l’affichage d’un mobile et d’une tablette et en simuler le comportement tactile grâce à l’adaptative touch.

Vous avez également la possibilité de sélectionner un support précis sur lequel effectuer votre test comme un Iphone XS ou un Samsung Galaxy S10 par exemple, jusqu’à la télé 4k.

L’émulation responsive Firefox

Emulation du responsive web design de SDLV sur Iphone X/XS

Sur l’outil de Mozilla Firefox vous avez la possibilité d’émuler le comportement des smartphones et tablettes à l’instar de l’émulateur de Chrome.

L’outil de Firefox propose un outil de capture plus avancé que sur Google Chrome qui vous permet d’obtenir un pdf de toute la page que vous êtes en train d’intégrer contrairement à l’outil Chrome qui vous permet uniquement de capturer la surface visible de la page.

Interface Responsive 4 exemples

Youtube

Dans le cas d’une plateforme telle que Youtube, tous les écrans aujourd’hui connus sont supportés et ont à leur disposition un web design adapté.

Le responsive web design du site internet de Youtube combine le design adaptif et le design statique. 

Vous avez des valeurs fixes pour le menu et des valeurs variables en % pour les listes de vidéo avec une largeur minimale de x pixels.

Des points de rupture sont placés pour les formats tablette et mobile pour réadapter le menu sur tablette et le faire disparaître sur mobile.

Responsive Web Design de Youtube
Responsive Web Design de Youtube avec le format bureau, tablette et mobile

Le site de Youtube a la possibilité de détecter si vous arrivez d’une résolution mobile et vous redirigera vers un site mobile dédié (m.youtube.com) qui ressemble fortement à leur application et qui comporte un design adaptatif uniquement.

Une valeur en pourcentage pour chaque bloc de contenu qui se redimensionne en fonction de la taille de l’écran mais aucune réorganisation du contenu.

Site mobile de Youtube
Site internet de youtube dédié aux appareils mobiles

Pour chaque support de navigation excepté l’ordinateur de bureau, Youtube propose une application dédiée.

Une application Youtube est ainsi disponible pour mobile, tablette, et smart TV.

Sur les applications il n’est pas nécessaire d’implémenter le responsive car elles correspondent à un support précis.

Une application pour mobile ne sera jamais lancé sur une smart TV par exemple.

Ainsi, Youtube peut également se servir du design fluide pour le rendu de ses applications, sans renseigner de points de rupture et définir des valeurs en pourcentages.

Netflix

Netflix a pour objectif de proposer un service de vidéo à la demande à un public le plus large possible.

C’est un service qui peut aisément concurrencer les salles de cinéma et programmes télévisés et se doit ainsi d’adapter son service sur tous les supports de navigation.

C’est pourquoi tous les supports sont également supportés du smartphone à la smartTV.

A l’instar de Youtube, Netflix propose des applications pour chacun des supports aujourd’hui connus mobile, tablette et smartTV et un site internet responsive qui permet également l’utilisation de leur service.

Les applications étant chacune destinées à un support précis, n’ont pas besoin d’être réadapter pour des résolutions différentes de celles pour lesquelles elles ont été conçues.

Le design fluide avec une simple utilisation de valeurs en pourcentage qui se redimensionne en fonction de la taille de l’écran suffit.

Bouygues Telecom

Dans le cas d’un fournisseur d’accès internet tel que Bouygues Telecom qui proposent une panoplie de services.

Pour chacun de leur services une adaptation complète a été pensée.

Dans le cas des services TV l’adaptation vers mobile est arrivé en réponse à l’explosion de la vente de smartphone et tablette.

Pour y faire face une application pour mobile et tablette a été développée permettant d’émuler son service TV sur le support de son choix.

Les services TV et les deux applications n’implémente pas de responsive design car destiné à un type de support prédéfini et se contente d’un simple design fluide.

Le site internet de Bouygues Telecom se présente comme un portail permettant de souscrire et commander des produits et d'administrer ses services une fois devenu client.

Le site est bien évidement responsive, en ce qui concerne le suivi du compte client, Bouygues Telecom propose une application dédiée en addition à l’interface responsive prévu à cet effet sur leur site internet.

SDLV

Sur le site SDLV pour le responsive design nous combinons l’adaptative design et le design fluide.

Une valeur fixe est d’abord définie sur bureau à 1136px, combinée à une règle CSS limitant sa largeur maximale à 85% de l’espace disponible.

Des points de rupture sont définis pour mobile et tablette à partir de 1024px pour réorganiser le contenu et l’adapter pour les plus petits supports.

Une application n’est pas nécessaire pour mobile, tablette ou smartTV car notre trafic provient à plus de 80% de recommandations des moteurs de recherches.

Un client type qui cherche à travailler son ux se renseigne sur le sujet, nous sommes pas suffisamment connu pour que le terme UX soit associé à SDLV à ce jour bien que nous ayons une position 0 sur la recherche =D .

De plus, nos services ne correspondent pas au secteur de divertissement que représente les smartTV.

  • Qu'est-ce que le Responsive Web Design ?

    On peut qualifier de responsive le web design d'un site web s'il pensé et développé pour s'adapter à tous les différents supports de navigation.

  • Quel impact peut avoir le responsive web design sur mon site web ?

    Le responsive web design permet à ton site d'accueillir de la meilleure des manières les utilisateurs des formats portables (tablette, et smartphone) qui représente aujourd'hui 60% des recherches sur Google. Google peut également proposer d'indexer les pages de ton site web d'une manière plus optimisée sur mobile grâce à ses robots d'indexation mobile.

  • Le responsive web design concerne-t-il toutes les interfaces ?

    Tout dépend des objectifs et des services proposés. Si l'on prend l'exemple de l'application mobile Youtube, elle n'est pas responsive car elle n'est destinée qu'à être lancée sur un format mobile. En revanche, Youtube propose une application pour tablette, smartTV et un site internet entièrement responsive sur bureau.