Formation Responsive Web Design Réf : RESPWD

Par Nicolas Hoizey

Enjeux, stratégies et bonnes pratiques de mise en œuvre du Responsive Web Design.

Durée :
2 jours
Lieux :
Paris

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

Description

Le « Responsive Web Design » (RWD) consiste à adapter le design d’un site web afin qu’il puisse être consulté indépendamment de la plateforme de l’utilisateur : ordinateur, tablette, mobile, etc. Cette approche peut être structurante pour un projet web, car elle demande une réflexion en amont pour trouver les meilleurs axes d’adaptation.
Cette formation très complète sur le Responsive Web Design vous permettra de comprendre les enjeux associés à cette méthode de travail en termes de techniques et de design, les bonnes pratiques de mise en œuvre, et détaillera quelques stratégies concrètes pour le RWD. Quelques exercices pratiques de mise en œuvre permettront d’ancrer ces concepts dans des cas concrets.

Objectifs pédagogiques

À l’issue de cette formation, les participants seront en mesure de :
  • Appréhender les tenants et aboutissants du Responsive Web Design,
  • Intégrer dans leur gestion de projet les implications du Responsive Web Design,
  • Mettre en œuvre les techniques de conception de sites web adaptatifs.


Public

Développeurs front-end
UX Designers
Web Designers
Chefs de projet Web

Pré-requis

Bonne connaissance de l’intégration front end HTML et CSS.

Type

Stage pratique

Méthode pédagogique

Alternance de présentation magistrale (30%) et de travaux pratiques sur machine individuelle (70%).

Plan de cours

État des lieux du Web mobile
Usage de devices différents selon le contexte, le moment de la journée
Activité séquentielle d’un device à l’autre
Statistiques par navigateurs et plateformes
Rapprochement mobile – desktop : un seul développement

Définition du Responsive Web Design
La définition d’origine
Les grands principes
L’impact sur la gestion de projet
Les outils de conception
Les outils de test
Ressources essentielles

Analyse de quelques sites
Parcours de quelques sites de nature différente pour visualiser les possibilités et pratiques du Responsive Web Design

La mise en page
Les grilles macro typographiques
Rythme vertical et rythme horizontal
Mise en page fixe vs. liquide vs. élastique
Unités CSS à utiliser
Techniques actuelles et futures de définition de grilles : float, flexbox, grid layout, etc.
Principaux frameworks de grilles responsives : Bootstrap, Foundation, etc.

Les points de rupture
Les Media Queries CSS3
Choisir les bons points de rupture
Unités CSS à utiliser
Exploiter les points de rupture en JavaScript
La stratégie Mobile First, la notion d’amélioration progressive

Le viewport
La notion de viewport
La meta viewport
Valeurs pertinentes de viewport
La cas particulier de iOS

Gérer les anciens navigateurs
Identifier les navigateurs ne comprenant pas les Media Queries
Leur « apprendre » à les comprendre avec Respond.js
Leur fournir une version adaptée sans JavaScript

Éléments méthodologiques pour les projets responsives
L’impact sur le cycle projet : conception, design, intégration, tests
Pratiques courantes et pratique « idéale »
L’approche Atomic Design

Adapter les contenus
Les textes. Faut-il réécrire des contenus ?
Les images : adaptations aux largeurs fluides et densités d’écran variables
Les vidéos
Les menus de navigation
Les tableaux de données
Les formulaires
Les publicités

La performance
L’approche côté serveur : RESS
L’approche côté client : le chargement conditionnel

Le référencement naturel (SEO)
Impact sur les contenus
Impact sur les images


Prochaines sessions

picto Du lundi 13/02 au mardi 14/02 2017 Paris 1 000 € fleche S’inscrire à la session du lundi 13/02 au mardi 14/02
picto Du mercredi 17/05 au jeudi 18/05 2017 Paris 1 000 € fleche S’inscrire à la session du lundi 17/05 au mardi 18/05
picto Du mercredi 18/10 au jeudi 19/10 2017 Paris 1 000 € fleche S’inscrire à la session du lundi 18/10 au mardi 19/10
Proposer une session.

Témoignages

