...

Formation Responsive Web Design : Créer des interfaces Web ergonomiques et adaptatives

L’avènement des terminaux mobiles de type tablettes et smartphones a révolutionné le monde de la conception web puisque les sites aujourd’hui créés sont susceptibles d’être consultés sur un très large éventail d’écrans. Aussi assiste-t-on à l’émergence d’un nouveau concept : le Responsive Web Design ! Et force est de constater que plus aucun projet n’est lancé sans que ne se pose la question du choix de cette approche de conception ! Mais de quoi parle-t-on précisément ? Il s’agit d’un ensemble de méthodes et techniques (notamment les Media Queries dans le CSS3) permettant d’universaliser un site web, donc de l’adapter à tous les types de terminaux. Ainsi, qu’il soit consulté sur ordinateur, tablette ou mobile, le site ainsi conçu s’adaptera automatiquement à la taille de l’écran.


Objectifs
  • Comprendre les problématiques ergonomiques et graphiques liées à la diversité des terminaux d’affichage de sites web actuels
  • Créer un site web s’adaptant à différents terminaux cibles
  • Utiliser conjointement CSS et JavaScript pour le responsive web design
  • Tester et assurer des solutions de repli afin d’obtenir un maximum de compatibilité
Participants
  • Développeur
  • Intégrateur HTML
Approche Pédagogique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
  • Durée : 2 jours
  • Réf. : WEB69

Dates de Formations

21 et 22 Mai 2019

09 et 10 Juil. 2019

27 et 18 Sept. 2019

12 et 13 Nov. 2019

Programme
  • 1/ Introduction
    • • Chronologie du HTML
    • • XHTML/CSS/JavaScript, les langages du web
    • • Organismes de standardisation : WHATWG et W3C, standards et validation
    • • Standards actuels (HTML5, CSS3)
    • • Diversité des terminaux d’affichage
    • • Différence entre résolution et taille d’affichage
    • • Séparation entre contenu et presentation
  • 2/ Principes du responsive Web design (RWD)
    • • Interface utilisateur (UI) et expérience utilisateur (UX)
    • • 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
  • 3/ Media Queries
    • • Différence entre viewport et screen
    • • Principe des media queries
    • • Règles conditionnelles (device-width, orientation…)
    • • Points de rupture
    • • Cibler la résolution Retina
  • 4/ Grille CSS flexible
    • • Mise en page fluide vs. mise en page fixe
    • • Conception en grille CSS
    • • Unités de mesure fluides (% et em)
    • • Multi colonnage
    • • Marges et points de rupture
    • • Module flexible box CSS3
    • • Calculateurs en ligne
  • 5/ Contenus adaptatifs
    • • Images HTML flexibles
    • • Element HTML5 "picture" 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
  • 6/ 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
  • 7/ 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)
  • 8/ Test d’un site responsive
    • • Solutions en ligne
    • • Solutions hors ligne : Adobe Edge Inspect, Dimensions
    • • Optimisation des contenus