A. CSS : responsive, print

Utilisation des media queries

1. Adaptation d'un site aux tablettes et smart phone : design adaptative

1.a. Principes de base

Créer une version d’un site spécialement pour les mobiles ce n’est pas compliqué.

En fait, c’est très simple. En utilisant seulement quelques lignes de code, il est possible de repenser toute l’organisation d’un site Web, et d’offrir un superbe affichage sur les smartphones. Pour cela, on fait appel au viewport, à la balise @media, et surtout à quelques principes d’ergonomie qui vont changer la vie de votre site Web.

Le Viewport

La première chose à faire est de configurer le viewport de votre page. Pour cela, il suffit simplement de rajouter le code suivant dans la partie head de la page HTML :

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Le mot clé @media

Le mot clé CSS @media est appelé Media Queries par le W3C.

Il permet de faire des tests dans un fichier CSS, et d’exécuter du code uniquement si certains critères sont remplis. Ce qui nous intéresse ici c’est la possibilité de choisir ce qui sera affiché en fonction de la résolution de l’écran qui affiche le site. Voici le code source:

@media screen and (max-width: 480px) {

/* Code CSS ici*/ 

}

A l’intérieur des deux crochets, tout le code CSS ne sera exécuté que si :

  • Le support est un écran (grâce à @media screen)
  • La largeur maximale est de 480px (propriétés max-width)

Ce code fonctionne aussi bien sur mobile que sur un ordinateur ordinaire, vous pouvez tester dès maintenant en réduisant la taille de la fenêtre.

Exemple simple des différents conditionnements de largeur d'écran : http://codepen.io/semantiqueweb/pen/pjxadB

Comme indiqué précédemment les adaptations de site selon l'adaptative design créent des points de rupture

Selon ces principes de conditionnement CSS en fonction de la largeur d'écran disponible nous allons pouvoir appliquer différentes règles CSS permettant d'adapter le site. 
Les ajustements de positionnement : libérez de la place !

En général, un thème pour une page web se compose d’un en-tête, d’un corps comprenant une barre latérale et une partie principale, et d’un pied de page :

general-page-layout.png

Le but du responsive design consiste surtout à réarranger les différents éléments de façon à ce que le rendu sur petits écrans reste lisible (surtout concernant la largeur limitée sur ces écrans). On fera donc ce genre de choses :

  • Placement de la barre latérale ailleurs (souvent en ligne, au dessus ou au dessous de la partie centrale)
  • Réduction des marges (margin, padding) à gauche et à droite
  • Remplacement des largeurs fixes par des largeurs relatives (100%, ou 98% avec une marge de 1% pour centrer le tout sans coller sur les côtés)
  • Pour les images : ne pas utiliser de largeurs et hauteurs en pixels (pouvant dépasser de leur cadre) mais utiliser ceci :
    width: 100%; height: auto;
    Avec ça, les images occuperont la largeur complète et la hauteur sera adaptée de façon à conserver les proportions.
  • Les menus déroulants seront adaptés,
  • Les liens seront mis en exergue pour faciliter le clic au doigt
Exemple : 
  • La page web suivante a été construite n'est pas adaptée aux mobiles et tablettes : http://codepen.io/semantiqueweb/pen/OyBQww
  • Nous allons selon les principes ci dessus l'adapter aux tablettes puis aux mobiles
    • nous ajoutons dans le code HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    • nous ajoutons en bas du CSS : 
@media screen and (max-width: 1110px) {

}
    • la largeur max des éléments HTML est de 1110px, nous allons donc dans 1 premier temps contraindre les éléments en cas d'affichage dans un écran inférieur à cette taille
    • nous ajoutons dans ce conditionnement CSS :
      • une contrainte sur les éléments ayant une largeur fixe :
        • le body : largeur en % + padding 
        • différents HTML de la page : largeur maximum + marge à droite, à gauche annulée, hauteur fixe annulée, flottements annulés 
body{width:96%; padding: 0 2%} 
nav, #ft1, #hd1, #main, #hd1 hgroup, #hd1 hgroup h1, aside, article, 
footer, ul, li, #hd1 .logo-image 
{max-width:100%; margin-right:0; margin-left:0; padding-right:0; padding-left:0;float:none; height:inherit}

Cela nous donne : http://codepen.io/semantiqueweb/pen/zvmRmr : d'ores et déjà l'ensemble du site a été "verticalisé" et peut s'afficher dans un navigateur ayant une largeur en pixels inférieurs à 1110px. 

