Retour aux projets

WeChooz

WeChooz

J’ai intégré des emailings responsive destinés aux entreprises et aux électeurs pendant les élections du CSE.

Cadre
Freelance
Périmètre
Intégration email
Technologies
HTML / CSS
Cible
Responsive email
  • HTML Email
  • CSS
  • Responsive
  • Outlook

01 · Contexte

Des communications intégrées au parcours électoral

WeChooz accompagne les entreprises dans l’organisation des élections du CSE et le dialogue social. Les emailings interviennent à des étapes opérationnelles importantes pour informer les électeurs et guider les organisateurs.

Mon périmètre portait exclusivement sur la conception et l’intégration frontend de ces templates email : transmission d’informations, validation d’étapes, préparation de la suite du parcours, accès aux tutoriels et documents, puis mise en relation avec le CSM.

02 · Enjeu

Un rendu fiable dans des clients mail très différents

Une page web s’exécute dans un navigateur moderne. Un emailing doit rester cohérent dans un environnement plus contraint, où la structure, les styles et les boutons ne sont pas interprétés de façon uniforme.

Les sources reposent donc sur des tableaux, des styles inline, une largeur maximale de 600 px, des media queries et des traitements dédiés à Outlook. Cette robustesse doit rester compatible avec une hiérarchie claire, des images lisibles et des appels à l’action immédiatement identifiables.

Deux audiences, une même exigence de clarté

Email WeChooz destiné aux électeurs avec identifiant et accès au site de vote.
Électeur · annonce de l’élection, identifiant, tutoriels et accès au site de vote.
Email WeChooz destiné aux organisateurs après validation d’une étape électorale.
Organisateur / RH · confirmation, ressources utiles, prochaine étape et contact CSM.

04 · Engineering email

Coder pour les contraintes des clients mail

Trois extraits courts issus des templates montrent comment le responsive, Outlook et les boutons sont traités directement dans le code livré.

Responsive

Réorganiser les colonnes

À 540 px, les colonnes occupent toute la largeur et un espacement dédié apparaît.

@media only screen and (max-device-width: 540px) {
  .colsplit540 {display: inline-block!important;width: 100%!important;}
  .hideOnMobile540 {display: block!important;width: 100%!important;height: 16px!important;}
}

Outlook / IE

Fixer le conteneur à 600 px

Un commentaire conditionnel fournit une enveloppe explicite aux moteurs Microsoft concernés.

<!--[if (gte mso 9)|(IE)]>
  <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->

VML + fallback

Préserver le bouton

Le bouton VML destiné à Outlook est suivi d’un lien HTML masqué pour ce moteur.

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:w="urn:schemas-microsoft-com:office:word"
    href="http://" style="height:32px;v-text-anchor:middle;width:130px;"
    arcsize="19%" strokecolor="#e56246" fillcolor="#f1f1f1">
    <w:anchorlock/>
    <center style="color:#e56246;font-family:sans-serif;font-size:13px;font-weight:bold;">Voir</center>
  </v:roundrect>
<![endif]--><a href="http://"
  style="background-color:#f1f1f1;border:2px solid #e56246;border-radius:6px;color:#e56246;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:32px;text-align:center;text-decoration:none;width:130px;-webkit-text-size-adjust:none;mso-hide:all;">Voir</a></div>

05 · Responsive

Une mise en page pensée aussi pour les petits écrans

Les classes colsplit540, padding440, picto440, mobileMarge et hideOnMobile540 organisent l’adaptation plutôt que de simplement réduire l’email. Les colonnes s’empilent, les pictogrammes et marges diminuent, tandis que certains espaces changent de comportement.

Ces règles viennent directement des templates livrés. Elles décrivent leur comportement responsive sans étendre le périmètre de compatibilité au-delà de ce qui est documenté.

Design system · Fondations visuelles

Une identité reconnaissable dans chaque message

La palette, la typographie système et les composants éditoriaux maintiennent l’identité WeChooz sans compromettre les contraintes des clients mail.

Couleurs

  • TurquoiseRepères et identité#079998
  • CorailTitres et appels à l’action#e36254
  • SurfaceArrière-plan et blocs d’aide#f1f1f1
  • TexteLecture principale#424242
  • BlancCartes et contraste#ffffff

Typographie

Verdana · Regular / Bold

Votre étape est validée.

Une hiérarchie directe pour comprendre la situation et identifier la prochaine action.

07 · Conclusion

Maintenir la hiérarchie dans les clients mail

Ces templates responsive ont été construits pour maintenir la hiérarchie, l’identité WeChooz, la lisibilité des contenus et la visibilité des actions dans le contexte spécifique des clients mail.

Le projet illustre un travail d’intégration frontend ciblé sur les emailings opérationnels. Il ne concerne ni la plateforme de vote, ni son backend, ni l’infrastructure WeChooz.