Description

La gestion des images fait partie des points sur lesquels un projet Responsive Web Design nécessite des efforts particuliers de conception et de mise en œuvre. Les standards HTML et CSS récents pour la gestion des images sur appareils de dimensions et densité d’écran variables nécessitent une bonne compréhension afin d’être mis en œuvre de manière satisfaisante tant pour le gestionnaire du site que pour ses visiteurs.
Cette formation complète sur la gestion des images dans un projet Responsive Web Design vous permettra de comprendre les enjeux en termes de techniques et de design, et les bonnes pratiques de mise en œuvre. De nombreux exercices pratiques de mise en œuvre permettront d’ancrer ces concepts dans des cas concrets.

Objectifs pédagogiques

Appréhender les tenants et aboutissants de la gestion des images dans les projets Responsive Web Design,
Intégrer dans leurs projets Responsive Web Design les bonnes techniques de gestion des images.

Public cible

Développeurs front-end, UX Designers, Graphistes Web, Chefs de projet Web

Pré-requis

Bonne connaissance de l’intégration front end HTML et CSS et du Responsive Web Design

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Méthodes pédagogiques

40% théorie / 60% pratique

Programme de la formation

État des lieux du Web mobile

Usage de devices différents selon le contexte, le moment de la journée
Activité séquentielle d’un device à l’autre
Statistiques par navigateurs et plateformes
Rapprochement mobile – desktop : un seul développement

Rappel de la définition du Responsive Web Design

La définition d’origine
Les grands principes pour les images
Parcours de quelques sites pour visualiser les pratiques courantes pour les images en
Responsive Web Design

Les formats d’images

Les images matricielles (bitmap) : GIF, PNG, JPEG
Les images vectorielles : fontes d’icônes, SVG
La gestion des sprites

Gérer les images de décoration dans la CSS

Gérer les densités variables (« Retina »)
Gérer les largeurs variables, fluides
Combiner les deux

Gérer les images de contenu dans le HTML

Gérer les densités variables (« Retina »)
- L’astuce « Compressive Images »
- srcset-x
Gérer les largeurs variables, fluides
- srcset-w
- sizes
La Direction Artistique
- picture / source

Solutions actuelles pour une mise en œuvre tous navigateurs

Le polyfill picturefill v3
La gestion des fallbacks

Les solutions du futur

Les Client Hints

Qualité

Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.

Programme mis à jour le 29 février 2024