Le Responsive Design

Qu'est-ce que le Responsive Design ?

Le Responsive Web Design (RWD) est une conception permettant à un site web d'adapter son affichage sur chaque type d'écran.

De nos jours, la consultation d'un site web peut se faire avec un ordinateur de bureau, un ordinateur portable, un smartphone, une tablette, une tv, etc.

Les tailles de tous ces écrans sont multiples et variées, c'est la raison pour laquelle il est important de s'assurer que l'affichage de son site web est bien correct et ajusté à chacun de ces écrans.

Pour obtenir une expérience utilisateur (UX) renforcée, il est nécessaire d'apporter du confort visuel à l'internaute sans scroll (barre de défilement horizontale) et sans que la manipulation d'un zoom soit nécessaire.

Lorsque nous avons un espace d'affichage réduit, la plupart du temps, l'intégration est épurée au maximum.

Le Responsive Web Design (RWD) est de plus en plus incontournable et demandé par les clients lors de la création d'un site web.

Comment faire pour adapter son site à chaque écran ?

Nous n'allons pas créer une version de site pour chaque écran (sinon ce serait assez long et cela change tout le temps à chaque nouvelle sortie de la part d'un constructeur de téléphone ou d'ordinateur), nous allons donc privilégier la création d'une interface de site web qui pourrait s'auto-adapter à chaque écran.

Depuis la mise à jour du langage CSS (CSS3), la technologie media queries voit son apparition pour traiter ce genre de cas.

Grâce aux médias queries, nous allons pouvoir définir des régles d'affichage en fonction des résolutions et de la taille des écrans. C'est une très bonne avancée puisque c'est ce que nous voulons faire !

Cas d'étude : vous avez 2 zones à afficher sur une page web.

Sur écran d'ordinateur, vous disposer d'une surface d'écran très large, vous pourriez les afficher côte à côte.

Sur smartphone, la surface est très réduite, vous pourrez donc faire le choix de les empiler les unes en dessous des autres pour profiter de la largeur maximum de l'écran.

Très grand écran (ordinateur de bureau)	Très petit écran (mobile - smartphone)

Pour acquérir et renforcer nos connaissances, il nous faudrait savoir à peu près quelle est la taille des différents écrans (majeur) ? Voici des éléments de réponses au prochain chapitre.

Taille en résolution des (principaux) écrans

Voici un tableau récapitulant la taille des principaux écrans :

Écran	Écran minimum	Écran réduit	Écran moyen	Grand Écran
Illustration
Type	SmartPhone	Tablette	Ordinateur Portable	Ordinateur de bureau
Résolution d'écran taille en largeur (width)	< 768 px	>= 768 px < 992 px	>= 992 px < 1200 px	>= 1200 px

Même si nous n'avons pas besoin de bootstrap pour faire du responsive design, ces chiffres sont repris de ce framework css (qui est responsive nativement) car ils correspondent assez bien à la réalité.

Même si d'un appareil à l'autre il y a des différences, nous pouvons donc retenir qu'il y a 4 tailles d'écrans majeurs.

Type Fixe, Fluide ou Adaptatif

1. Un site web fixe est créé dans des mesures fixes souvent exprimées en pixels
   La taille ne change pas selon les situations.


2. Un site web fluide est créé dans des mesures variables souvent exprimées en pourcentage.
   Unité de mesure privilégié : pourcentage, em, vh, vw, etc.


3. Un site web adaptatif est créé dans des mesures fixes mais diffère selon la taille d'écran.
   Exploité grâce aux médias queries !

Dans la plupart des cas, nous pouvons éliminer la 1ère solution consistant à créer un site web avec des mesures fixes.
En effet, l'utilisation des tablettes ou smartphone pour consulter des pages web n'est pas une "mode", cela continue d'augmenter chaque année selon les statistiques.

Nous avons donc 2 types de site responsive possible lorsqu'on démarre un projet : le fluide et/ou l'adaptatif !

Nous verrons en détail les avantages, inconvénients et différences de ces deux techniques lors de ce tutorial.

FrameWork Css pour un site responsive

Plusieurs Framework CSS peuvent aider à la création d'un site web complétement responsive design, plusieurs d'entre eux sont régulièrement utilisés.

Bootstsrap CSS est l'un des framework faisant l'objet d'un tutoriel sur notre site web.

Différence entre 1 site web responsive design, 1 version mobile et 1 application mobile

En utilisant la technologie Responsive Design, le contenu du site web s’adapte automatiquement à la largeur et à la hauteur de l’écran qui le consulte.

En optant pour le développement d'une version mobile de votre site web, vous prévoirez un affichage classique pour les ordinateurs de bureau et un affichage différent et optimisé pour les mobiles (cela peut aussi permettre de personnaliser l'affichage des informations d'un support à l'autre).

Une application mobile s'apparente davantage au monde du logiciel (sauf pour les applications hybrides) disponible sur une plateforme de téléchargement, l'internaute choisit ensuite d'installer l'application et éventuellement de la garder sur son écran d'accueil pour faciliter ses prochaines consultations.

Avantages et Inconvénients des sites responsive design et version mobile

Avantages du Responsive Design

• une seule adresse URL pour le site web


• Meilleure indexation et référencement naturel (Google accorde de l'importance aux sites web prévoyant une adaptation pour les mobiles, depuis 2015)


• Moins de maintenance (une seule version globale adaptable à modifier pour la faire évoluer)


• Les zones, colonnes, images, textes, etc. se replacent automatiquement

Avantages du site version mobile

• Forte personnalisation (il est possible d'avoir 2 versions différentes et complémentaires entre la version mobile et le site web)


• La version mobile est particulièrement adaptée aux petits écrans


• La version mobile peut être plus rapide à charger

Responsive Design : Mobile First !

Certains développeurs front considèrent que la construction d'une interface doit d'abord se faire pour les mobiles en tout premier lieu.

Devant la progression des surfs sur le web avec un mobile, cela permet de partir d'une version light qui ensuite sera déclinée avec parfois plus d'éléments pour les versions supérieures (tablette, ordinateur portable, ordinateur de bureau).