Formation Média
Web, Mobile, PAO et Vidéo

Formation CSS Web Mobile

Adaptez votre site aux terminaux mobiles

Découvrez toutes les techniques concrètes permettant d'adapter un design sur un terminal mobile actuel (responsive web design pour les tablettes, smartphones, netbooks) et les bonnes pratiques pour optimiser les performances et temps d'affichage.
Comprenez l'état des lieux du Web mobile, les orientations et standards en vigueur ainsi que les systèmes et navigateurs.
15 heures de formation (2 jours en présentiel).

Public

  • Graphistes ou webmasters ayant en charge l'intégration et la mise en page des sites web.

Pré requis

  • Expérience de développement en XHTML / CSS (mise en page sans tableaux)

Objectifs

  • Connaître les orientations et les standards en vigueur ainsi que les systèmes et navigateurs
  • Adapter un design sur un terminal nomade
  • Optimiser les performances et temps d'affichage.

Programme

Dispensé avec des méthodes d'apprentissage actives basées sur des exercices pratiques. 

 

1 - État des lieux du Web Mobile

  • Périphériques, OS, navigateurs, moteurs, langages
  • Le marché mobile et ses statistiques
  • Vers l’infini et au-delà (standards, HTML5, CSS3)

2 - Un design fluide

  • Faire du "Responsive Webdesign"
  • Tailles d'écran "critiques"
  • Les unités pixel, em et % : pour quel usage ?
  • Colonnes fluides : les limites ergonomiques
  • Minimas et maximas

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

4 - Les tailles d'un mobile

  • Les mobiles mentent !
  • Taille d'écran : screen-width
  • Taille déclarée : device-width
  • Taille de fenêtre virtuelle : Viewport
  • Forcer le Viewport en HTML et en CSS

5 - Adapter le design : les 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.)
  • Compatibilité Media Queries
  • Exemple : passer sur une colonne
  • Prise en compte de l'orientation
  • Menu horizontal
  • Tableaux et éléments à risques
  • Repenser son design pour les petits écrans

6 - Astuces et travaux pratiques

  • Un zeste de HTML 5
  • Forcer le Viewport
  • Redimensionner les éléments
  • Gérer les débordements
  • Une seule colonne !
  • Adapter les polices (aussi en paysage)
  • Supprimer le superflu et les lourdeurs
  • Optimiser la navigation
  • Réordonner les contenus : le menu en bas

7 - Responsive VS Performances

  • Bande passante et bonnes pratiques
  • Requêtes et chargements superflus (fichiers, images, scripts)
  • Feuille de style optimale ?
  • Mediaqueries exclusifs
  • Testez vos performances mobiles

6 - Think Mobile First

  • L'usage mobile explose
  • Le mobile force à aller à l'essentiel
  • Le mobile étend nos capacités

7 - Optimiser pour le web mobile

  • Généralités (adapter le contenu, parallélisation
  • HTML (conventions, formulaires HTML5, Web Storage, Web Offline)
  • CSS (CSS unifiés, Media Queries, Classes conditionnelles, minification)
  • Médias (compression d'image, sprites, Data URI, caractères spéciaux, chargement conditionnel, vidéos, audio)
  • JavaScript (ou pas ? asynchrone ou différé, chargement conditionnel, jQuery, CSS3 ?)
  • Exemple pratique

8 - Des outils pour automatiser

  • WPTouch
  • Tumblr
  • jQuery Mobile

9 - Stratégies pour le Web Mobile

  • Particularités des terminaux mobiles
  • Adaptation du design
  • Site web dédié aux mobiles
  • Application native

10 - Tester son site

  • Emulateurs en ligne
  • Kits développeurs