Responsive Web Design

Programme

• 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
• 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…)