Formation : Responsive design pour marketeur

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

Réf. ZA32
  • Partager via facebook
  • Partager via Twitter
  • Partager via LinkedIn
  • Chargement

    Merci de patienter ...

Formation présentielle
2 jours - 14 h 1 595  € HT
  • Petit-déjeuner d’accueil et repas du midi offerts
  • Abonnement inclus

Objectifs


Modalités pédagogiques


Pré-requis


Suivi et évaluation


Pour quel public ?


Les plus


Programme détaillé

 

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