Formation Responsive Design, créer des interfaces Web adaptables

Les concepteurs de sites Web doivent dorénavant revoir leur approche pour que leurs interfaces s'adaptent à la diversité des terminaux. Cette formation apporte des réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Design.

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...).
• Travaux pratiques   Détection du type de terminal en PHP JavaScript.

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).
• Travaux pratiques   Construction de CSS selon les modes portrait/paysage, résolution du terminal.

Principe de grille flexible, fluide

• Conception classique versus 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.
• Travaux pratiques   Construire une ergonomie basée sur une grille flexible.

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éation de layout avec flexbox (organisation des éléments en fonction d'une grille).
• Créer des images et des vidéos adaptées.
• Travaux pratiques   Mise en oeuvre de solutions.

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...
• Travaux pratiques   Utilisation de frameworks.

Optimisation et performance

• Mesurer la performance de chargement, optimisation de bande passante. Répartition Client/Serveur.
• Optimisation des ressources graphiques.
• Gestion du cache.
• Travaux pratiques   Audit de pages Web, corrections conceptuelles et techniques.