Introduction video
Principes généraux
Réaliser une maquette en responsive Design
Maitriser l'intégration en Responsive Design
Le travail des textes
Intégrer des images optimisées
Une réalisation complète
Connaissances complémentaires
Conclusion
Détails de la leçon
Description de la leçon
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.
Objectifs de cette leçon
À 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
Prérequis pour cette leçon
Les participants doivent avoir des connaissances de base en HTML et CSS.
Métiers concernés
Les compétences abordées dans cette vidéo sont essentielles pour les métiers de développeur web, designer UX/UI, et intégrateur web.
Alternatives et ressources
En alternative, les participants peuvent utiliser des frameworks tels que Bootstrap ou Foundation qui simplifient le processus de conception responsive.
Questions & Réponses
Je m'abonne