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.