Accueil > Marketing, Commercial > Webmarketing > Responsive Web Design : Créer des interfaces Web ergonomiques et adaptatives
Formation #RPO

Formation Responsive Web Design : Créer des interfaces Web ergonomiques et adaptatives

29 Août 2019

Du 10 au 12 Oct. 2019

Du 10 au 12 2019

3 jours

Réf. RPO

Vous souhaitez personnaliser le programme de cette formation pour qu'elle réponde aux spécificités de votre entreprise ? Demandez un devis.

L’avènement des terminaux mobiles de type tablettes et smartphones a révolutionné le monde de la conception web puisque les sites aujourd’hui créés sont susceptibles d’être consultés sur un très large éventail d’écrans. Aussi assiste-t-on à l’émergence d’un nouveau concept : le Responsive Web Design ! Et force est de constater que plus aucun projet n’est lancé sans que ne se pose la question du choix de cette approche de conception ! Mais de quoi parle-t-on précisément ? Il s’agit d’un ensemble de méthodes et techniques (notamment les Media Queries dans le CSS3) permettant d’universaliser un site web, donc de l’adapter à tous les types de terminaux. Ainsi, qu’il soit consulté sur ordinateur, tablette ou mobile, le site ainsi conçu s’adaptera automatiquement à la taille de l’écran.

Objectifs

  • Comprendre les problématiques ergonomiques et graphiques liées à la diversité des terminaux d’affichage de sites web actuels
  • Créer un site web s’adaptant à différents terminaux cibles
  • Utiliser conjointement CSS et JavaScript pour le responsive web design
  • Tester et assurer des solutions de repli afin d’obtenir un maximum de compatibilité
Participants

Participants

  • Développeur
  • Intégrateur HTML
Approche Pédagogique

Approche Pédagogique

  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Programme
1/ Introduction
  • Chronologie du HTML
  • XHTML/CSS/JavaScript, les langages du web
  • Organismes de standardisation : WHATWG et W3C, standards et validation
  • Standards actuels (HTML5, CSS3)
  • Diversité des terminaux d’affichage
  • Différence entre résolution et taille d’affichage
  • Séparation entre contenu et presentation
2/ Principes du responsive Web design (RWD)
  • Interface utilisateur (UI) et expérience utilisateur (UX)
  • 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
3/ Media Queries
  • Différence entre viewport et screen
  • Principe des media queries
  • Règles conditionnelles (device-width, orientation…)
  • Points de rupture
  • Cibler la résolution Retina
4/ Grille CSS flexible
  • Mise en page fluide vs. mise en page fixe
  • Conception en grille CSS
  • Unités de mesure fluides (% et em)
  • Multi colonnage
  • Marges et points de rupture
  • Module flexible box CSS3
  • Calculateurs en ligne
5/ Contenus adaptatifs
  • Images HTML flexibles
  • Element HTML5 "picture" 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
6/ 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
7/ 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)
8/ Test d’un site responsive
  • Solutions en ligne
  • Solutions hors ligne : Adobe Edge Inspect, Dimensions
  • Optimisation des contenus
Dates

Dates

  • 29 Août 2019
  • Du 10 au 12 Oct. 2019
  • Du 10 au 12 2019