Responsive Web Design – Mise en œuvre
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
MOYENS PÉDAGOGIQUES ET TECHNIQUES D’ENCADREMENT DES FORMATIONS
Modalités pédagogiques :
- Évaluation des besoins et du profil des participants.
- Apport théorique et méthodologique : séquences pédagogiques regroupées en différents modules.
- Contenus des programmes adaptés en fonction des besoins identifiés pendant la formation.
- Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de travaux pratiques, étude de cas et mise en situation.
- Méthodes expositive, active et participative.
- Réflexion et échanges sur cas pratiques.
- Retours d'expériences.
- Corrections appropriées et contrôles des connaissances à chaque étape, fonction du rythme de l’apprenant mais également des exigences requises au titre de la formation souscrite.
Éléments matériels :
- Mise à disposition des outils nécessaires au bon déroulement des travaux pratiques.
- Support de cours au format numérique projeté sur écran et transmis au participant en fin de la formation.
Référent pédagogique et formateur :
- Chaque formation est sous la responsabilité du directeur pédagogique de l’organisme de formation.
- Le bon déroulement est assuré par le formateur désigné par l’organisme de formation.
MOYENS PERMETTANT LE SUIVI ET L’APPRÉCIATION DES RÉSULTATS
- Feuilles de présences signées des participants et du formateur par demi-journée.
- Attestation de fin de formation mentionnant les objectifs, la nature et la durée de l’action et les résultats de l’évaluation des acquis de la formation.
Please login to get access to the quiz
Back to UX/UI, Ergonomie et Webdesign
