Alsacreations, agence web exotiquemenu

Formation Web mobile

Adapter son site pour le Web mobile

Public

Cette formation de deux journées s'adresse aux développeurs web et webdesigners souhaitant débroussailler le terrain épineux de l'adaptation de sites web pour le monde mobile et ses différents acteurs (iPhone, iPad, Android, Blackberry, Windows Phone…).
Cette formation est dédiée à l'adaptation d'un design existant au média mobile. Elle n'est pas consacrée au développement d'applications natives.

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.
La première journée est entièrement dédiée à l'adaptation, via langage CSS, d'un design existant à l'ensemble des périphériques nomades (tablettes, smartphones, netbooks)
La seconde journée détaille toutes les bonnes pratiques concernant les performances et optimisation pouvant être appliquées sur des sites web mobiles.

Pré-requis

Etre déjà familier avec les subtilités des langages HTML et CSS. Avoir suivi une formation telle que "CSS Avancées" est un plus.
Cette formation n'est pas du tout adaptée pas aux débutants complets en CSS.


Programme de la première journée : Design et CSS

  • É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)
  • 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
  • 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.)
  • 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
  • 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
  • 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
  • Ressources utiles
    • Outils en ligne
    • Galeries de sites web mobiles

Programme de la deuxième journée : Performances et bonnes pratiques

  • 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
  • Think Mobile First
    • L'usage mobile explose
    • Le mobile force à aller à l'essentiel
    • Le mobile étend nos capacités
  • 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
  • Des outils pour automatiser
    • WPTouch
    • Tumblr
    • jQuery Mobile
  • Stratégies pour le Web mobile
    • Particularités des terminaux mobiles
    • Adaptation du design
    • Site web dédié aux mobiles
    • Application native
  • Tester son site
    • Emulateurs en ligne
    • Kits développeurs

Rappel : cette formation est dédiée à l'adaptation d'un design existant au média mobile. Elle n'est pas consacrée au développement d'applications natives.
Par ailleurs, ce module de formation est totalement compatible avec la formation « CSS3 ».


Testez vos connaissances !

Evaluez votre niveau vis à vis de cette formation, à l'aide de notre mini questionnaire dédié.

  • Sauriez-vous énumérer plus de 3 navigateurs sur terminaux mobiles ?
  • Utilisez-vous fréquemment un smartphone pour accéder au Web ?
  • Le terme de "CSS3 Media Query" vous est-il familier ?
  • Connaissez-vous la largeur en pixel de l'écran de votre smartphone ?
  • Savez-vous ce qu'est le "viewport" d'un mobile ?
  • Avez-vous entendu parler du terme "responsive web design" ?
  • Avez-vous déjà utilisé l'unité de mesure "em" ?

Toutes ces notions sont développées dans le module "Web mobile". Si vous ne maîtrisez pas tous les concepts évoqués, alors cette journée est faite pour vous !
Par contre, si tous ces points vous sont totalement étrangers, le module ne nous semble peut-être pas approprié.

Imprimer la page PDF (61 Ko)

Toutes nos formations

Envie de vous inscrire ?