webleads-tracker

Formation responsive web design - Medialibs

Maitriser le Responsive Web Design

Formation pour maitriser le concept et la méthode Responsive Web Design et préparer des sites adaptés à tous les écrans : smartphone, tablette, tv...
 

Détail de la formation

Niveau : Intermédiaire

Durée : 14 heures (2 jours)

Type : Formation collective
Formation exclusive

Profil : Intégrateurs

Tarifs : Formation collective 998€ HT
Formation exclusive 1400€ HT


Demander des informations

 

 

target-icon Objectifs

  • Comprendre les principes et les enjeux du responsive web design
  • Identifier les différences d'affichage entre les terminaux
  • Intégrer une méthodologie pour adapter son design
 
 

check-iconPré-requis

  • Bonnes connaissances xHTML/CSS
 

list icon blueProgramme

Journée 1

1. Panorama du web Mobile

  • Les différents types de terminaux
  • Evolution navigateurs, os, technologique
  • Les chiffres clés du marché
  • Lexique : périphériques, OS, navigateurs
  • Fréquences et usages de l'internet mobile
  • L'approche contenu / contenant
  • Les standards actuels (HTML5, CSS3)
  • Différence entre résolution et taille d'affichage
  • Différence entre viewport et screen

Synthèse : panorama complet du web mobile

PAUSE (15min) 11h - 11h15

2. Définitions du Responsive Web Design

  • Définition du RWD
  • Les impacts sur le web design classique
  • Expérience Utilisateur (UX) & Interface Utilisateur (UI)
  • Rapprochement mobile-desktop : vers un seul développement ?
  • Les contraintes ergonomiques et fonctionnelles

Synthèse : l'UX Design au service de la conception responsive

DEJEUNER (1H) 12h30 / 13H - 14h00

3. Les principes fondamentaux du RWD

  • La notion de points de rupture « breakpoints »
  • Définition
  • Ou se situent les points de rupture ?
  • La notion de Mobile First
  • Définition
  • « Progressive enhancement »
  • Les méthodes de développement
  • Optimiser la performance de chargement
  • Requêtes et chargements superflus
  • Bande passante et bonnes pratiques

Atelier : créer un wireframe responsive

PAUSE (15min) 16h - 16h15

4. Créer une grille d'affichage flexible 

  • Grille fixe en pixels
  • Grille flexible en pourcentage
  • Les unités de mesures fluides (% et em)
  • La formule cible / contexte = résultat
  • Box layout avec CSS3

Atelier : réaliser un affichage en grille flexible



Conclusion 

  • Questions / réponses

Journée 2

5. Utiliser des médias flexibles

  • Rendre les images flexibles
  • Optimisation des médias
  • Créer des vidéos adaptatives
  • Avoir des menus adaptatifs
  • Avoir des tableaux et des formulaires flexibles

PAUSE (15min) 11h - 11h15

Atelier : intégration d'un cas concret

6. Appliquer des Media Queries

  • Le principe des media queries
  • Gérer les règles conditionnelles (orientation, device-width...)
  • Détecter le pixel ratio et cibler la résolution rétina
  • Javascript et les anciens navigateurs

Atelier : appliquer des règles media queries

DEJEUNER (1h) 12h30 / 13h - 14h

7. Javascript pour le Responsive Web Design

  • Tester les media queries
  • Tester le viewport
  • Tester le navigateur
  • Modification et chargement dynamique
  • Redirection par Javascript

8. Les frameworks Responsive Web Design

  • Avantages et inconvénients d'un framework RWD
  • Etat des lieux des frameworks existants : Bootstrap, Foundation, 960 grid...
  • Zoom sur Bootstrap

Atelier : démonstration du framework Foundation / Bootstrap

9. Tester son site responsive

  • Tester son site responsive sur tous les terminaux
  • Les émulateurs
  • La gestion des polyfills

Atelier : Exemple d'un site responsive testé en temps réel

PAUSE (15min) 16h - 16h15

Ressources 

  • Mobile webdesign guidelines
  • Les articles conseillés
  • Les livres conseillés
  • Les sites de références

Conclusion

  • Exercice (30min)
  • QCM
  • Liste de présence
  • Questionnaire
 
 

Information et inscription à la formation :
Maitriser le Responsive Web Design