Formation responsive design : créer un site compatible PC, Tablette et Smartphone

Cette formation au responsive design initira les stagiaires aux bonnes pratiques du HTML/CSS pour créer un site internet qui s'adaptera parfaitement aux tailles des terminaux, que ce soit des ordinateurs, des tablettes ou des Smartphones.

Les deux jours de formation s'articuleront autour d'un support de cours, d'exemples concrets et de la mise en pratique des notions HTML/CSS abordées.

Supports et moyens pédagogiques

Vous disposerez des éléments nécessaires ci-dessous pour le bon déroulement de votre formation:

• Power Point
• Ordinateur/PC
• Vidéoprojecteur
• Paperboard
• Supports pédagogiques
• Livret de formation

Cette formation est modulable.

Plan de cours du formateur réalisant la formation créer un site en responsive design

Les Fondamentaux

• La notion d'héritage en cascade
• Les sélecteurs css et leurs propriétés
• Le modèle de boîte, box-sizing, margin-collapsing
• Les mesures : px, em, %, rem

Introduction au responsive design

• Notions d'adaptabilité
• Bien cibler les medias

Les différents types de gabarits

• Fixes, élastiques, fluides
• La notion de viewport
• Gérer l'affichage : min-width, min-height, float, clear, clearfix, overflow 
• Bien positionner ses block (absolute, fixed, static, relative)
• Les display (inline, inline-block, table, table-cell)

Le responsive CSS3

• Les Media Queries 
• S'adapter aux mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
• Compatibilité avec les navigateurs (Chrome, Safari, Firefox, IE...)
• La structure en colonne la notion d'orientation (portrait, landscape)
• Tableaux responsive
• Repenser son design pour tous les écrans