Formation Responsive Web Design : mise en œuvre

Contenu

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 côté serveur

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

Méthodes pédagogiques

8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Modalités de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.