Responsive Web Design : mise en œoeuvre

Objectifs

Cette formation permet de comprendre et 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.

Public

Intégrateurs et développeurs frontend, webmestres, concepteurs de sites web.

Durée

21 heures en présentiel sur 3 jours

Pré-requis

Etre à l'aise avec XHTML 1.0 ou HTML5 et CSS 2.1 ou CSS3 et connaître JavaScript.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.

Déroulé

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