CATALOGUE Code & Data Formation Web App Créer une Web App - Vos sites Web sur mobiles

Introduction au Responsive Design

Retour à la formation
Chapitre 6 Leçon 5
Précédent
Suivant

Découvrez comment le site blueegg.co.uk adapte ses grilles fluides et médias query pour offrir un design réactif.

Détails de la leçon

Description de la leçon

La leçon examine en détail le concept de Responsive Design en prenant comme exemple le site blueegg.co.uk. En utilisant des grilles fluides et des médias query, ce site montre comment ajuster automatiquement la disposition et le contenu des pages en fonction de la taille de l'écran. Au fur et à mesure que la taille de l'écran change, le design se réorganise pour offrir une expérience optimale sur différents appareils, que ce soit un ordinateur de bureau, une tablette ou un smartphone. La vidéo démontre également les ajustements spécifiques comme la réduction des images et l’adaptation des menus.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Présenter les principes de base du Responsive Design
  • Illustrer comment les grilles fluides et médias query fonctionnent
  • Montrer des exemples concrets d'adaptation de contenu

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent une connaissance de base en HTML et CSS, ainsi qu'une compréhension générale des concepts de Responsive Design.

Métiers concernés

Les compétences abordées sont particulièrement utiles pour des métiers tels que développeur front-end et designer web.

Alternatives et ressources

Des solutions alternatives incluent des frameworks comme Bootstrap ou Foundation, qui facilitent la création de sites en Responsive Design.

Questions & Réponses

Le Responsive Design est une approche de la conception web qui vise à créer des sites capables de s'adapter automatiquement à la taille de l'écran sur lequel ils sont consultés.
Une grille fluide est une grille de mise en page qui utilise des pourcentages plutôt que des pixels pour définir les largeurs des colonnes, permettant ainsi à la mise en page de s’adapter à différentes tailles d'écran.
Les médias query permettent d'appliquer des styles CSS spécifiques en fonction des caractéristiques de l'appareil, telles que la taille de l'écran, afin de créer des designs adaptatifs.