Nous pouvons continuer nos adaptations :

  • Gestion des mots longs et retours à la ligne :
textarea, table, td, th, code, pre, samp
{
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* passage à la ligne forcé */
}
code, pre, samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
  • Améliorer la facilité de clic sur les menus (transformés en bouton)
/* Transformation des liens en bouton */

nav a{background:blue; color:#fff; padding:8px; margin:8px; display:inline-block; font-size:20px; border-radius:5px} 
/*Effet sur les boutons au passage de la souris */ 
nav a:hover, nav a:focus{background:#000;color:#fff}
  • Ajout d'un message personnalisé affiché uniquement pour un affichage inférieur à 1110px :
/* Un message personnalisé apparaissant spécifiquement */
body:before {
content: "Version mobile du site";
display: block;
text-align: center;
font-style: italic;
color: #777;}

Nous obtenons alors : http://codepen.io/semantiqueweb/pen/XmxEWj
Et nous pourrions continuer ces optimisations pour : centrer le logo et le titre du site, améliorer la surface cliquable des autres liens de la page... 

Il faudrait ensuite vérifier l'affichage pour les écrans les moins larges et créer éventuellement d'autres séries d'adaptations en recourant à de nouvelles contraintes CSS exprimées via les media queries. 

1.b. Ressources et liens utiles en responsive

2. Adaptation du site à l'impression : mediaqueries "print"

Les pages web peuvent être adaptés aux impressions selon les mêmes principes que les adaptations mobiles et tablettes : via le recours au mediaqueries.
L'adaptation à l'impression fait partie de la qualité d'accueil des internautes et est très importante dans certains cas (fiches produits, plans d'accès, formalités).

Exemple d'usage : 

@media print { 
#menu, #footer, aside {display:none;} 
body { font-size:120%; color:black; }
}
L'essentiel de ces adaptations consistent à : 
  • annuler les largeurs fixes importantes 
  • supprimer les éléments gênant l'impression 
  • n'imprimer que l'essentiel en cachant le reste (display:none) : header (sauf logo), footer, sidebar,...
  • supprimer les images si elles ne sont pas essentielles 
  • supprimer les couleurs et revenir à du noir et blanc 
  • forcer l'impression des intitulés de liens 

Si on reprend le précédent exemple on ajoutera les css suivants pour adapter la page aux impressions :

@media print { 
/* On élimine les éléments non intéressants pour le print */
footer, aside, nav {display:none;} 

 

/* On agrandit la taille de police et on passe toutes les polices en noir */ body { font-size:120%; color:black!important; }

/* On supprime les flottements, les tailles fixes les marges */
nav, #ft1, #hd1, #main, #hd1 hgroup, #hd1 hgroup h1, aside, article, footer, ul, li, #hd1 .logo-image {max-width:100%; margin-right:0; margin-left:0; padding-right:0; padding-left:0;float:none; height:inherit}

/* On force l'affichage du détail des liens positionnés dans la zone de contenu */ section a:after { content: " ("attr(href)")" }

}

Cela va permettre d'otenir le document suivant : http://mmi-pub-2015.kiubi-web.com/theme/fr/includes/test-print.html

2.1. Une feuille de style de base sur le print

Sources : http://www.alsacreations.com/astuce/lire/1160-une-feuille-de-styles-de-base-pour-le-media-print.html

Comme nous l'avons vu au cours précédent pour les mobiles et tablettes il est possible d'utiliser des portions de code CSS spécifiquement adaptés à l'impression. Moyennant quelques adaptations liées aux spécificités de chaque site et chaque page web, cela permet d'optimiser la qualité d'utilisation du site en cas d'impression et apporte une satisfaction à l'utilisateur.

Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...}.

L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes (marges, couleurs, contrastes, tailles, gestion des sauts de pages et des veuves et orphelines), que vous pourrez adapter à vos convenances ou besoins personnels.

body {
  width: auto!important;
  margin: auto!important;
  font-family: serif;
  font-size: 12pt;
  background-color: #fff!important;
  color: #000!important;
}
p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
  color: #000!important;
  margin: auto!important;
}
.print {
  display: block; /* affichage des éléments de classe print */
}
p, blockquote {
  orphans: 3; /* pas de ligne seule en bas */
  widows: 3; /* pas de ligne seule en haut */
}
blockquote, ul, ol {
  page-break-inside: avoid; /* pas de coupure dans ces élements */
}
h1 {
  page-break-before: always; /* chaque titre commence sur une nouvelle page */
}
h1, h2, h3, caption {
  page-break-after: avoid; /* pas de saut après ces éléments */
}
a {
  color: #000!important;
  text-decoration: underline!important;
}
a[href]:after {
  content: " (" attr(href) ")"; /* affichage des URL des liens */
}

