Création de site, CMS, Responsive Design, E-commerce, ...

Avancé 2 jours (14h) - St Cloud

Réf : RWD-001

Formation Responsive Design (RWD) pour développeurs web

Cette formation présente les différentes stratégies, les outils et les méthodes permettant le développement d'une interface web responsive design.

Le responsive design est 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. Cette formation permettra aux participants de maitriser toutes les techniques permettant de créer des sites responsive design. Une pédagogie riche : l'alternance de phases théoriques et de travaux pratiques favorise l'ancrage des acquis dans le temps ainsi que l'autonomie des participants à l'issue de la formation. Les participants bénéficient de l'expertise et de l'expérience d’intervenants fréquemment impliqués dans la conception de sites Responsive Web Design.

Formation dispensée uniquement en intra-entreprise.

Programme

1. Tour d'horizon

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

2.  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

3.  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

4.  Grilles flexibles et/ou Fluides

  • Comment adapter le CSS fonction du terminal
  • 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.)

5.  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

Tlcharger l'article au format PDF