Formation : Responsive design pour marketeur

S’adapter aux nouveaux usages de consommation des parcours client digitaux

  • 2 Jours - 14 Heures
  • Formation
  • Présentiel ou à distance
  • Réf ZA32

Objectifs

  • Comprendre les contraintes du responsive design dans un projet marketing digital
  • Mettre en place une stratégie responsive design en cohérence avec la navigation multi-écrans
  • Maitriser les enjeux du responsive design afin de cadrer son projet

Pré-requis

  • Connaître les fondamentaux du e-marketing et du digital
  • Les participants devront se munir de leur PC portable, tablette ou smartphone

Cibles

  • Responsables e-marketing, e-communication, digital, communication et marketing
  • Responsable de marque
  • Chefs de produits, chef de marché, chef de projet digital

Les plus

  • Une journée de mise en pratique pour maîtriser les enjeux techniques du responsive design dans un projet marketing
  • Une journée de mise en pratique pour acquérir les fondamentaux HTML et CSS utiles à un marketeur
  • Offert pour toute inscription à cette formation : 6 mois d'abonnement au magazine Stratégies et à sa newsletter quotidienne !

Modalités pédagogiques

  • Profitez de nombreuses analyses pratiques et mises en situation (training) pour bénéficier de retours d'expériences, conseils rapidement transposables dans votre quotidien professionnel

Suivi et évaluation des acquis

  • Evaluation à chaud : questionnaire de satisfaction aux participants et intervenants

 

Définition et enjeux du Responsive design

  • Qu'est-ce que le responsive design ?
  • Pourquoi a-t-on besoin du responsive design ? usage web et la mobilité
  • Qu'est-ce qui rend un site internet responsive ?

Analyse d'exemples de sites actuels responsive : de site média et e-commerce

Comprendre les principaux concepts du responsive design

  • Contrôle du viewport
  • Comprendre la densité écran et l'impact sur la lecture pour l'internaute/mobinaute
  • Designer son projet pour des densités d'écran différentes
  • Media queries
  • Points pivots
  • Grilles fluides
  • Rendre les images responsive , le futur pour les images responsive : 5K et 8K
  • Optimiser les performances offertes par le responsive : taux de rebond, clics, conversion

Mettre en place une stratégie responsive

  • Les stratégies en fonction des contextes
  • Mockups / Schémas
  • Planifier un responsive design : budget, planning
  • Construire sa stratégie de contenu pour un site responsive
  • Le contexte mobile
  • Designer spécifiquement pour mobile
  • Assumptions / Mythes / Réalité
  • La flexibilité du code
  • Frameworks : frameworks en grilles fluides
  • Tester son projet responsive design
  • Outils gratuits et payant pour le responsive design : Bootstrap

Etude de cas

Analyse de la stratégie Responsive de Pixmania

Mettre en place une architecture responsive

  • Maîtriser les avantages et inconvénients :
  • responsive vs site dédié
  • responsive vs application
  • responsive design & l'emailing

Révision : définition et usages du HTML et CSS

  • Qu'est-ce qu'une feuille de style ?
  • Construire une page HTML

Exemples : le formateur analysera des exemples multi-sectoriels

Planifier son responsive design

  • Planification du contenu
  • Création des mockups
  • Définir son Responsive UX
  • Structurer les régions de sa page et les contenus pour du multi-device

Construire sa mise en page responsive

  • Contrôle du viewport
  • Styles par défaut
  • Définition des points pivots
  • Définition des medias queries
  • Mise en page basique : pour desktop, tablette, mobile

Comprendre les enjeux de navigation et des utilisateurs

  • Définir la stratégie de navigation et recenser l'ensemble de ses besoins marketing pour faciliter l'étape de mise en recette
  • Structurer ses menus
  • Animation et frameworks Javascript (Jquery, scriptaculous, mootools..)
  • Gérer les changements de taille
  • Gérer les sous-menus avec le tactile
  • Parer les conflits
  • Fournir un échappement
  • Remplacement dynamique
  • Conversions

Richmedia : image, vidéo, son en responsive design

  • Images et vidéo fluides
  • CSS à la place des images
  • Polices d'icônes
  • Galerie d'images, sons

Les fonctions spécifiques mobiles

  • Formulaires
  • Fonctions téléphones 
  • Icônes

Gérer les ressources

  • Avec Modernizr
  • Respond.js
Didier NIZARD

Didier N. - Directeur Commercial

Didier Nizard évolue dans le secteur du Marketing Digital depuis plus de 10 ans. Issu d'une double formation ingénieur Telecom ParisTech et école de commerce ESSEC, il se lance dans le métier de consultant en stratégie auprès des opérateurs...

En savoir plus

Demander un devis ou déposer mon projet

Envoyer votre demande Télécharger le programme

Demander un devis pour une session individuelle

Un cours particulier, rien que pour vous !
Le formateur adapte son programme à votre besoin.

Envoyer votre demande Télécharger le programme
  • Partager via facebook
  • Partager via Twitter
  • Partager via LinkedIn
    • Chargement

      Merci de patienter ...

Cette formation est faite avec l'expertise de

Stratégies formations

Les avis