Les images dans le Responsive Web Design Réf : IMRWD

Par Nicolas Hoizey

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

Durée :
2 jours

1 000 € HT (prix conseillé)

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

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

A l’issue de cette formation, les participants seront en mesure de :
  • 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

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.

Type

Stage pratique

Méthode pédagogique

Alternance de présentation magistrale (40%) et de travaux pratiques sur machine individuelle (60%).

Plan de cours

É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

Prochaines sessions

Aucune session de planifiée à ce jour, veuillez nous contacter pour avoir plus d'info ou suggérez vous-même une session.


Proposer une session.

Pas de témoignage pour l'instant.

Cher(e) visiteur(euse),
Nous vous remercions pour l'intérêt porté à nos formations. La pré-inscription à une session de formation se fait via le formulaire d'inscription de la page formation.

La Convention de Formation Professionnelle Continue simplifiée vous sera envoyée par mail dans les 72H max. Votre inscription est considérée comme définitive, une fois cette convention signée par votre entreprise ou OPCA. La facture sera émise à l'issue de la formation, comme mentionnée dans nos conditions générales de vente.

A noter que les demandeurs d'emploi peuvent bénéficier d'une remise de 20% sur le prix public.

Pour toute information complémentaire ou demande de devis, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Technologies front-end »  – Voir toutes les formations