Exemple d'email : Sandro

Parce que Sandro, quand tu viens du Nord-Pas-de-Calais, ça te fait automatiquement penser à ta copine de 4ème B, aka « Sandra » pour les bien-parlant·e·s. Et aussi pour constater que non seulement les fringues, c’est pas top sur l’écologie, mais qu’en plus, c’est pas top non plus sur le code HTML. Vous noterez le ton sarcastique ironique dans l’analyse suivante.

Dans l’ordre m·a·on bon·ne ami·e :

• Ici, on ne s’embête pas avec un preheader : À l’ancienne, avec un bon vieux « voir la version en ligne », c’est ça qu’on veut bébé !
• Pas d’attribut lang avec la langue renseignée pour favoriser l’accessibilité et la lecture du contenu par un lecteur d’écran. Non, pas là non.
• Dans le même non-objectif : pas de contenu pour la balise <title>. Pour quoi faire ?
• On appelle des typos exotiques (agaramond), mais on ne les utilise pas. C’est rigolo, t’as vu, ça surcharge le nombre de ressources inutiles à télécharger ! C’est bon ça !
• Des media queries en veux-tu-en-voilà ! Pour changer des valeurs d’interligne, de marges internes, de tailles de texte… Alors que la version mobile de l’email est exactement identique à la version Bureau… Freestyle cop·ain·ine !
• Des tableaux avec lignes et cellules vides (et des attributs height, propriétés CSS height, font-size, line-height à profusion) pour créer des espacements, des marges, ou des bordures. Ouuuuhhh que j’aime cette façon de voir les choses ! C’est pas faute d’avoir rédigé un article sur les marges internes et externes dans les emails !
• Des attributs width sur des éléments HTML <a> : j’ai rarement vu ça !
• Une <img> dans un <a>, dans une <td>, dans une <tr>, dans un <table>, dans une <td>, dans une <tr>, dans un <table>… C’est la fête aux balises HTML ! C’est pour moi, c’est cadeau !
• Des mises en forme sur des images mais aucun texte alternatif renseigné : on est plus à ça près… C’est malheureux parce que l’intention était bonne !
• Des cellules censées s’empiler les unes sous les autres, mais, ô surprise ! rien ne se passe sur mobile.
• Des tableaux <table> les uns sous les autres en bien trop grand nombre : Un seul tableau avec des lignes à l’intérieur pour dissocier les contenus aurait été laaaargement suffisant !
• Des textes écrits directement dans des cellules, sans utiliser de balise sémantique comme le <p> : bah ouiiiii, allons-yyyyyy !!!!!
• Des propriétés CSS vertical-align sur des cellules <td> alors qu’il n’y a aucune cellule soeur : je suis consternation…
• Du Spongy Code avec des cellules fantômes pour Outlook, mais des largeurs fixes renseignées sur les <table> à la place de largeurs maximales max-width. Un non-sens !

Et après on vient s’étonner que le poids de l’email est trop lourd et que c’est coupé sur Gmail ! Bravo, vingt-sur-vingt, vive la France ! Bon, ok, je grossis les traits un poil : là, le poids du code (rangé) est de 48ko. Mais c’est pas une raison ! Hé, Sandrô, copine, prends le temps de parcourir notre guide sur l’éco-conception des emails, ça sera pas perdu !

Je suis sévère, je pense que cet email a été conçu depuis un Builder. Mais tiens, c’est justement l’occasion d’émettre des réserves sur les Email Builder présents sur le marché : prenez le temps d’en vérifier le code généré pour éviter ce type de (mauvaise) surprise !

Je comprends aussi que le domaine du « luxe » et de la mode, c’est plus graphique quand il y a un max de visuel et peu de texte. Mais un petit titre avec un prix sous le visuel (surtout lorsque le visuel n’a pas de texte alternatif), ça serait pas de refus ! Je précise que je peux être charmant ailleurs qu’aux sanitaires…

Enfin, j’en profite pour signaler que je ne retrouve pas (du tout) les engagements annoncés par la marque dans cet email ! D’où qu’elle est la mention sur la responsabilité à l’égard de l’environnement ? Et parlons du respect des personnes : le mannequin (que nous nommerons Sandra) est un peu pâlichonne dans ses 37 kilos pour 1m87, non ? Elle est au bord du malaise là… Hé, hô, Sandrô lô, vins minger eun américain-fricadelle sauce shamouraï à l’baraque lô : t’as qu’eul peau sur tin os ! Qu’est-qu’ché ch’timage qu’tu donnes à l’jeunesse lô !