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

Responsive Web Design

Reference : IM01
2 jours - Nous consulter Télécharger la fiche
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

Certification

non

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