Formation Responsive Web Design.
- Référence: RWD
- En centre - Inter: Oui.
- En Entreprise - Intra: Oui.
- Durée: 2 jours
- Diplôme: Non.
- Public: Oui.
- Public demandeurs d'emploi: Non.
- Public Etudiant: Non.
- Prix: 1350 €HT.
Présentation:
Ce stage vous permettra de 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.
Objectifs du cours:
Ce stage vous permettra d’avoir réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Design.
Pré-requis:
Connaissances de base en HTML et CSS.
Programme:
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 vs 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é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.
Prochaines sessions:
- 03 mai 2016
- 11 juillet 2016
- 03 novembre 2016
- 19 décembre 2016
