Responsive Web Design.

Pré-requis : Une maîtrise d'un logiciel de graphisme ou de wireframing est un plus pour suivre cette formation.

• 
  
• Identifier les enjeux et le contexte propre aux multi-écrans
  
• Pratiquer la conception d'interfaces Web Responsive
  
• Appliquer les bonnes pratiques de l'ergonomie et de l'UI Design sur les différents terminaux
  

JOUR 1

Introduction

• 
  
• Définir la notion de Responsive Web Design
  
• Observer des sites web responsive « primés »
  
• Rappeler les règles fondamentales du design visuel sur écran
  
• Distinguer internet, du web et des autres applications (e-mail, apps?)
  
• Définir les notions d'accessibilité, d'ergonomie, d'UX et d'UI design
  
• Nommer les zones et les composants types d?une interface
  

Identifier les enjeux du contexte multi-écrans

• 
  
• Identifier le contexte multi-écrans, les différentes familles et tailles d'écran
  
• Examiner les statistiques de consultation du web sur les différents terminaux
  
• Comprendre la notion de fragmentation mobile (devices, OS, navigateurs)
  
• Décrire les spécificités des différents devices (taille, résolution, interactivité, usage, performance)
  
• Appréhender les enjeux essentiels d'une expérience tactile et mobile
  
• Décrire les principales règles de l'ergonomie d?interface (ISO 9241)
  

ATELIER 1 - Analyser des sites web responsives

• 
  
• Identifier les points de rupture, les comportements de la grille, des composants
  
• Evaluer les bonnes et mauvaises pratiques en responsive web design
  
• Identifier les grandes tendances de l'UI design
  
• Évaluer les bénéfices et limites du Responsive
  

Concevoir des interfaces web responsive

• 
  
• Comparer le responsive web aux sites mobile dédié, apps, progressive apps, ?
  
• Décrire les principes du Web Responsive Design (grille et media fluide, media queries)
  
• Différencier les possibilités d?adaptation : statique, liquide, adaptatif, responsive
  
• Identifier les différents layouts et design patterns spécifiques responsive
  
• Déterminer le comportement fixe ou fluide de la grille et des éléments
  
• Appréhender le Mobile First « amélioration progressive » vs le Desktop First « dégradation élégante »
  
• Différencier les notions de zoning, wireframes, mockup et prototypes
   
  

JOUR 2

Appréhender les contraintres techniques

• 
  
• Différencier le Web front-end et Web back-end et le rôle de leur langage
  
• Lister les éléments d'interface courant du Web (JQuery UI, JQuery mobile)
  
• Appréhender les unités fluides (%, em, rem, vw, vh, vmin, vmax)
  
• Appréhender les techniques de design fluide : float, BFC, table-cell, calc()
  
• Appréhender les grilles fluides (frameworks, CSS3 Grid Layout, CSS3 Flexbox)
  
• Appréhender les tailles de devices (viewport, screen-width, device width, pixel ratio)
  
• Lister les principaux frameworks CSS Responsive (Boostrap, Semantic UI, Foundation?)
  

ATELIER 2 - Designer des interfaces web responsives

• 
  
• Comparer les différents outils de design (Adobe, Sketch, Figma, Axure?)
  
• Organiser l'architecture de son fichier pour les différents devices
  
• Utiliser les systèmes de grille conformes à CSS dans la structuration d'une maquette
  
• Construire les composants et gérer leur transformation en fonction du device
  
• Prendre en compte les problématiques des différentes densités d?écran
  
• Générer les assets (.jpg, .png, .svg, ?) et appréhender le fonctionnement des Web fonts
  
• Partager son projet avec les différentes parties-prenantes (client, développeur?)