Mail styling in TYPO3 now easier

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 <font>or bgcolor you 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 style attributes. At. every. single. location. And don’t forget to update them all at once if you ever need to change your design.

(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.