Exemple pratique : blueegg.co.uk
Objectifs
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
Résumé
Découvrez comment le site blueegg.co.uk adapte ses grilles fluides et médias query pour offrir un design réactif.
Description
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.
Questions - réponses
Programme détaillé
Module 1 - Introduction
Module 2 - Généralités sur le marché des mobiles
Module 3 - Rappel HTML
Module 4 - Rappel CSS
Module 5 - Notions de HTML5 et CSS3
Module 6 - Concevoir une webApp
Module 7 - Les simulateurs
Module 8 - Construire sa première WebApp
Module 9 - Vérifier et compresser
Module 10 - Construire une webApp avec JQuery Mobile
Module 11 - Annexe 1 | Notions de bande passante
Module 12 - Annexe 2 | Les usages
Module 13 - Annexe 3 | Les librairies disponibles
Module 14 - Conclusion