Formation très complète. Formateur très sympathique et disponible. Logique et théorie très claires.
Jean-François M.

Formation très enrichissante par l'éventail des points abordés et la qualité des exemples cités
Sébastien Perez

Bonne expertise de l'intervenant et de nombreuses références (livres, sites, blog)
Carole Merten

Cette formation m'a permis d'avoir une meilleure compréhension du responsive web design, que ce soit au niveau conception ou réalisation. Un peu plus de pratique aurait été bien venue pour assimiler tous les concepts. Passer ce stage sur 3 jours ?
Jeff M.

Un bon état de l'art du Responsive Web Design. De nombreux exemples illustrent la formation. Une 3eme journée serait la bienvenue pour faire un peu plus de TP
Sébastien D.

Lionel Cabon, Directeur Clever Institut

Cette formation passe sur 3 jours à partir du 1er janvier 2014 afin de tenir compte des retours de stagiaires et laisser plus de temps aux travaux pratiques
Lionel Cabon, Directeur Clever Institut

Formation qui a su conjuguer expertise technique et ambiance de travail bienveillante. Merci encore pour votre accueil
Samia Ait-hamouda

Cette formation Responsive Web Design était géniale. Beaucoup d'outils découverts pendant cette formation. Manquait le jus d'orange le matin ;-)
Jennifer GOZO

Très satisfait. Locaux très agréable et personnel serviable. Merci pour les croissants et le café tous les matins ! Sinon je me suis pris plusieurs gifles qui font du bien : des idées reçus balayées et des techniques ingénieuses. J'ai plus appris en 3jrs qu'en 2 ans de tests personnels :-) Merci
Thomas Noury

Cette formation a répondu à mes attentes. Je cherchais de bonnes méthodes et pratiques à proposer à mes clients. Objectifs atteints !
Magali RALU

Formation très technique pour un designer n'ayant aucune pratique du JavaScript. Cependant, cela donne un très bon aperçu du Responsive Web Design, de ses problématiques et des besoins d'aujourd'hui
Célie AUDART

Très bonne formation de 3 jours, intense mais complète.
Simon MARAIS

Excellente formation avec un formateur complet qui donne envie d'aller plus loin grâce aux multiples ressources transmises.
Thierry SERVEAU

Très bonne formation complète et bien documentée. On en sort enrichi.
Charlotte COULON

Démarche didactique, formation parfaite pour comprendre ce qu'est le Responsive Web Design état de l'art et ses enjeux.
Christophe Laigle

J'ai apprécié les aspects techniques, l'introduction à Bootstrap ainsi que la communication et l'accessibilité des intervenants. Bonne formation, merci!
Rémi Granzotto

Le formateur est dynamique, fait preuve d'une bonne réactivité aux questions posées et fournit des explications claires avec des exemples concrets. Les échanges sont constructifs et apportent de fortes compétences.
Alexandre G.

Les formateurs sont également créateurs de sites web, ce qui confère un aspect très pratique à la formation.
Nicolas Muret

Cette formation va nous permettre de démarrer tout de suite nos développements, elle est axée professionnels expérimentés.
Matthieu G.

Un très bon aperçu du sujet avec beaucoup de pistes à explorer. Très satisfait.
Anthony Pichelin

Le contenu de la formation permet de comprendre le contenu du Responsive Web Design, c'est une très bonne façon de débuter.
Baptiste Testart

L'ensemble du contenu était très intéressant et bien appliqué, avec un bon rythme!
Nicolas B.

Cher(e) visiteur(euse),
Nous vous remercions pour l'intérêt porté à nos formations. La pré-inscription à une session de formation se fait via le formulaire d'inscription de la page formation.

La Convention de Formation Professionnelle Continue simplifiée vous sera envoyée par mail dans les 72H max. Votre inscription est considérée comme définitive, une fois cette convention signée par votre entreprise ou OPCA. La facture sera émise à l'issue de la formation, comme mentionnée dans nos conditions générales de vente.

A noter que les demandeurs d'emploi peuvent bénéficier d'une remise de 20% sur le prix public.

Pour toute information complémentaire ou demande de devis, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Technologies front-end »  – Voir toutes les formations