Formation Responsive Web Design

Présentation de la formation

L’essor incroyable du web mobile et le nombre croissant de terminaux permettant de se connecter à Internet ont bouleversé les comportements des internautes. 
Il devient donc crucial pour les entreprises de réfléchir à l’optimisation de leur site web pour qu’il s’adapte aux différentes résolutions d’écran (ordinateur, mobile, tablette, télévision connectée) afin d’offrir aux visiteurs l’expérience utilisateur la plus confortable et ergonomique possible.

Mais qu’est-ce que le Responsive Web Design concrètement ? Quels en sont les avantages ? Comment concevoir un site responsive ? Autant de questions qui trouveront leurs réponses approfondies lors de notre formation Responsive Web Design.
 

Pourquoi réaliser une Formation Responsive Web Design ?

Désormais incontournable, le responsive design permet de concevoir un site unique compatible quel que soit le support emprunté, évitant ainsi le développement de plusieurs versions d'un site web ou d'applications natives. Les avantages sont nombreux : un temps de maintenance réduit, un contenu unique, une URL unique, une seule expérience utilisateur, et enfin, des coûts de développement moins élevés. Toutefois, le responsive design impose des contraintes techniques lourdes et implique de revoir en profondeur les rôles et expertises de l’équipe projet.

Ajoutez la corde de la création et de l’intégration graphique à votre arc de compétences webmarketing en vous formant à l'adaptative web design ! Des connaissances en design adaptatif, css responsive et webdesign vous permettront d’optimiser et de rendre plus percutante votre communication numérique sur tous les types d’écrans et de supports digitaux.

Cette formation  a pour objectif de vous donner les clés pour appréhender les enjeux du Responsive Web Design, en termes de techniques, de design, et de bonnes pratiques à mettre en œuvre. N'attendez plus pour monter en compétences !

Objectifs de la formation Responsive Web Design

• Appréhender les enjeux du Responsive Web Design
• Mettre en œuvre les techniques de conception de sites web responsive
• Maîtriser les contraintes ergonomiques et graphiques liées au RWD
• Optimiser les performances d’un site responsive

Pour qui ?

Cette formation s'adresse entre autre aux Webmasters, Webdesigners, Chefs de projets web, Chefs de produits, Responsables communication, Responsables Web Marketing, Infographistes ou a tout professionnel souhaitant acquérir les bonnes pratiques du Responsive Web Design.

Programme

1. Panorama du web mobile
• Les chiffres clés du marché mobile
• Lexique : périphériques, OS, navigateurs
• Les usages
• L’approche contenu / contenant
• Les standards actuels (HTML5, CSS3)
• Les différents types de terminaux
• Différence entre résolution et taille d’affichage

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

3. Les principes fondamentaux du Responsive Web Design
• La notion de points de rupture
  - Définition
  - Où 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

4. Créer une grille d’affichage flexible
• Grille fixe en pixels vs grille flexible en pourcentage
• Les unités de mesure fluides (% et em)
• La formule cible / contexte = résultat
• L’approche contenu/contenant
• Box, layout avec CSS3

5. Utiliser des médias flexibles
• Rendre les images flexibles : images de fond / adaptation HTML5
• Optimisation des médias
• Créer des vidéos adaptatives
• Avoir des menus adaptatifs
• Avoir des tableaux et des formulaires flexibles
• Comment régler le problème de reconnaissance par les anciens navigateurs (polyfill, reset, …)

6. Appliquer des Media Queries
• Différence entre viewport et screen
• Le principe des media queries
• Gérer les règles conditionnelles (orientation, device-width…)
• Javascript et les anciens navigateurs
• Application aux navigateurs mobiles
• Cibler la résolution rétina

7. Javascript pour le Responsive Web Design
• Tester les media queries
• Tester le viewport
• Tester le navigateur
• Modification dynamique des contenus
• Redirection par Javascript

8. Les frameworks Responsive Web Design
• Avantages et inconvénients d’un framework RWD
• État des lieux des frameworks existants : Bootstrap, Foundation, 960 grid…
• Zoom sur Bootstrap

9. Tester son site responsive
• Tester son site responsive sur tous les terminaux
• Les émulateurs
• Les solutions en ligne
• Exemple d’un site responsive testé en temps réel

Prérequis

Pour réussir ce module, nous vous recommandons de suivre en amont le module : JavaScript, PHP.

Modalités et délais d'accès

Financer sa formation en Développement Web / Informatique

Plusieurs dispositifs de financement sont possibles en fonction de votre statut professionnel et peuvent financer jusqu’à 100% votre formation.

Pour plus de renseignements, nous vous invitons à consulter notre guide du financement et à contacter nos conseillers pour vous accompagner pas à pas dans vos démarches.

Cycle de formation associé

Cette formation s'inscrit dans le cadre du cycle long de formation diplômante Web Designer / UX Designer. Ce Titre certifié de niveau 6 reconnu par l'État vous donne les clés pour réaliser des outils de communication numérique, et d’en élaborer le design graphique, tout en participant à la gestion et au suivi des projets. 

Il débouche sur les postes suivants : 
 

Les avantages VISIPLUS academy

Ces formations pourraient également vous intéresser