Les principes fondamentaux
Objectifs
À 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
Résumé
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.
Description
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.
Questions - réponses
Programme détaillé
Module 1 - Introduction video
Module 2 - Principes généraux
Module 3 - Réaliser une maquette en responsive Design
Module 4 - Maitriser l'intégration en Responsive Design
Module 5 - Le travail des textes
Module 6 - Intégrer des images optimisées
Module 7 - Une réalisation complète
Module 8 - Connaissances complémentaires
Module 9 - Conclusion
