Whenever you develop a TYPO3 website for a client sooner or later the topic mail design will show up. Some of you may now think
So what? and some of you probably shudder in fear now. We got something for both of you:
The problem with mail design
There are so many things that rob you a bit of your lifespan if you got the privilege to style mails:
- You gotta cope with a buckload of so-called mail clients which are at its best a real browser engine with mail functionality (e.g. Thunderbird). At its worst you get something completely bonkers like a client using a word processing engine (looking at you, Outlook). Also there is a gazillion of web mailers which cannot wait to rip apart your carefully crafted mail design and inject their own styles. Next to none of these has the capabilities you are used to from web browsers nowadays which means that a naively styled mail will look completely broken.
- Given the fact above if you dare to have a semi-complex layout e.g. with content side by side, you must use HTML tables for layout. Yes, seriously.
- If you still feel brave and don’t want to stick to artifacts from another era like
bgcoloryou try to add your styles via CSS. If you check your mails in various clients you’ll mostly see … nothing. Central styles applied only by selectors won’t work, you will have to insert all styles inline via
styleattributes. At. every. single. location. And don’t forget to update them all at once if you ever need to change your design.
Do you feel stressed now? No? Are you sure?
(Part of) the solution
But don’t despair! At least for the last part we got you covered now thanks to the CSS inliner for the TYPO3 mailer extension.
It does exactly that: all of your style rules defined in a
<style>element are automatically embedded in the elements of your mail content. You don’t even have to lift a finger because it does this automatically on the fly for every single outgoing mail. Simply install the extension and forget about it.
The main work is done by the awesome tijsverkoyen/css-to-inline-styles package and our extension brings that to your TYPO3 website.
You can install the new extension easily from Packagist with Composer:
composer require pagemachine/typo3-mail-css-inliner
If you don’t use Composer yet (you really should) you can also find the mail_css_inliner extension in the TYPO3 Extension Repository.