Pour rappel, un certain nombre de propriétés sous-citées ne sont reconnues que sur Opera ou à partir d’Internet Explorer 8 et Firefox 4, mais ne demeurent pas bloquantes pour les retardataires.

2.2. Ressources et liens

B. Les formulaires, éléments à soigner

Les formulaires sur un site web sont des éléments qui doivent être particulièrement soignés pour favoriser la prise de contact, les conversions,...

Tous les formulaires d'un site doivent être testés et doivent en cas d'erreur apporter des réponses adaptées et précises. En termes d'accessibilité également il faut apporter un soin tout particulier à ces éléments.

Plus ils sont complexes plus ces formulaires deviennent des dispositifs qui doivent être construits par un travail harmonieux entre ergonomes, designer, intégrateur front end, intégrateur back end...

Du côté du développeur front end l'intégration de formulaires passe par 3 étapes principales :

  • la mise en place du code HTML des formulaires
  • le rendu graphique via le code CSS
  • des vérifications et alertes gérées en javascript

1. Les balises HTML des éléments de formulaires

Les éléments de formulaire sont tous "encapsulés" dans une balise form. C'est sur cette balise que s'appuiera le code PHP pour récupérer les données saisies par l'internaute. Tous les formulaires nécessitent pour fonctionner du code HTML et du code dynamique (PHP Java,...).

 <form>
  <!-- Contenu du formulaire-->
</form>

A l'intérieur de cette balise form on peut trouver différents éléments de formulaire comme :

  • Des éléments facilitant la compréhension et l'usage
    • balise <fieldset> qui délimite une zone de contenu du formulaire
    • balise <legend> qui donne un titre à cette zone spécifique
    • balise <label> qui permet d'associer "un titre"/une fonction à chaque élément de formulaire (on relie le champ et son label par les attributs for et id)
