menu

Formation Responsive Web Design

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 designs 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 via CSS. 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 "Maîtrise des CSS" est un plus.
Cette formation n'est pas du tout adaptée 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" (points de rupture)
    • 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
    • Tableaux de données responsive
    • Repenser son design pour les petits écrans
  • RWD : les techniques avancées
    • dompter le modèle d'affichage tabulaire en CSS (display: table)
    • Exploiter les multicolonnes en RWD (CSS3 columns)
    • Découvrir CSS3 FlexBox et ses possibilités pour le Web mobile

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

  • Travaux pratiques : un design adapté à toutes les résolutions
    • Adapter le Viewport
    • Redimensionner les éléments
    • Gérer les débordements
    • Une seule colonne !
    • Supprimer le superflu et les lourdeurs
    • Optimiser la navigation et l'afficher conditionnellement
  • Le "problème du Retina"
    • Pixels indépendants (DIP)
    • Pixel-ratio
    • Gérer les images de contenu
    • Gérer les images d'arrière-plan
  • Responsive Vs Performances
    • Bande passante et bonnes pratiques
    • Testez vos performances mobiles
  • 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)
    • Vers la feuille de style CSS optimale ?
    • Médias (compression d'image, sprites, Data URI, caractères spéciaux, chargement conditionnel, vidéos, audio)
    • Requêtes et chargements superflus (fichiers, images, scripts)
    • Think Mobile First et chargements conditionnels
    • JavaScript (ou pas ? asynchrone ou différé, jQuery, CSS3 ?)
    • Travaux pratiques complets et tests de performance
  • Ressources utiles
    • Outils en ligne
    • Galeries de sites web mobiles

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 "Responsive Web Design". 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é.


Avant-goût de la formation

Voici ci-dessous quelques captures des diaporamas présentés et expliqués durant la formation.

Imprimer la page PDF (61 Ko)
S'inscrire

Toutes nos formations

Envie de vous inscrire ?