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
Dans cette leçon, nous allons approfondir le Responsive Web Design en nous concentrant sur les tablettes. Nous allons partir d'une maquette Photoshop et la convertir en une mise en page fluide adaptée aux différentes tailles d'écrans. La vidéo explique comment transformer les pixels en pourcentages, intégrer des feuilles de style spécifiques aux tablettes, et ajuster divers éléments de la page pour garantir une présentation optimale.
Vous apprendrez à gérer les marges, rétablir les contextes de formatage, et corriger les propriétés comme float et display. La leçon couvre également l'affichage des sliders et des menus, ainsi que l'ajustement des éléments de recherche et des logos. Enfin, la gestion des images et du contenu des colonnes est abordée pour assurer une expérience utilisateur cohérente sur les tablettes.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de :
- Comprendre comment adapter une maquette pour les tablettes.
- Maîtriser la transformation des unités de pixels en pourcentages.
- Apprendre à gérer les feuilles de style spécifiques aux tablettes.
Prérequis pour cette leçon
Les prérequis pour cette vidéo incluent :
- Connaissance de base en CSS et HTML.
- Capacité à utiliser Photoshop pour mesurer les éléments de la maquette.
Métiers concernés
Cette compétence est essentielle pour des métiers tels que :
- Développeur Web
- Designer UI/UX
- Intégrateur Web
Alternatives et ressources
Comme alternatives, vous pouvez utiliser d'autres outils de prototypage comme Sketch ou Figma pour vos maquettes, en les adaptant de la même manière pour une mise en page responsive.
Questions & Réponses
Je m'abonne