<label for="nom">Nom de famille</label>
<input type="text" id="nom"/>
Ce qui donne :
  • Des éléments de formulaire ou l'internaute saisira ces informations
    • balise <input> dont la fonction varie en fonction de l'attribut type
      • <input type="text"> champ texte normal
      • <input type="submit"> bouton de validation
      • <input type="date"> champ date (valeur d'attribut HTML5 ne fonctionnant pas sur des navigateurs anciens)
      • <input type="radio"> bouton radio
      • <input type="checkbox"> case à cocher
    • balise <select> : pour constituer des listes déroulantes
    • balise <textarea> : zone de formulaire multiligne,...
    • voir plus d'éléments de formulaires
  • Les éléments de formulaire ou l'internaute saisira ces informations peuvent être enrichis par des attributs spécifiques
    • attribut value pour donner la valeur d'un champ
    • attribut placeholder pour donner la fonction du champs ou des indications sur la saisie
    • attribut required indiquant que le champ est obligatoire pour les vérifications côté navigateur sans utiliser JavaScript (attribut HTML5 ne fonctionnant pas sur des navigateurs anciens)
    • voir plus d'attributs pour les champs de formulaire

2. Exemple de code HTML d'un formulaire :

<form>
  <fieldset>
  <legend>Civilité</legend>
  <p>
  <label for="nom">Nom de famille</label>
  <input type="text" id="nom" placeholder="Votre nom" required/>
  </p>
  <p>
  <label for="prenom">Prénom</label>
  <input type="text" id="prenom" placeholder="Votre prénom" required/>
  </p>
  <p>
  <label for="datenaissance">Date de naissance</label>
  <input type="date" id="datenaissance"/>
  </p>
  </fieldset>
  <fieldset>
  <legend>Autre groupe de champ</legend>
  <p>
  <label for="champtextelarge">Un champ mulitiligne</label>
  <textarea id="champtextelarge" required></textarea>
  </p>
  <p>
  <label for="listederoulante">Une liste déroulante</label>
  <select id="listederoulante"><option>Option 1</option><option>Option 2</option><option>Option 3</option></select>
  </p>
  </fieldset>
  <p><input type="submit" value="Valider"/></p>
  </form>

Ce qui donne en ligne : http://codepen.io/semantiqueweb/pen/bVmvXp.

Une fois le code HTML d'un formulaire créé il est indispensable de la valider (W3C Validator) pour s'assurer de sa bonne construction.

3. Mise en forme CSS d'un formulaire

La mise en forme des formulaires via des CSS adaptées pourra faciliter d'usage et la compréhension par les différents utilisateurs.

Les ergonomes se sont largement penchés sur ce point, et il existe de nombreux articles et études à ce sujet :

Voici un exemple de code CSS que nous allons mettre en place pour réaliser l'habillage d'un formulaire :

/* Import d'un police*/
  @import url(https://fonts.googleapis.com/css?family=Itim);

  /* Style du form global */
  form { width:600px; margin:0 auto; font-family: 'Itim', cursive; line-height:120%}

  /* Style du fieldset */
  form fieldset { border: dashed 1px #333; padding:5px; margin-bottom:30px}

  /* Style de la legende */
  form legend{font-size:20px; padding:10px;background:#fff}

  /* Alignement des éléments de formulaire */
  form p label{ width:48%; float:left; display:block; text-align:right; padding-right:1%}
  form p input, form p select, form p textarea{ width:48%; float:left; display:block; text-align:left; padding-left:2%}

  /* Annulation des flottements label/input */
  form p{width:auto; overflow:hidden; }

  /* Style arrondi et bordure des éléments de formulaires */
  form p input, form p select, form p textarea	{
  border-radius: 5px;
  border:solid 1px #000; padding-top:5px; padding-bottom:5px}

  /* Style du bouton de validation */
  form input[type=submit]{ display:block; max-width:50%; padding:5px; text-align:center; margin:0 auto; float:none; padding:10px;font-size:22px;background:blue; color:#fff  }

  /* Style du placeholder*/
  ::-webkit-input-placeholder {font-family: 'Itim', cursive;font-family: 'Itim', cursive; color:#ccc; }
  ::-moz-placeholder { font-family: 'Itim', cursive;color:#ccc; } /* firefox 19+ */
  :-ms-input-placeholder { font-family: 'Itim', cursive;color:#ccc; } /* ie */
  input:-moz-placeholder { font-family: 'Itim', cursive;color:#ccc; }
  /* Styles indicatifs état des champs avant/après validation */
:required {
border-color: red; 
}

4. Adaptation du formulaire aux tablettes et smartphone

Tout comme les autres éléments HTML il sera nécessaire d'adapter le style des formulaires aux consultations via mobiles et tablettes :

  • en utilisant les mediaqueries et les conditions d'affichage en fonction de la taille de l'écran (création des points de rupture)
  • en appliquant des styles spécifiques en fonction des conditions d'affichage sur les écrans

Dans l'exemple de notre formulaire nous allons ajouter en bas des CSS déjà en place :

@media screen and (max-width: 600px) {
/* Style du form global : on passe en largeur relative : % */
form 
{
width:90%;
margin:0 5%;
}
/* Style pour éviter que les bordures s'additionnent à la largeur définie */
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Alignement des éléments de formulaire : on passe les labels et champs de formulaire les uns en dessous des autres */
form p label
{
width:100%; 
float:none; 
text-align:left; 
padding-right:0%; 
padding-bottom:5px
}
form p input, form p select, form p textarea
{
width:98%;
float:none;
display:block;
text-align:left;
padding:5px 1%
} 
}

3. Stratégie marketing et webmarketing

Le Webmarketing, ou digital marketing, reprend les principes fondamentaux du marketing en les adaptant aux nouvelles techniques liées à internet. Depuis l’arrivée du mobile et des tablettes, on parle de digital marketing, terme plus globalisant.

Les composantes du webmarketing :

  • La stratégie Webmarketing : elle reprend la démarche de la stratégie marketing : analyse de situation, segmentation, ciblage et positionnement, en s’adaptant aux cibles utilisant
    les outils du web.
  • Les actions Webmarketing : on distingue,
    • D’une part, les actions marketing adaptées aux usages du Web : mailing emailing ; publicités bannières, display...
    • Et, d’autre part, les techniques spécifiques au Web : référencement ; médias sociaux ; sites.
  • L’analyse des performances : le web analytic fournit les tableaux de bords spécifiques au Web : pages vues, pages lues, taux de clics, trafic, visibilité.

Selon Luc Viaud, Analyste Digital Webmarketing "Le webmarketing se diversifie ...au fur et à mesure que de nouveaux outils émergent et modifient le comportement des internautes. mais faire du web-marketing, c’est toujours utiliser les techniques de marketing traditionnels : le marketing direct quand il s’agit de vendre, le marketing relationnel quand il s’agit de fidéliser la clientèle de son site internet, le marketing viral pour faire du buzz avec une vidéo postée sur Youtube, etc."

4. La cartographie du webmarketing

Afin de mieux appréhender les métiers qui composent le webmarketing, Luc Viaud propose, dans son livre blanc du webmarketing de les classer autour de deux axes qui font la spécificité du web en tant que média :

  • le web est un média interactif : une entreprise peut simplement mettre en avant une offre commerciale sur un mode traditionnel PUSH, en adaptant sa communication aux spécificités du web par rapport aux médias classiques, ou l’utiliser pour INTERAGIR avec les internautes en utilisant les fonctions sociales du web 2.0.
  • le web est un média conjointement ONE TO MANY et ONE TO ONE.
    • One To Many : communication vers un ensemble d’internautes indentifiables par des centres d’intérêt (ex : membre d’un forum d’une activité de loisir) ou des intentions d’achat (internaute entrant le terme « solde chaussure » sur Google) mais non clairement identifiables en tant qu’individus.
    • One to One : communication directe via l’adresse de messagerie du client/prospect ou communication à une communauté regroupée sur une plateforme sociale où les internautes ont renseigné des éléments de leur véritable identité et y reproduisent une partie du graphe social de leur vie réelle.

En croisant ces deux axes : mode PUSH versus mode INTERACTIF et mode ONE TO MANY versus ONE TO ONE, nous pouvons distinguer 4 types d’activités du webmarketing :


4.1. Mode PUSH = Objectif de transformation directe

Une marque émet les messages qu’elle contrôle et tente d’obtenir auprès des destinataires une transformation directe de ces messages en action, généralement un achat. Cette marque peut mesurer les gains selon des canaux de communication qu’elle a utilisés pour les émettre et mesurer leur ROI (Return On Investment)

  • Acquisition de trafic = Mode PUSH-Relation ONE TO MANY.
    C’est l’activité essentielle de tout site : attirer sur un site au moindre coût des internautes, les intentions de ces internautes étant plus ou moins qualifiées en fonction de leur position sur le tunnel de conversion :
    • Le Display (ou bannières) et le SEO (Search Engine Optimiazation) pour développer la notoriété
    • Le SEM (Search Engine Marketing) et l’Affiliation pour emporter la considération d’achat
  • E-CRM = Mode PUSH-Relation ONE TO ONE :
    Domaine de l’e-mail marketing et du mobile marketing, l’objectif des entreprises est d’obtenir l’autorisation des internautes (optin) pour entrer directement en contact avec eux et leur proposer des offres personnalisées
    en fonction de l’historique de la relation client.

4.2. Mode interactif = Objectif de transformation indirecte :

Les marques ne contrôlent plus intégralement les messages à leur sujet mais tentent de faire porter ceux qu’elles émettent par les internautes, non dans un objectif de transformation directe, mais dans un but de notoriété, d’image et de fidélisation. Elles doivent alors essayer d’évaluer l’impact de cette communication sur leurs revenus, le ROI est alors plus difficile à estimer.

  • E-PR = Mode INTERACTIF-Relation ONE TO MANY :
    Les marques collectent les avis clients sur les forums, sur leur propre site, recherchent les influenceurs du net, tentent de les convaincre de diffuser leurs messages. Elles sont donc au départ à l’écoute de ce qui se dit sur elles et de leurs produits. Elles peuvent ensuite tenter d’interagir avec des populations souvent anonymes, regroupées en communautés liés à des centres d’intérêts. Ces communautés peuvent avoir un rôle fortement prescripteur. Puisqu’il s’agit de s’adresser à des internautes sans lien direct avec les marques mais ayant une influence au sien de leur propre communauté, cette activité est assez proche du travail de Relation Public, nous l’avons appelé e-PR (e-Public Relation)
  • Community Management = Mode INTERACTIF-Relation ONE TO ONE:
    Les marques engagent la conversation avec les internautes clairement identifiés de plateformes sociales. L’objectif est de développer au sein de ces plateformes des communautés en affinité avec sa propre marque et l’engagement des membres de ces communautés, avec 3 objectifs :
    • la visibilité du message de la marque au plus grand nombre des membres de ces plateformes par effet de viralité, participant ainsi à sa notoriété;
    • la transformation des membres de sa propre communauté en ambassadeur de la marque, ceux-là vont activement participer à relayer ses messages, la défendant même si son image est attaquée par d’autres internautes;
    • l’acquisition de nouveaux clients et leur fidélisation.

Bien que chacun de ces domaines ait sa propre dynamique, il est évident que les frontières ne sont pas aussi imperméables que cette cartographie pourrait le laisser croire. Le webmarketeur est un chef d’orchestre qui va doser l’utilisation de ces outils, complémentaires les uns des autres, en fonction de la stratégie marketing globale de l’entreprise :

  • Acquisition de trafic :
    • Nécessité d’acheter de l’espace publicitaire pour diffuser les messages en mode PUSH : Paid Media. Tant qu’un client n’est pas fidélisé, la marque risque de devoir « acheter » ses différentes visites sur le site.
    • Le tracking des campagnes de publicité se fait grâce aux outils de webanalytics, qui fonctionnent principalement à l’aide des cookies déposés sur le navigateur des internautes. Les visites de ceux-ci sont donc anonymes.
  • E-CRM :
    • L’acquisition des adresses e-mail à un coût (location base e-mail, trafic vers un site permettant de remplir un formulaire, …). Une fois ces adresses obtenues, la marque entretient une relation directe avec ses clients ou prospects, c’est donc du Owned Media.
    • Le tracking des résultats sur le site des campagnes d’e-mails se fait aussi à l’aide des outils de web analytics
    • L’e-mail marketing et l’acquisition de trafic sont complémentaires, tout parcours d’achat sur un site de e-commerce inclue l’obtention de l’adresse e-mail, ce qui permet par la suite de relancer le prospect ou le client.
    • L’e-mail marketing peut aussi être utilisé pour faire de l’acquisition de trafic.
  • E-Public Relation :
    • La marque surveille ce qui se dit sur elle dans des espaces dont elle n’a pas la maîtrise. Elle ne peut donc que mesurer les conversations à son égard à l’aide d’outils de veille. Tout message positif à son égard est du Earned Media qui renforce l’efficacité de son tunnel de conversion. Au contraire, tout message négatif sur un forum ou un blog peut détourner des acheteurs potentiels.
    • La marque peut tenter de mesurer son Net Promoter Score, c’est-à-dire la différence entre les avis positifs et les avis négatifs et de le corriger s’il est négatif.
  • Community management:
    • La marque anime des communautés sur des plateformes sociales.
    • Tout membre de la communauté animée par la marque constitue du Owned Media.
    • Tout membre qui participe à la diffusion de ses messages par des interactions avec elle constitue du Earned Media.
    • La marque a généralement accès aux données des profils remplis par les membres de sa communauté, données souvent riches en termes de centre d’intérêt et d’état civil, mais pauvres en termes de connaissance du niveau de revenus.
    • La marque a aussi généralement accès au graphe social des membres de sa communauté.

Sources

5. Contenus, contenants et leviers

La stratégie Webmarketing part de la définition des objectifs marketing vis-à-vis d’une ou plusieurs cibles identifiées. Trois aspects sont à considérer :

  • Les contenus : ce que l’on dit, ce que l’on montre.
  • Les contenants : ce sur quoi on le dit ou on le montre.
  • Les leviers : avec quoi on promeut ce que l’on dit et ce que l’on montre.

Les contenus pour faire du "RAFFUT" :

  • Rich media : vidéo, podcast, slides…
  • Agrégation : pige, annuaire, liens utiles…
  • Fonctionnalités : jeux, outils, quizz…
  • Files : livres blancs, e-book, extraits…
  • Use content : communautés, témoignages, interviews, forums de discussion…
  • Textes : présentation, conseils, analyses, études de cas…

Les contenants pour publier : ce sont les lieux de parole sur lesquels poster les contenus, comme les blogs, les sites, les mini-sites dédiés, les plate-formes d’échanges (Youtube, Slideshare), les réseaux sociaux (page facebook, Twitter, Viadeo, Linkdln), les sites tiers (sites éditoriaux, communautaires) et les applications mobile ou les widgets.

Les leviers, à la vitesse "SPEED" : ce sont les leviers à actionner pour faire connaître les e-contenus, les relayer, les déployer sur la Toile et auprès des e-cibles :

  • Search : SEO et SEM, le référencement naturel et payant
  • Partenariat : échange de visibilité, co-branding, affiliation
  • E-mailing : newsletter, alertes
  • E-réputation : forums, blogs, groupes, médias sociaux
  • Display : bannières, habillage de site, publicité sur le web.

Source : La boîte à outils du Responsable Marketing. N. Van Laethem ; Y. Lebon ; B. Durand-Mégret.
 

6. Evolutions du marketing (Scholz & Friends)...