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.
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) |
![]() |
![]() |
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 |
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.
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 du Responsive Design
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).
RESPONSIVE DESIGN
1. Le Responsive Design 2. Exemples 3. Creer Sa Page Web 4. Site Web Responsive Design