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
Please login to get access to the quiz
Back to UX/UI, Ergonomie et Webdesign