Share
À la suite de certaines de nos récentes découvertes concernant l’état de la CSS dans les courriels, j’imaginais qu’il était grand temps de tout bouleverser. Donc, voici - CSS3 dans les emails. Ok, alors je suis désolé si je t'ai fait déposer ton toast, là. Je sais que vous pensez: "Mais ... c'est encore largement expérimental ... Dans le navigateur, pour démarrer!" Oui, la prise en charge de CSS3 est encore plus instable parmi les nombreux clients de messagerie qui ne parviennent même pas à obtenir CSS2 correctement. Mais cela ne signifie pas qu'il est trop tôt pour y toucher.
Dans cet article, je passerai en revue deux propriétés que vous pouvez utiliser dans vos modèles de courrier électronique, ainsi que des exemples pratiques. Alors, effacez votre toast et passons aux choses sérieuses.
Si vous concevez des modèles de courrier électronique HTML depuis un certain temps, vous saurez qu'il est souvent presque impossible de prédire quel type de bizarreries liées à CSS s'affichera lors du test de votre conception sur les principaux clients de messagerie. Par exemple, Gmail est réputé pour supprimer les feuilles CSS qui ne sont pas en ligne (et pendant un certain temps, ne reconnaissant pas le remplissage de cellule et le rythme de cellules d'un tableau), alors que certains clients choisissent simplement de supprimer complètement les styles..
Si vous débutez dans la conception de modèles de courrier électronique HTML, il s'agit probablement de la chose la plus pressante que vous puissiez éventuellement lire. Mais ne craignez rien, il existe de nombreuses informations pour vous mettre au courant. Donnez à 24ways "Rock Solid HTML Emails" un écrin et vous verrez qu'il n'y a aucune raison de monter le zefrank. C'est gérable.
Quoi qu'il en soit, étant donné que les concepteurs ont déjà suffisamment de problèmes avec la prise en charge de CSS2 dans les clients de messagerie, CSS3 ne devrait-il pas être un peu un rêve? Eh bien, lisez la suite.
Oui et non. Dans le cas du oui, il existe quelques clients de messagerie populaires qui prennent en charge CSS3 de manière assez robuste (nous en parlerons plus tard). La bonne nouvelle est que bon nombre des propriétés CSS3 qui s'affichent dans ces clients se dégradent gracieusement ailleurs, ce qui signifie qu'il existe toujours une option de secours. Cela dit, si vous voulez vous assurer que vos modèles de messagerie s'affichent de manière presque uniforme sur les principaux clients de messagerie, CSS3 n'est pas pour vous..
Si vous passez à notre guide sur les CSS en courrier électronique, vous constaterez que quelques clients de messagerie prennent en charge partiellement ou totalement un certain nombre de propriétés CSS3. Et pour la plupart, ils ont une chose en commun - Webkit.
La présentation de votre modèle de courrier électronique dans Outlook n’a rien à voir avec son apparence sur votre Blackberry ou lorsque vous consultez votre messagerie Web dans Firefox..
Si vous avez la bénédiction de toujours travailler sur un Mac, de consulter votre messagerie électronique sur votre iPhone et de passer le temps en naviguant sur votre iPad, vous disposez alors d'une vue du Web relativement cohérente. Malheureusement, le reste d'entre nous doit faire face à différents degrés de prise en charge CSS sur plusieurs plates-formes de fournisseurs. La présentation de votre modèle de courrier électronique dans Outlook n’a rien à voir avec son apparence sur votre Blackberry ou lorsque vous consultez votre messagerie Web dans Firefox..
Vous n’êtes donc probablement pas surpris que les appareils Apple utilisent le même moteur de rendu (le logiciel qui décide de l’affichage du code HTML et CSS) dans leurs applications de messagerie et le navigateur Safari. Pour les concepteurs, il est probablement moins surprenant que ce moteur soit Webkit et que son support CSS3 soit comparativement, très bon.
Cela dit, les clients de messagerie Webkit (Apple Mail, iPhone et iPad Mail) représentent environ 20% de l'ensemble des clients de messagerie. Cependant, ce qui compte vraiment, ce sont les clients de messagerie que vos abonnés utilisent. Par exemple, un développeur de logiciels Mac peut avoir près de 100% de ses clients qui consultent leur newsletter sur des appareils Apple..
Dans cet esprit, examinons certaines des propriétés CSS3 qui s’infiltrent dans votre boîte de réception..
Bienvenue dans le dernier numéro de Widgets Inc..
Ajout de gouttes et d'ombres intérieures avec ombre de texte est un moyen non destructif de décorer votre texte. Cela peut non seulement vous éviter de créer le même effet avec une image, mais cela convient également aux clients où ombre de texte n'est pas supporté.
Voir dans un navigateur web.
L'utilisation de coins arrondis sur votre disposition autrement carrée ou sur vos boutons carrés est déjà une technique couramment utilisée sur le Web. Il peut également donner à vos modèles de courrier un aspect plus moderne et plus doux dans les clients de messagerie ci-dessus, et revenir en toute sécurité aux coins carrés quand il n'est pas pris en charge.
Avec l'annonce que rayon de la frontière sera officiellement implémenté dans IE9, on peut s’attendre à voir plus de son utilisation.
Certaines des utilisations les plus extrêmes de CSS3 dans les modèles de messagerie peuvent être trouvées dans des situations où les destinataires utilisent un ensemble très limité de clients de messagerie. Le développeur Mac mentionné ci-dessus en est un bon exemple. Panic, les fournisseurs du «logiciel Mac incroyablement bon», envoie des factures incroyables après l’achat de l’un de leurs titres, parmi lesquels: - Gasp! - boutons animés et lumineux:
Voici le code qu'ils ont utilisé pour obtenir cet effet:
-webkit-animation-name: 'lueur'; -webkit-animation-duration: .7s; -webkit-animation-iteration-count: infini; -webkit-animation-direction: alternatif; -webkit-animation-timing-function: facilité d'accès;
Bien sûr, cela ne semblerait pas aussi bien sur un client de messagerie autre qu'Apple Mail, mais c'est certainement un concept intéressant.!
Combien de CSS3 pouvez-vous repérer dans cet autre email conçu par Panic? Cliquez pour une version plus grande:
Prenez note de la façon dont le design se redimensionne élégamment dans le navigateur. Et ces bandes aériennes? Ce sont des barres obliques (/). Génie! Pour savoir ce qui est entré dans ce modèle, consultez cet article..
/ / / / / / / / /
Examinez les rapports d'utilisation du client de messagerie de CampaignMonitor et consultez le guide définitif de CSS dans l'e-mail pour avoir une idée des propriétés CSS3 disponibles sur les principaux clients de messagerie. Et bien sûr, testez, testez, testez. Avec une pincée de CSS3, un peu d’expérimentation et une bonne dose de prudence, vous pouvez faire ressortir votre modèle de courrier électronique de la foule..
Si vous en avez la capacité et souhaitez vendre vos modèles de courrier électronique, il est temps de consulter la catégorie Modèles de courrier électronique sur ThemeForest.!
Accentsconagua