Logo

Le superblog de l'email marketing Le blog emailing de référence par Sarbacane: retrouvez toute l'info de l'email marketing sur emailing.biz
clear

Vous avez du mal à atteindre vos objectifs marketing ?

Je vous recommande Sarbacane, la meilleure application française pour créer et automatiser vos campagnes Email & SMS marketing.

Le plus : Les experts de Sarbacane suivent vos projets et vous aident à optimiser vos performances.

Auteur

Email Devil

La team Emailing.biz

1 Auteur
Email Devil
Par
Ne vous fiez pas à son nom diabolique, ce super-héros connait un tas de super-tutos pour combattre les mauvaises habitudes.
le 12 avril 2013 | 0 commentaire

Les évolutions de l’emailing avec CSS 3

 

 

Les propriétés CSS3 sont devenues aujourd’hui incontournables et révolutionnent la conception de nos sites web. Mais qu’en est-il de l’emailing ? Ces nouvelles propriétés très puissantes permettent d’ajouter à nos créations des effets d’ombres, d’arrondis, de dégradés… et tout cela sans utiliser une seule image ! Nous vous proposons un petit tour d’horizon de leurs compatibilités sur nos messageries.

Les conditions du test :

Voici les propriétés CSS3 les plus populaires qui ont été testées :

Les évolutions de l’emailing avec CSS 3

A NOTER sur ce test :

Le code css3 a été déclaré «inline»
,

C’est à dire directement dans la balise.

Exemple

mon texte

 

Le code css3 a été déclaré « sans préfixe »
Lorsqu’une propriété n’est pas encore implémentée dans un navigateur, on autorise parfois un préfixe personnalisé afin de permettre son intégration progressive. Pour notre test, nous sommes partis du principe que la propriété était intégrée par l’exploitant et n’avons pas ajouté de préfixe.
Exemples de préfixes : -o- (pour Opera), -moz- (pour Gecko, Mozilla), -webkit- (pour Chrome, Safari, Android…), -ms- (pour Microsoft Internet Explorer) ou encore -mso- (pour Microsoft Office)


Voir le code HTML

Les résultats du test

Nous soulignerons le sans-faute de Thunderbird® Mozilla pour les logiciels de messageries, et sur mobile citons Mail® Apple et Email® Android qui délivrent également un rendu parfait ! 🙂 Chez les webmails c’est Hotmail qui s’en sort le mieux avec seulement la non prise en charge du dégradé. Parmi les mauvais élèves citons Outlook® Microsoft dans ces différentes versions avec un beau zéro pointé 🙁

 

Les logiciels de messageries

Les évolutions de l’emailing avec CSS 3
OUTLOOK
EXPRESS
Les évolutions de l’emailing avec CSS 3
OUTLOOK
2003
Les évolutions de l’emailing avec CSS 3
OUTLOOK
2007 SP2
Les évolutions de l’emailing avec CSS 3
OUTLOOK
2010
Les évolutions de l’emailing avec CSS 3
WINDOWS
MAIL
Les évolutions de l’emailing avec CSS 3
THUNDERBIRD
v17
border-radius Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
box-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
gradient Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
text-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
opacity Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
Dernière mise à jour le 11/04/2013

 

YAHOO sur les différents navigateurs

YAHOO Les évolutions de l’emailing avec CSS 3
FIREFOX
v19
Les évolutions de l’emailing avec CSS 3
CHROME
v26
Les évolutions de l’emailing avec CSS 3
SAFARI
v5
Les évolutions de l’emailing avec CSS 3
OPERA
v12
Les évolutions de l’emailing avec CSS 3
EXPLORER
v9
border-radius Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
box-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
gradient Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
text-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
opacity Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
Dernière mise à jour le 11/04/2013

 

GMAIL sur les différents navigateurs

Les évolutions de l’emailing avec CSS 3GMAIL Les évolutions de l’emailing avec CSS 3
FIREFOX
v19
Les évolutions de l’emailing avec CSS 3
CHROME
v26
Les évolutions de l’emailing avec CSS 3
SAFARI
v5
Les évolutions de l’emailing avec CSS 3
OPERA
v12
Les évolutions de l’emailing avec CSS 3
EXPLORER
v9
border-radius Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
box-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
gradient Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
text-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
opacity Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3
Dernière mise à jour le 11/04/2013

 

OUTLOOK.com (alias HOTMAIL) sur les différents navigateurs

Les évolutions de l’emailing avec CSS 3HOTMAIL Les évolutions de l’emailing avec CSS 3
FIREFOX
v19
Les évolutions de l’emailing avec CSS 3
CHROME
v26
Les évolutions de l’emailing avec CSS 3
SAFARI
v5
Les évolutions de l’emailing avec CSS 3
OPERA
v12
Les évolutions de l’emailing avec CSS 3
EXPLORER
v9
border-radius Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 nc Les évolutions de l’emailing avec CSS 3
box-shadow nc
gradient nc Les évolutions de l’emailing avec CSS 3
text-shadow Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 Les évolutions de l’emailing avec CSS 3 nc Les évolutions de l’emailing avec CSS 3
opacity nc
Dernière mise à jour le 11/04/2013

 

ORANGE sur les différents navigateurs

Les évolutions de l’emailing avec CSS 3ORANGE Les évolutions de l’emailing avec CSS 3
FIREFOX
v19
Les évolutions de l’emailing avec CSS 3
CHROME
v26
Les évolutions de l’emailing avec CSS 3
SAFARI
v5
Les évolutions de l’emailing avec CSS 3
OPERA
v12
Les évolutions de l’emailing avec CSS 3
EXPLORER
v9
border-radius nc nc nc nc
box-shadow nc nc nc nc
gradient nc nc nc nc Les évolutions de l’emailing avec CSS 3
text-shadow nc nc nc nc
opacity nc nc nc nc
Dernière mise à jour le 11/04/2013

 

CLIENTS NATIFS MOBILES

Les évolutions de l’emailing avec CSS 3
IOS 5.1 – Mail
Les évolutions de l’emailing avec CSS 3
Android 4.1 – Email
border-radius
box-shadow
gradient
text-shadow
opacity
Dernière mise à jour le 11/04/2013

 

APPLI GMAIL MOBILE

Les évolutions de l’emailing avec CSS 3
IOS 5.1 – GMail

Android 4.1 – Gmail
border-radius
box-shadow
gradient
text-shadow
opacity
Dernière mise à jour le 11/04/2013

 

Conclusion

Ne vous privez pas de ces petits effets ! Et gardez à l’esprit 2 concepts : la dégradation élégante et l’amélioration progressive.

La première idée c’est de concevoir en utilisant les dernières technologies, puis de gérer ensuite les systèmes les moins performants en assurant un « service minimum ». (Un degradé qui ne s’affiche pas sera remplacé par un aplat de couleur par exemple)

La deuxième approche c’est de commencer par la version de base, puis d’y ajouter des améliorations pour ceux qui peuvent les gérer. (Un ombré sur un texte viendra enrichir l’aspect visuel mais ne remettra pas en cause sa lisibilité s’il n’est pas supporté)

Soyez donc tolérant !

La non prise en charge d’effets réalisés à l’aide de css3 par un système défaillant ou obsolète ne doit pas être un frein.
Toutefois il faut veiller à ce que cette absence potentielle ne pénalise pas l’expérience globale de l’utilisateur. C’est dans la somme des petits détails et attentions pour vos lecteurs que vous ferez la différence !

 

 

Tags:

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués *


*