Display problems under GMX and Web.de? We also had some

Do you do email marketing? Are your emails responsive? Perfect!
You have German customers and it's important to have a clean rendering in email clients like GMX or Web.de and you find that your design looks like a hybrid of mobile and desktop rendering? Well, we had the same problem...

Your code is reinterpreted by email clients

If you are doing email marketing, being compatible for mobile devices is no longer an accessory but a necessary condition. But some email clients have a protection layer that, before delivering an email to their users, will check the email code and, in some cases, reinterpret it.

This is why, among other things, if you look at an email on a mobile device in the Gmail app, you will probably* get a desktop rendering. The Gmail app takes the code of the email, removes the style tags that are not inline, and sends the modified code to the users (roughly).

The importance of nomenclature

In the case of GMX and Web.de, they also scan the code. A program  probably parses the lines of code in the email and passes it to users after reinterpreting it.

But it turns out that for GMX and Web.de, if you write in your media queries something like:

height: 100%; !important

Well, your email is going to have a serious rendering problem due to the re-interpretation of the code. The careful reader will have noticed that the correct nomenclature would have been:

height: 100% !important;

where the semicolon is well behind the important.

This means that a writing error that has no impact on other email clients here has caused the program that monitors the code to behave strangely, and when that program rewrites the code, it gets confused, so you get a rendering that is a hybrid of desktop and mobile rendering.

Here is a rendering preview with the BOM error via emailOnAcid

And here is an error-free preview, again via emailOnAcid

Moral of the story, the semicolon still has a long way to go 😉

* Probably because if your email is coded (correctly) with % widths, it will fit