Conception d'IHM ou d'appli Responsive Design (Maquettage / Performance)
5-067
Besoin d’adapter cette formation à vos besoins ?
N’hésitez pas à nous contacter afin d’obtenir un devis sur mesure !
Formation créée le 13/11/2024. Dernière mise à jour le 06/03/2025.
Version du programme : 1
Programme de la formation Version PDF
Les concepteurs de sites Web doivent dorénavant revoir leur approche pour que leurs interfaces s'adaptent à la diversité des terminaux. Cette formation apporte des réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Design. Cette formation a pour but d'amener les apprenants à un niveau SAME "Maîtrise" et d'enrichir les compétences : * Maîtriser les méthodes de conception des solutions informatiques du système d'information * Identifier les indicateurs pertinents qui permettront de retenir une solution informatique prenant en compte les facteurs du développement durable
Objectifs de la formation
- Concevoir et développer des interfaces Web pour tous types de terminaux
- Adopter une approche de conception ergonomique Mobile First
- Découvrir les composants graphiques, les frameworks et les librairies Responsives
- Optimiser les performances
Profil des bénéficiaires
- Développeurs, Designers, Chefs de projets, Webmasters
- Connaissances de base en HTML et CSS.
Contenu de la formation
-
Les terminaux
- Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution. Périphériques, OS, navigateurs.
- Le marché mobile et parts de marché.
- Standards HTML, HTML5, CSS3 (API, sélecteurs...).
-
Introduction au Responsive Design
- Qu'est-ce que le Responsive Design ?
- Concept de Marcotte, Mobile First.
- Séparation contenu/contenant.
- Approche portrait/paysage, tactile, impact sur l'ergonomie.
- Créer un plan de tests.
- Différence entre design Web et design Mobile.
-
MediaQueries
- Adaptation des CSS aux caractéristiques du terminal.
- Règles conditionnelles (orientation, device-width...).
- JavaScript et les anciens navigateurs.
- Réglage complémentaire de rendu visuel (Viewport).
- Médias queries orientées appareils.
-
Principe de grille, layout
- Conception classique versus conception selon une grille.
- Le positionnement par grille.
- Unités de mesure (% em px, vh, dvh), ecrans haute définition mode Retina.
- Eviter les débordements. Points de rupture.
- Organiser l’information sur la page.
- Répartition du contenu dans les blocs.
-
Composants graphiques
- Images flexibles : images de fond, adaptation HTML5, adaptation de la qualité graphique selon le terminal.
- Contenu responsive : rupture texte, multicolonnes. Césure et découpe.
- Polices fluides : format des polices, taille.
- Marges et espaces flexibles.
- Menus, Carrousel, Tableaux : comment les afficher sur un petit écran ?
- Organisation des éléments en fonction d'une grille.
- Créer des images et des vidéos adaptées.
-
Framework et librairies responsive
- Détecter les ressources avec "Modernizr".
- La syntaxe de templates.
- Le framework Bootstrap.
- La bibliothèque de composants Material-UI.
- Autres Frameworks CSS 960 grid, Foundation, Semantic UI, Skeleton, UIKit...
-
Optimisation et performance
- Mesurer la performance de chargement, optimisation de bande passante. Répartition Client/Serveur.
- Optimisation des ressources graphiques.
- Gestion du cache.
- Feuille de présence
- Quiz
- Mises en situation
- Formulaires d'évaluation de la formation
- Certificat de réalisation de l’action de formation
- Travaux Pratiques :
- - Détection du type de terminal en PHP JavaScript.
- - Construction de CSS selon les modes portrait/paysage, résolution du terminal.
- - Construire une ergonomie basée sur une grille flexible.
- - Mise en oeuvre de solutions.
- - Utilisation de frameworks.
- - Audit de pages Web, corrections conceptuelles et techniques.
- Certains exercices peuvent nécessiter des PCs