"An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!", from W3C - CSS How To
Forget about that if you have to add any external style to your email because you're stuck with inline CSS. GMail, which is the 2nd most used email client according to https://emailclientmarketshare.com/ does not support styles in HEAD and it will remove any <style> or <link> tags from <head>.
If you thought testing a website design is hard, then think again. There are tens of email clients and the limitations you get when writing an email are not few. CampaingMonitor has created a list with all the features that would work on different email clients, so it's good to take a time, look over that and do some testing.
CSS Inliner Tools
Writing inline CSS style is time consuming and typing the same thing over and over again eventually will drive you crazy. CSS inliners could definitely help, but that's an additional tool that you have to use and you'll have to send your email through them. Here is a list with the most popular ones:
- http://templates.mailchimp.com/resources/inline-css/
- https://inliner.cm/
- http://foundation.zurb.com/emails/inliner.html
Writing emails with Froala WYSIWYG Editor
I'm sure with all the limitations I've already told you about, you want a simple, easy to configure editor. To write emails with our editor all you have to do is change 2 options:
- enable fullPage. The fullPage option allows you to edit an entire HTML page into an iframe together with HEAD, TITLE and BODY tags. This would allow you to paste great email templates into the editor and don't worry about style inheritance.
- disable useClasses. And forget about CSS inliner tool because the editor does all the magic for you. By default our editor is using classes for styling images or setting specific style for a paragraph and this is great because it produces clean output, however you don't want classes but inline style when writing an email.
Although the editor does the hard part for you when writing an email, you should still be careful to few things other things:
- image path - make sure all your image paths are using absolute URLs because otherwise they won't appear in emails correctly.
- remote style - do not use remote style on HTTPS websites because the editor won't be able to convert your CSS to inline style.
- margins - do not use margins because many email clients do not support them at all.
- fonts - very few email clients support this features so it's best to avoid using them.
A nice styled email will always won in front of a plain text one so it certainly worth taking the time to at least do some testing on the most popular email clients.
If you have any thoughts or suggestions please feel free to share them in the comments below or contact us directly.
No comment yet, add your voice below!