UX/UI, Ergonomie et Webdesign

Objectifs

• Cette formation Responsive Web Design - Mise en œuvre permet de comprendre et mettre en œuvre les principes du Responsive Web Design pour l’adaptation visuelle des sites Web à la diversité des terminaux d’affichage actuels, notamment mobiles
• Utiliser conjointement CSS et JavaScript pour le responsive web design

Programme

INTRODUCTION

• Histoire du HTML
• Définir XHTML/CSS/JavaScript, les langages du web
• Organismes de standardisation : WHATWG et W3C, standards et validation
• Standards actuels (HTML5, CSS3, ECMAScript 5)
• Identifier la diversité des terminaux d’affichage (desktop, tablette, smartphone…)
• Différence entre résolution et taille d’affichage
• Séparation entre contenu et présentation

PRINCIPES DU RESPONSIVE WEB DESIGN (RWD)

• Définir l'interface utilisateur (UI) et expérience utilisateur (UX)
• Déterminer l'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

MEDIA QUERIES CSS

• Différence entre viewport et screen
• Principe des media queries CSS
• Règles conditionnelles (device-width, orientation…)
• Points de rupture
• Cibler les hautes résolutions (HiDPI, Retina)

GRILLE CSS FLEXIBLE

• Mise en page fluide vs. Mise en page fixe
• Conception en grille CSS
• Unités de mesure fluides (% et em)
• Colonnes multiples
• Marges et points de rupture
• Module flexible box layout CSS3
• Calculateurs en ligne

CONTENUS ADAPTATIFS

• Images HTML flexibles
• Élément HTML5.1 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

POLICES WEB

• Intégrer des polices Web
• Adaptation des tailles de polices
• Colonnes multiples et césure

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

SOLUTIONS DE REPLI

• Graceful degradation et progressive enhancement
• Utilisation de la librairie Modernizr
• Utilisation des polyfills

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)

TEST D’UN SITE RESPONSIVE

• Solutions en ligne
• Solutions hors ligne : Adobe Edge Inspect, Dimensions…
• Optimisation des contenus

RWD COTE SERVEUR

• Librairie WURFL.js
• Entête HTTP et chaîne User-Agent
• Exemple de la class Mobile_Detect en PHP