Les images dans le Responsive Web Design

Enjeux et bonnes pratiques de mise en œuvre des images dans les projets Responsive Web Design

  • Filière :

    UX, UI, Web design

  • Sous-filière :

    Responsive Web Design

  • Référence

    IRWD01

  • Durée

    2 jours (14 h)

  • Prix par personne HT

    1 390 € HT

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