Développement web - Frontend

Objectifs

• Connaitre les spécificités du Responsive web design
• Maîtriser les techniques d'adaptation des contenus à différentes résolutions
• Être en mesure d'optimiser les performances d'affichage
• Connaître les bonnes pratiques en terme de conception Responsive Web Design

Programme

Tour d’horizon

• Le monde de la mobilité
• Les usages en mobilité
• Qu’est-ce que le responsive design
• Les standards du web

Une procédure à suivre

• Une conception Mobile First
• Problématiques d’affichage
• Prendre en compte l’orientation et le tactile
• Les outils de conception
• Les plans et outils de tests

Media Queries

• Comment adapter le CSS fonction du terminal
• Les opérateurs logiques CSS
• Les critères à utiliser pour mobiles (width, device-width, orientation, etc.)
• La compatibilité navigateurs des media queries
• Risques et limites des media queries

Grilles flexibles et/ou fluides

• Quelles différences avec un positionnement classique
• Les blocs
• Les problèmes de débordements de contenus ou de médias
• Les points de rupture
• Gérer les écrans Retina
• Présentation des Framework de grilles responsives (Boostrap, Foundation, etc.)

Optimisation et performance

• Outils de mesure
• Rapidité, importance majeure pour Google
• Optimisation des CSS, des fichiers JavaScript
• La minification (minify.js)
• Les images
• Les sprites CSS
• Côté serveur, bonnes pratiques