Comprendre le Responsive Web Design

Les principes généraux du Responsive Web Design
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre le Responsive Design
Revoir le teaser Je m'abonne
Transcription

59,90€ 29,95€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ 29,95€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

À la fin de cette vidéo, les participants sauront :
1. Concevoir des grilles fluides
2. Utiliser les Media Queries CSS3
3. Intégrer des éléments web en pourcentages

Découvrez les trois concepts clés du Responsive Web Design : une grille fluide, les Media Queries CSS3, et l'utilisation des pourcentages pour les dimensions des éléments.

La réalisation d'un site en Responsive Web Design repose sur trois concepts. Premièrement, une conception graphique selon une grille fluide, qui s'adapte en fonction de la taille de l'écran. Deuxièmement, l'utilisation des directives CSS3 Media Queries. Enfin, l'usage des pourcentages pour définir les tailles des éléments. Le principe fondamental du Responsive Web Design est d'adapter le site par rapport à la taille de la fenêtre du navigateur, en utilisant des techniques CSS pour créer des pages fluides. Il faut également déterminer les points de rupture entre différentes mises en page, par exemple, entre un écran d'ordinateur et une tablette. Ces points de rupture sont basés sur les tailles des principaux appareils utilisés par les internautes.

Lors de la conception, il est nécessaire de réaliser des maquettes pour chaque type d'écran dans des outils comme Illustrator ou Photoshop. Ensuite, ces maquettes sont intégrées en utilisant les Media Queries, spécification du CSS3. Elles permettent d'adapter la présentation du contenu à différents périphériques sans changer le contenu lui-même. Ces Media Queries sont composées d'un type de média et d'une ou plusieurs expressions concernant les fonctionnalités du média, interprétées comme vraies ou fausses.

Par exemple, les Media Queries permettent de générer des styles CSS différents pour les smartphones, les tablettes et les ordinateurs. Une fois les Media Queries définies, la mise en forme dans la feuille de style doit se faire impérativement avec des pourcentages pour permettre aux éléments de s'adapter fluidement à la taille du navigateur. Les trois grands principes du Responsive Web Design sont donc la création de maquettes à partir d'une grille fluide, l'utilisation des Media Queries, et l'intégration des éléments en unités de pourcentages.

Voir plus
Questions réponses
Qu'est-ce qu'une grille fluide en Responsive Web Design ?
Une grille fluide est une structure de mise en page qui s'adapte automatiquement à la taille de l'écran en utilisant des unités flexibles telles que les pourcentages.
Pourquoi utiliser des Media Queries dans le Responsive Web Design ?
Les Media Queries permettent de créer des styles CSS différents en fonction des caractéristiques du périphérique, évitant ainsi de changer le contenu pour adapter la présentation.
Pourquoi utiliser des pourcentages pour les dimensions des éléments en Responsive Web Design ?
L'utilisation de pourcentages pour les dimensions des éléments permet à ces derniers de s'adapter fluidement à différentes tailles d'écran, garantissant une expérience utilisateur optimale.

Programme détaillé