En poursuivant votre navigation, vous acceptez l'utilisation de cookies à des fins d'analyse, de pertinence et de publicité. Pour en savoir plus et gérer vos paramètres, cliquez ici.

×

Blog Sarbacane

Retrouvez sur le blog les bonnes pratiques de l’emailing, actualités de nos produits et du marché de l’email marketing

Blog Sarbacane

Les évolutions de l’emailing avec CSS 3

Recevez les bonnes pratiques pour optimiser vos campagnes emailing

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 :

A NOTER sur ce test :

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

C’est à dire directement dans la balise.

Exemple

<p style="text-shadow: 1px 1px 1px #ffffff;">mon texte</p>

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

 


OUTLOOK
EXPRESS


OUTLOOK
2003

OUTLOOK
2007 SP2

OUTLOOK
2010

WINDOWS
MAIL

THUNDERBIRD
v17
border-radius
box-shadow
gradient
text-shadow
opacity
Dernière mise à jour le 11/04/2013

YAHOO sur les différents navigateurs

YAHOO
FIREFOX
v19

CHROME
v26

SAFARI
v5

OPERA
v12

EXPLORER
v9
border-radius
box-shadow
gradient
text-shadow
opacity
Dernière mise à jour le 11/04/2013

GMAIL sur les différents navigateurs

GMAIL
FIREFOX
v19

CHROME
v26

SAFARI
v5

OPERA
v12

EXPLORER
v9
border-radius
box-shadow
gradient
text-shadow
opacity
Dernière mise à jour le 11/04/2013

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

HOTMAIL
FIREFOX
v19

CHROME
v26

SAFARI
v5

OPERA
v12

EXPLORER
v9
border-radius nc
box-shadow nc
gradient nc
text-shadow nc
opacity nc
Dernière mise à jour le 11/04/2013

ORANGE sur les différents navigateurs

ORANGE
FIREFOX
v19

CHROME
v26

SAFARI
v5

OPERA
v12

EXPLORER
v9
border-radius nc nc nc nc
box-shadow nc nc nc nc
gradient nc nc nc nc
text-shadow nc nc nc nc
opacity nc nc nc nc
Dernière mise à jour le 11/04/2013

CLIENTS NATIFS MOBILES

 


IOS 5.1 – Mail


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

APPLI GMAIL MOBILE

 


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 !

Related Posts Plugin for WordPress, Blogger...
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

Les commentaires sont fermé

Go Top

En poursuivant votre navigation, vous acceptez l'utilisation de cookies à des fins d'analyse, de pertinence et de publicité. Pour en savoir plus et gérer vos paramètres, cliquez ici.

×