Styling Emails with WYSIWYG HTML Editors
“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 was hard, then think again. There are tons of email clients and the limitations you get when writing an email are not few. CampaignMonitor has created a list with all the features that would work on different email clients, so it’s good to take time, look over that and do some testing. With Froala’s WYSIWYG HTML Editor you can add external styles to your emails with inline CSS and many more.
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 of 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 full-page 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 the CSS inliner tool because the editor does all the magic for you. By default, our editor uses classes for styling images or setting a 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 of a 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 the remote style on HTTPS websites because the editor won’t be able to convert your CSS to an inline style.
- margins – do not use margins because many email clients do not support them at all.
- fonts – very few email clients support these features, so it’s best to avoid using them.
A nice-styled email will always win in front of a plain text one, so it was 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!