Définition et Utilisation des Points de Rupture
Objectifs
Les objectifs de cette vidéo sont de :
- Comprendre le concept de points de rupture
- Savoir déterminer les points de rupture en fonction des tailles d'écran
- Appliquer ces concepts dans des outils de design comme Illustrator ou Photoshop
Résumé
Les points de rupture sont essentiels en responsive design, permettant d'adapter la mise en page aux différentes tailles d'écrans.
Description
Les points de rupture représentent les dimensions déterminées au-delà et en dessous desquelles la mise en page sera différente. Ils s'adaptent aux tailles des écrans utilisés par les internautes, comme les ordinateurs, tablettes et smartphones. Pour les définir, il est crucial de se baser sur des données réelles collectées par les serveurs web, incluant la taille des écrans des visiteurs.
Par exemple, pour les utilisateurs en France, les tailles d'écran les plus courantes sont 1366x768, 1280x800 et 1920x1080 pixels. En s'appuyant sur ces statistiques, on peut créer des plages de points de rupture spécifiques. Pour les écrans d'ordinateur, on peut prévoir une plage allant de 1024 à 1440 pixels, avec une taille maximale d'affichage de 1200 pixels. Pour les tablettes, la plage pourrait s'étendre de 768 à 1023 pixels, en prenant en compte l'utilisation en mode vertical. Enfin, pour les smartphones, la plage serait entre 320 à 767 pixels, couvrant une large gamme de tailles de smartphones courants.
Ces plages permettent de créer des maquettes efficaces dans des outils comme Illustrator ou Photoshop, garantissant une expérience utilisateur optimisée sur tous les appareils.
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
