Beta 15 is available with another round of small tweaks. The most notable feature is that overly-large images in certain versions of Gmail and Thunderbird have been fixed.
Some words of wisdom on responsive and retina images in Thunderbird
Thunderbird is a popular open-source desktop email client made by Mozilla. We have heard from some users during our beta period that our templates do not render well when using it.
The problem
Thunderbird doesn’t like to pay attention to the width attribute of the img tag. It actually ignores it. Regardless of what image width you declare either via the width attribute or with any css declarations, Thunderbird will render the image at the width of the actual image dimensions. Of all of the email clients we have wrestled with over the last few months, we’ve had the most difficulty with Thunderbird.
We faced blown out containers in Thunderbird during two different scenarios:
- Most all of our users want to serve a retina-ready header image or logo at the top of their template.
They know most of their readers will be getting their content on high resolution mobile display and want their brand to look its best. The common way to serve retina images in email is to serve up an image which is double the size it needs to be (1200px) and use the img tag to condense the image down to half its size (600px). Then it looks pretty sharp. But not if the image actually displays as 1200px and either falls off the side of the screen or forces horizontal scrolling…. - We have to accommodate whatever images get put into the body of a post.
This is the largest challenge. Part of the value we bring to sending you posts out over email is that you don’t have to change how you publish. Use whatever crazy plugins you want. Throw in galleries, videos, and some enormous images. We’ll take care of making sure it looks great in email. Well… that’s a big challenge.
We’ve noticed that many of our beta users like to include enormous images in their posts but use responsive techniques to downsize them within their html. The results look great on desktop but are hard to wrangle via email. Keeping these images within a container was tricky.
Our solution
Here is how we won the battle to make overly-large images not blow out their container in Thunderbird.
- Make sure you have some sort of container element with a declared fixed width or max-width defined as px. Percentages will not work. In our case we use a max-width of 720px.
- Apply inlined css directly to the img tag: width:auto;max-width:720px;height:auto;display:block;.
It’s the combination of the max-width on the container followed by the max-width of the img that seems to do the trick. No other scenario worked for us. Granted our situation is more complicated than a standard email newsletter template because we have to have a framework in place which will keep any crazy WordPress content in check… but still. It shouldn’t be this hard.
Hopefully the above will help any other developers who are trying to make sure html email looks great in Thunderbird while still being responsive and high resolution for everyone else.
The Beta 15 Changelog
- Fixed more gmail and Thunderbird image problems which caused the template to get blown out. As always, let us know if anything looks funny in your email client.
- Added support for Fastmail links in the footer of emails. Fastmail likes to generate a list of links which were available in the original email when composing a reply. I have no idea why. But now we strip them out.
- We added some language to the new post notification template which gives a warning about forwarding the email to others. This is pretty important. An email sent to you by Postmatic is for you only. If you forward it to someone else and they reply to the original reply-to address, they will post a comment as if they are you. We now make this even more obvious. In the future we will take more steps to make sure it never happens.
- Removed support for the Jetpack Like This button. Sorry, there was no way to pull it off via email.
- Improved Jetpack Share button support.
- A new top secret feature: to subscribe to the comments on a post you don’t need to actually write ‘subscribe’. Just reply with a blank email. This will be popular for quickly subscribing to the comment stream of a new post.
- Fixed a bug in which the inviter would mistakingly send duplicate invitations in rare situations.
- We now cache subscribers less agressively. This will avoid the problem of a user unsubscribing but still receiving a new post that is published right around the same time…