Comment préparer l'arche d'un mini-site ?

Gilles Van Eylen -

L'arche est un simple fichier .html (ou .php, .asp, …) qui doit être créé de bout en bout et nécessite donc des connaissances en HTML/CSS de la part de la personne. 

L’habillage doit être hébergé chez vous et accessible en ligne depuis une url publique.

Concrètement, votre fichier doit contenir au minimum une structure html de base et contenir impérativement la variable $$content$$ dans le <body>, là où vos campagnes s'afficheront. 

Exemple :

 

Il est également important de préciser les "meta" suivantes dans le <head> de votre habillage.

<meta property="og:title" content="Grand concours XYZ"/> 
<meta property="og:image" content="Indiquez le lien de votre image de partage, taille conseillée 1200x627"/> 
<meta property="og:description" content="Testez vos connaissances à bla bla bla et remportez de nombreux cadeaux XYZ"/>

Lors de la conception de l'arche, si le bloc html dans lequel apparaît le contenu de votre campagne possède une taille fixe ou une taille maximale, il est important que votre webmaster/webdesigner/webdeveloper vous communique cette valeur.

Dans l’étape apparence de votre canal mini-site, quand vous définirez sa largeur, il est important qu'il ne soit pas plus large que la zone qui lui est dédié dans votre habillage. Votre campagne peut être soit plus étroite soit avoir exactement de la même largeur. Dans le cas contraire, si vous avez chargé une image de fond dans votre campagne, elle sera masquée au profit de votre banner. Et si vous n’avez pas chargé de banner dans votre concours, aucun visuel ne s’affichera.

Quand on renseigne l'url d'un habillage dans un site, une petite astuce consiste à renommer en même temps le nom du site et d'ajouter la largeur du mini-site (par exemple 900px) dedans le nom du site.
Par exemple :

« Google.com Summer - minisite 900px. »

« Google.com Summer - minisite 1100px. » , …

De cette manière, les gens qui s’occuperont de créer la campagne pourront garder facilement un œil sur la largeur à ne pas dépasser.

 

Vous trouverez une pièce-jointe en bas de cette page contenant un exemple d’habillage (responsive) sur lequel vous pouvez vous baser. 
Le fichier .zip contient : 
- un dossier css 
- un dossier images 
- un fichier index.html

 

Télécharger l'exemple d'arche :

Réalisé par Zendesk