Responsive Web Design

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