[wpms_breadcrumb reverse="0"]
Internet et Mobilité

Responsive Web Design

Reference : IM01
2 jours - Nous consulter
Prochaines sessions

Nous consulter.

Responsive Web Design
Objectifs

  • Connaitre les spécificités du Responsive web design
  • Maîtriser les techniques d’adaptation des contenus à différentes résolutions
  • Être en mesure d’optimiser les performances d’affichage
  • Connaître les bonnes pratiques en terme de conception Responsive Web Design

Pré requis

  • Avoir suivi la formation « Créer des sites et applications web avec HTML5 et CSS3 »

Modalités pédagogiques

Cours dispensé en mode présentiel avec une alternance d’apports théoriques et méthodologiques, et de mises en situations pratiques

Public visé
Inscription

Programmes de Responsive Web Design

Tour d’horizon

  • Le monde de la mobilité
  • Les usages en mobilité
  • Qu’est ce que le responsive design
  • Les standards du web

Une procédure à suivre

  • Une conception Mobile First
  • Problématiques d’affichage
  • Prendre en compte l’orientation et le tactile
  • Les outils de conception
  • Les plans et outils de tests

Media Queries

  • Comment adapter le CSS fonction du terminal
  • Les opérateurs logiques CSS
  • Les critères à utiliser pour mobiles (width, device-width, orientation, etc.)
  • La compatibilité navigateurs des media queries
  • Risques et limites des media queries

Grilles flexibles et/ou fluides

  • Quelles différences avec un positionnement classique
  • Les blocs
  • Les problèmes de débordements de contenus ou de médias
  • Les points de rupture
  • Gérer les écrans Retina
  • Présentation des Framework de grilles responsives (Boostrap, Foundation, etc.)

Optimisation et performance

  • Outils de mesure
  • Rapidité, importance majeure pour Google
  • Optimisation des CSS, des fichiers JavaScript
  • La minification (minify.js)
  • Les images
  • Les sprites CSS
  • Côté serveur, bonnes pratiques