Responsive Design, créer des interfaces Web adaptables.
Besoin d’adapter cette formation à vos besoins ?
N’hésitez pas à nous contacter afin d’obtenir un devis sur mesure !
Formation créée le 21/11/2022. Dernière mise à jour le 23/12/2022.
Version du programme : 1
Programme de la formation
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.
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 d'affichage des pages sur mobiles et ordinateurs
Profil des bénéficiaires
Pour qui
- Développeurs, designers, chefs de projets et Webmasters.
Prérequis
- 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...).
-
Démarche de conception
- 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).
-
Principe de grille flexible, fluide
- Conception classique versus conception selon une grille.
- Importance des blocs, approche contenu/contenant.
- Unités de mesure (% em px), mode Retina.
- Eviter les débordements. Points de rupture.
- Principe des box, layout avec CSS3.
-
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 adaptables, carrousel adaptatif.
- Création de layout avec flexbox (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".
- Librairies de substitution (less, css3pie...).
- Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320...
-
Optimisation et performance
- Mesurer la performance de chargement, optimisation de bande passante. Répartition Client/Serveur.
- Optimisation des ressources graphiques.
- Gestion du cache.
Équipe pédagogique
Nos formations sont animées par des experts reconnus dans leur domaine possédant une expérience sur le terrain significative et des compétences pédagogiques reconnues.
Suivi de l'exécution et évaluation des résultats
- Feuilles de présence.
- Questions orales ou écrites (QCM).
- Mises en situation.
- Formulaires d'évaluation de la formation.
- Certificat de réalisation de l’action de formation.
Ressources techniques et pédagogiques
- Accueil des apprenants dans une salle dédiée à la formation.
- Documents supports de formation projetés.
- Exposés théoriques
- Etude de cas concrets
- Quiz en salle
- Mise à disposition en ligne de documents supports à la suite de la formation.
Qualité et satisfaction
Merci de consulter notre site internet.
Délai d'accès
2 semaines
Accessibilité
Les personnes atteintes de handicap souhaitant suivre cette formation sont invitées à nous contacter directement, afin d’étudier ensemble les possibilités de suivre la formation.