Responsive Design

Objectif

Maîtriser les outils qui créent des interfaces Web adaptables : savoir rendre la structure et les contenus flexibles, et optimiser les performances d’affichage des pages sur mobiles et ordinateurs

Contenu

Etat des lieux

• La multiplication des terminaux
• Quelques chiffres sur le marché mobile aujourd’hui
• Les problèmes pour le développement mobile

Introduction au responsive design

• Responsive design : définition
• Technologies utiles
• Evolution des techniques
• Mobile first
• Graceful degradation
• Etapes pour réaliser un site flexible

Rendre la structure flexible

• Concevoir son site
• Bonnes pratiques pour la maquette
• L’utilisation d’une grille CSS
• Intégrer la maquette en tirant parti d’HTML5
• Structure flexible : bien gérer les largeurs
• Compatibilité du site

Réorganiser le site avec les Mediaqueries

• Viewport
• Mediaqueries
• Points de bascule types
• Résolutions
• Fonctionnalités
• Compatibilité des Mediaqueries

Rendre les contenus flexibles

• Images fluides
• Vidéos fluides
• Menus fluides
• Polices fluides
• Formulaires fluides
• Tableaux fluides

Outils utiles, et optimisation du site

• Autres stratégies
• Présentation de iui
• Détecter un mobile
• Frameworks CSS
• Détecter les ressources avec Modernizr
• Vérifier le temps de chargement
• Sources de veille technologique