Le responsive design

Qu'est ce que le footer d'un site web ?

Le responsive design ou plus exactement le responsive web design est à différencier de l’adaptative design. Actuellement, vous êtes nombreux à parler de responsive mais peu à parler d’adaptative design ; la différence en quelques mots :

Le responsive web design
Les pages s’adaptent au viewport (taille de la fenêtre du navigateur). Les images et les textes s’adaptent de façon flexible en fonction de la grandeur de l’écran.

L’adaptative design
Le contenu (médias et textes) est différent selon le support de lecture (smartphone, tablette, ordinateur). L’expérience utilisateur est stratégiquement adapté pour chaque support utilisé.

Quelque soit votre choix entre l’adaptatif design ou le responsive web design, pensez bien à mettre l’expérience utilisateur (UX) au centre de votre étude. Chacun de vos sites peut nécessiter l’un ou l’autre. Il est par contre évident que votre site web doit être facile à consulter sur toutes les résolutions d’écran. La navigation sur smartphone représente environ 55% du trafic pour les sites e-commerce.
Sommaire

Qu'est ce que le responsive web design ?

Le responsive design ou design réactif/réceptif en français permet d’adapter le contenu d’une page en fonction de la taille de l‘écran dans lequel il se trouve et ceci quel que soit le terminal utilisé (ordinateur, tablette, smartphone…). Chaque bloc de contenus s’adapte donc à l’espace dont il dispose, ainsi un bloc situé à côté d’un autre sur une tablette pourra se retrouver en dessous ou au-dessus de ce dernier sur un ordinateur ou un smartphone.

Comment fonctionne le responsive web design ?

Le responsive design est devenu possible grâce à l’apparition des Média Queries avec le CSS3. Les Média Queries permettent en effet de gérer de manière dynamique les feuilles de style. Ainsi un bloc HTML pourra voir son CSS modifié à partir d’une taille d’écran.

En bref un contenu responsive se monte de cette manière :

Il est également possible d’utiliser le langage Javascript (enquire.js) qui fonctionne également sur la détection de la largeur des écrans.

Avantages des sites internet responsives

Rappelons que 55 % du trafic des sites e-commerce se fait à partir d’un smartphone, si votre site n’est pas agréable sur ce support vous perdrez plus de la moitié de votre trafic potentiel.

Les autres principaux avantages sont :

Monter son site en responsive web design

Il existe deux stratégies pour adapter votre site web pour les smartphones :

De manière générale il est aujourd’hui plus courant de s’appuyer sur du mobile first, nous le répétons une fois de plus : 55 % du trafic des site e-commerce est sur smartphone actuellement. Il est donc très important que votre site soit agréable à consulter sur mobile. Cependant la majorité ne fait pas loi, pensez bien que selon votre domaine d’activité il est peut-être préférable d’optimiser dans un premier temps votre site web pour les écrans d’ordinateurs. 

Le mobile first vous permettra donc d’offrir une meilleure expérience aux utilisateurs et sera plus économique qu’une application, cependant l’expérience desktop ne sera peut-être pas 100 % optimale et pourra être bloquante pour un site aux contenus « lourds ».

Aller plus loin sur les versions mobiles !

Il existe trois manières pour créer la version mobile de son site web :

Cet article fait un point sur la première de ses possibilités qui présente de nombreux avantages, mais les sites dédiés mobiles ou les applications mobiles peuvent aussi apporter énormément à une version mobile. Plus longues et plus onéreuses à mettre en place, elles laissent cependant beaucoup plus de place à la personnalisation.

Sommaire

Articles Connect

Le saviez-vous ?

La navigation sur smartphone représente environ 55% du trafic pour les sites e-commerce.

Liens utiles

contact gemmeco sur smartphone

L'agence GemmeCo vous accompagne !

Votre site internet est vieillissant et non responsive ? L’agence GemmeCo vous accompagne dans le développement de votre site internet. Les sites internet que nous créons sont montés en responsive design, ce paramètre technique n’est pas une option et est inclus dans notre prestation.