Responsive Design

Responsive Design

Responsive Design

Type(s) : P
Durée : 5 Jours – 35 Heures

Prérequis

Être déjà familier avec les subtilités des langages HTML et CSS. Avoir suivi une formation CSS avancée. Cette formation n’est pas du tout adaptée aux débutants complets en CSS.

Objectifs

Comprendre l’état des lieux du Web mobile, les orientations et standards en vigueur ainsi que les systèmes et navigateurs. Découvrir toutes les techniques concrètes permettant d’adapter un design sur un terminal nomade actuel et d’optimiser les performances et temps d’affichage.

Public concerné

Personnes utilisant des langages HTML et CSS. Develloppeur. Dsi.

 

Profil du formateur

Formateur consultant, expert, pédagogue et certifié dans son domaine

Méthode pédagogique

La formation est constituée d’apports théoriques et d’exercices pratiques. Chaque stagiaire dispose d’un poste de travail et la gestion en petit groupe (jusqu’à 8 stagiaires) permet un suivi individualisé et adapté. Durant les sessions de formation, un support pédagogique est remis aux stagiaires.

Suivi, évaluation, sanction

Des tours de table permettent de suivre la progression du stagiaire au fur et à mesure de la formation. Un suivi de la formation est réalisé par une feuille de présence émargée par demi-journée par les stagiaires et le formateur. Un questionnaire de satisfaction et une validation des acquis sont complétés par chaque stagiaire en fin de formation. Formation non certifiante.

Plan du cours

État des lieux du Web mobile

  • Périphériques, OS, navigateurs, moteurs, langages
  • Le marché mobile et ses statistiques
  • La fragmentation Android

 

 

Techniques de design fluide

  • Typographie fluide (unités em et rem)
  • Un design fluide / élastique (float, BFC, table-cell, calc(), Flexbox)
  • Les unités de Viewport (vw, vh, vmin, vmax)
  • box-sizing
  • CSS3 Flexbox (orientation, flexibilité, ordonnancement, alignements)
  • Grilles fluides (framework Bootstrap, CSS3 Grid Layout)

Un contenu fluide

  • Gérer les débordements de contenus (césures et autres coupures)
  • Gérer les débordements de médias (images, vidéos, flash, etc.)

CSS3 Media Queries

  • Les médias en CSS
  • Ajouter des conditions avec Media Queries
  • Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
  • Le cumul de critères ("et", "ou", "non")
  • Compatibilité Media Queries
  • Prise en compte de l'orientation
  • Repenser son design pour les petits écrans

Les tailles des devices mobiles

  • Des vrais et des faux pixels
  • Taille de fenêtre virtuelle : Viewport
  • Taille d'écran : screen-width
  • Taille déclarée : device-width
  • Le pixel-ratio
  • Forcer le Viewport en HTML et en CSS
  • Comment choisir ses breakpoints

Performances et Web mobile

  • Comment tester
  • Astuces spécifiques web mobile (sprites, SVG, font-icon, polices, animations, boutons "sociaux")

 

Navigation responsive

  • Structure HTML
  • Déclencheur : CSS, JavaScript, jQuery ?
  • Le bouton
  • L'événement

Images responsive

  • "Retina" ?
  • La base : les images fluides
  • Images de décoration (cover, image-set())
  • Images de contenu (srcset, <picture>)

Composants responsive

  • Tableaux responsive
  • Navigations responsive
  • Vidéos responsive
  • Composants divers

Newsletters responsive

  • Les clients email et le CSS
  • Le design Mobile first
  • Les exceptions Microsoft

Nous contacter

AMS Formation (France)
03 83 67 63 05
22 Rue de Medreville
54000 Nancy – France

AMS Formation (Luxembourg)
00 352 26 10 22 58
145, route de Pétange
L-4645 Niederkorn – Luxembourg

ams-formation@ams-training.com

Suivez-nous

Retrouvez toute l'actualité d'AMS Formation sur les réseaux sociaux.