Formation Responsive Web Design (RWD)

FORMATION RESPONSIVE WEB DESIGN (RWD)
CONTACT
DURÉE : 2 JOURS
89, quai Panhard et Levassor
75013 Paris
Référence : RWD 01
+33 1 44 75 42 55
+33 1 44 75 05 25
[email protected]
OBJECTIFS
Mieux comprendre les problématiques de la conception d’un site Responsive
Découvrir les outils qui vous aideront dans la réalisation de vos sites RWD
PUBLIC
Développeurs web
PRÉ-REQUIS
Connaissances avancées en HTML, CSS et Javascript
MÉTHODES PÉDAGOGIQUES
50% théorie/ 50 % pratique
DESCRIPTION
L’arrivée des Smartphones a radicalement changé notre manière d’appréhender le web. Cloisonnés pendant de nombreuses
années sur des résolutions qui ont peu évoluées et sur un réseau stable, la plus part des sites internet ont des difficultés à
s’afficher convenablement sur un téléphone mobile.
Et ceci n’est que la partie visible de l’iceberg, reste à gérer la notion de tactile, l’explosion du nombre de navigateurs, l’arrivée
des TV connectées et maintenant des lunettes et autres montres intelligentes. Pour tenter de répondre à ces nouveaux
besoins sans devoir développer un site dédié à chaque périphérique, le Responsive Web Design (RWD), ou conception de
SOAT Training
Formation Responsive Web Design (RWD)
1/3
sites adaptifs, a émergé.
Cette formation vous permettra de mieux appréhender les concepts de base derrière les termes : Grilles fluides, médias
adaptifs, media queries, dégradation élégante (responsive degradation), amélioration progressive (progressive
enhancement), mobile first, etc., mais également les concepts plus avancés tels que Flexbox ou encore les nouvelles balises
HTML5 permettant de gérer des images responsive plus facilement.
En plus de tous ces sujets directement liés aux problématiques des sites adaptatifs, nous évoquerons rapidement comment
ces changements vont impacter votre manière d’optimiser et de tester vos sites.
PROGRAMME
Introduction au Responsive Web Design
Qu’est-ce que le RWD
Adaptif vs fluide vs responsive
Amélioration progressive vs Dégradation élégante
Penser et concevoir son site autrement
Tour d’horizon des problématiques associées
Découverte des outils utiles
Concevoir un site fluide
Rappel sur les unités relatives
Concevoir une grille fluide
Concevoir un site adaptif
Gérer son viewport
Utiliser les média queries
Bien définir ses points de ruptures
Découverte de la norme Flexbox
Gérer les images
Images de fonds
Icônes avec font-icon et svg
Utiliser la balise Picture et l’attribut srcset
Support des anciens navigateurs
SOAT Training
Formation Responsive Web Design (RWD)
2/3
La performance
Optimiser ses ressources et définir un « budget performance »
Chargement conditionnel
Détecter les fonctionnalités du navigateur
Le web mobile
Les problématiques
Développer des interfaces tactiles
Tester et déboguer
SOAT Training
Formation Responsive Web Design (RWD)
3/3