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
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.
Objectifs de cette leçon
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
Prérequis pour cette leçon
Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML, CSS et en design responsive.
Métiers concernés
Les points de rupture sont cruciales pour les web designers, développeurs front-end, et spécialistes UX/UI pour s'assurer que les sites web sont accessibles et fonctionnels sur tous les appareils.
Alternatives et ressources
En plus d'Illustrator et Photoshop, des outils comme Sketch, Figma ou Adobe XD peuvent être utilisés pour créer des maquettes responsives.
Questions & Réponses
Je m'abonne