- Accueil
- Formations
-
-
-
Formations certifiantes
- Offres CPF
-
Autres formations
-
-
-
-
- Formations Spécifiques
- Vous ne trouvez pas la formation que vous cherchez ? Nous la créons pour vous.
En savoir plus
-
- Classe virtuelle
- E-learning
- CPF
- Blog
- Contact
Responsive Design
Responsive Design
Responsive Design
| Type(s) : | PED |
| Durée : | 5 Jours – 35 Heures |
Prérequis
Être déjà familier avec les subtilités des langages HTML et CSS. Avoir suivi une formation CSS avancée. Cette formation n’est pas du tout adaptée aux débutants complets en CSS.
Objectifs
Comprendre l’état des lieux du Web mobile, les orientations et standards en vigueur ainsi que les systèmes et navigateurs. Découvrir toutes les techniques concrètes permettant d’adapter un design sur un terminal nomade actuel et d’optimiser les performances et temps d’affichage.
Public concerné
Personnes utilisant des langages HTML et CSS. Develloppeur. Dsi.
Profil du formateur
Formateur consultant, expert, pédagogue et certifié dans son domaine
Méthode pédagogique
La formation est constituée d’apports théoriques et d’exercices pratiques. Chaque stagiaire dispose d’un poste de travail et la gestion en petit groupe (jusqu’à 8 stagiaires) permet un suivi individualisé et adapté. Durant les sessions de formation, un support pédagogique est remis aux stagiaires.
Suivi, évaluation, sanction
Des tours de table permettent de suivre la progression du stagiaire au fur et à mesure de la formation. Un suivi de la formation est réalisé par une feuille de présence émargée par demi-journée par les stagiaires et le formateur. Un questionnaire de satisfaction et une validation des acquis sont complétés par chaque stagiaire en fin de formation. Formation non certifiante.
Plan du cours
État des lieux du Web mobile
- Périphériques, OS, navigateurs, moteurs, langages
- Le marché mobile et ses statistiques
- La fragmentation Android
Techniques de design fluide
- Typographie fluide (unités em et rem)
- Un design fluide / élastique (float, BFC, table-cell, calc(), Flexbox)
- Les unités de Viewport (vw, vh, vmin, vmax)
- box-sizing
- CSS3 Flexbox (orientation, flexibilité, ordonnancement, alignements)
- Grilles fluides (framework Bootstrap, CSS3 Grid Layout)
Un contenu fluide
- Gérer les débordements de contenus (césures et autres coupures)
- Gérer les débordements de médias (images, vidéos, flash, etc.)
CSS3 Media Queries
- Les médias en CSS
- Ajouter des conditions avec Media Queries
- Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
- Le cumul de critères ("et", "ou", "non")
- Compatibilité Media Queries
- Prise en compte de l'orientation
- Repenser son design pour les petits écrans
Les tailles des devices mobiles
- Des vrais et des faux pixels
- Taille de fenêtre virtuelle : Viewport
- Taille d'écran : screen-width
- Taille déclarée : device-width
- Le pixel-ratio
- Forcer le Viewport en HTML et en CSS
- Comment choisir ses breakpoints
Performances et Web mobile
- Comment tester
- Astuces spécifiques web mobile (sprites, SVG, font-icon, polices, animations, boutons "sociaux")
Navigation responsive
- Structure HTML
- Déclencheur : CSS, JavaScript, jQuery ?
- Le bouton
- L'événement
Images responsive
- "Retina" ?
- La base : les images fluides
- Images de décoration (cover, image-set())
- Images de contenu (srcset, <picture>)
Composants responsive
- Tableaux responsive
- Navigations responsive
- Vidéos responsive
- Composants divers
Newsletters responsive
- Les clients email et le CSS
- Le design Mobile first
- Les exceptions Microsoft
