Le RWD : Responsive Web Design

Enjeux et best practices de mise en œuvre du Responsive Web Design…

Présentation de la formation

Le « Responsive Web Design » (RWD) consiste à adapter le design d’un site web afin qu’il puisse être consulté indépendamment de la plateforme de l’utilisateur : ordinateur, tablette, mobile, etc.

Cette approche peut être structurante pour un projet web, car elle demande une réflexion en amont pour trouver les meilleurs axes d’adaptation.

Cette formation très complète sur le Responsive Web Design vous permettra de comprendre les enjeux associés à cette méthode de travail en termes de techniques et de design, les bonnes pratiques de mise en œuvre, et détaillera quelques stratégies concrètes pour le RWD. Quelques exercices pratiques de mise en œuvre permettront d’ancrer ces concepts dans des cas concrets.

Programme de la formation

Objectifs pédagogiques

A l’issue de Cette formation vous serez capable de :

  • Mettre en oeuvre les principes du Responsive Web Design pour l’adaptation visuelle des sites Web à la diversité des terminaux d’affichage actuels, notamment mobiles.
  • Utiliser conjointement CSS et JavaScript pour le responsive web design.

Pré-requis

Contenu de la formation

Introduction

  • Histoire du HTML
  • Définir XHTML/CSS/JavaScript, les langages du web
  • Organismes de standardisation : WHATWG et W3C, standards et validation
  • Standards actuels (HTML5, CSS3, ECMAScript 5)
  • Identifier la diversité des terminaux d’affichage (desktop, tablette, smartphone…)
  • Différence entre résolution et taille d’affichage
  • Séparation entre contenu et présentation

Principes du responsive Web design (RWD)

  • Définir l’interface utilisateur (UI) et expérience utilisateur (UX)
  • Déterminer l’approche Mobile First
  • Détection du navigateur
  • Détection du terminal
  • Détection de fonctionnalité
  • Orientation du terminal
  • Conception d’une interface adaptative
  • Considérer les terminaux tactiles
  • Gabarits responsives

Media Queries CSS

  • Différence entre viewport et screen
  • Principe des media queries CSS
  • Règles conditionnelles (device-width, orientation…)
  • Points de rupture
  • Cibler les hautes résolutions (HiDPI, Retina)

Grille CSS flexible

  • Mise en page fluide vs. Mise en page fixe
  • Conception en grille CSS
  • Unités de mesure fluides (% et em)
  • Colonnes multiples
  • Marges et points de rupture
  • Module flexible box layout CSS3
  • Calculateurs en ligne

Contenus adaptatifs

  • Images HTML flexibles
  • Élément HTML5.1 et media queries
  • Attributs srcset et sizes.
  • Images de fond CSS3 : images multiples, tailles d’images adaptatives (background-size)
  • Menu adaptatifs
  • Vidéos adaptatives
  • Tableaux et formulaires flexibles

Polices web

  • Intégrer des polices Web
  • Adaptation des tailles de polices
  • Colonnes multiples et césure

JavaScript pour le RWD

  • Tester les medias queries
  • Tester le viewport
  • Tester le navigateur
  • Modification dynamique des contenus
  • Optimisation du chargement par cookies
  • Redirection par JavaScript

Solutions de repli

  • Graceful degradation et progressive enhancement
  • Utilisation de la librairie Modernizr
  • Utilisation des polyfills

Frameworks et librairies pour le RWD

  • Frameworks HTML (HTML5 boilerplate, Bootstrap, Skeleton)
  • Frameworks JavaScript (jQuery mobile, response.js, yepnope.js, modernizr.js, touchswipe.js)
  • Frameworks CSS (Bootstrap, Foundation, 960 Grid, Gumby, Skeleton)

Test d’un site responsive

  • Solutions en ligne
  • Solutions hors ligne : Adobe Edge Inspect, Dimensions…
  • Optimisation des contenus

RWD côté serveur

  • Librairie WURFL.js
  • Entête HTTP et chaîne User-Agent
  • Exemple de la class Mobile_Detect en PHP

Méthodes & moyens

Explications théoriques suivies de pratiques guidées puis mises en autonomie

  • 1 vidéoprojecteur par salle
  • 1 ordinateur par stagiaire

Profil du formateur

Nos formateurs sont certifiés à l’issue d’un parcours organisé par nos soins. Ils bénéficient d’un suivi de compétences aussi bien au niveau technique que pédagogique.

Support de cours

  • Support papier ou électronique (dématérialisé)
  • Les exercices d’accompagnement peuvent être récupérés sur clef USB

Responsive Web Design

Le RWD : Responsive Web Design

Infos Pratiques

Durée : 3 jours (21 heures)
Prix : A définir
Lieu: A définir

Plus d'infos ?



Événements À Venir

Pas de Évènements