Responsive Web Design

Enjeux, stratégies et bonnes pratiques de mise en œuvre du Responsive Web Design

  • Filière :

    UX, UI, Web design

  • Sous-filière :

    Responsive Web Design

  • Référence

    RWD01

  • Durée

    2 jours (14 h)

  • Prix par personne HT

    1 390 € HT

Description

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.

Objectifs pédagogiques

  • Appréhender les tenants et aboutissants du Responsive Web Design
  • Intégrer dans leur gestion de projet les implications du Responsive Web Design
  • Mettre en œuvre les techniques de conception de sites web adaptatifs

Public cible

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

Pré-requis

Bonne connaissance de l’intégration front end HTML et CSS

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

30% théorie / 70% 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

Définition du Responsive Web Design

  • La définition d’origine
  • Les grands principes
  • L’impact sur la gestion de projet
  • Les outils de conception
  • Les outils de test
  • Ressources essentielles

Analyse de quelques sites

  • Parcours de quelques sites de nature différente pour visualiser les possibilités et pratiques du Responsive Web Design

La mise en page

  • Les grilles macro typographiques
  • Rythme vertical et rythme horizontal
  • Mise en page fixe vs. liquide vs. élastique
  • Unités CSS à utiliser
  • Techniques actuelles et futures de définition de grilles : float, flexbox, grid layout, etc.
  • Principaux frameworks de grilles responsives : Bootstrap, Foundation, etc.

Les points de rupture

  • Les Media Queries CSS3
  • Choisir les bons points de rupture
  • Unités CSS à utiliser
  • Exploiter les points de rupture en JavaScript
  • La stratégie Mobile First, la notion d’amélioration progressive

Le viewport

  • La notion de viewport
  • La meta viewport
  • Valeurs pertinentes de viewport
  • La cas particulier de iOS

Gérer les anciens navigateurs

  • Identifier les navigateurs ne comprenant pas les Media Queries
  • Leur « apprendre » à les comprendre avec Respond.js
  • Leur fournir une version adaptée sans JavaScript

Éléments méthodologiques pour les projets responsives

  • L’impact sur le cycle projet : conception, design, intégration, tests
  • Pratiques courantes et pratique « idéale »
  • L’approche Atomic Design

Adapter les contenus

  • Les textes. Faut-il réécrire des contenus ?
  • Les images : adaptations aux largeurs fluides et densités d’écran variables
  • Les vidéos
  • Les menus de navigation
  • Les tableaux de données
  • Les formulaires
  • Les publicités

La performance

  • L’approche côté serveur : RESS
  • L’approche côté client : le chargement conditionnel

Le référencement naturel (SEO)

  • Impact sur les contenus
  • Impact sur les images

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