webleads-tracker

Formation collective Maîtriser le Responsive Web Design

Formation collective "Maîtriser le Responsive Web Design"

Publié le 25/01/2019

Les 20 et 21 mars, nous vous proposons une formation pour maîtriser le concept et la méthode Responsive Web Design et préparer des sites adaptés à tous les écrans : smartphone, tablette, tv...

Formation collective Maîtriser le Responsive Web Design  bandeau

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 / personne

                Formation exclusive 1600€ HT

 

 

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-icon Pré-requis

  • Bonnes connaissances en xHTML/CSS

 

target-icon Programme

 

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
    • Bonnes connaissances xHTML/CSS
 
 


Informations et inscription à la formation :

Vous pouvez aussi nous contacter au 02 41 19 19 92.

En soumettant ce formulaire de contact, j'accepte que les informations saisies soient exploitées dans le cadre de ma demande d'information.