Occasionally my blog post emails have a broken layout. It happened recently (April 22, 2014). You’ll notice in the screenshot below from Gmail that the email content extends past the header, the image is squashed, and there is a scroll bar because the content extends outside the window. This is not what we want.
At first I thought that it was because I had changed templates in MailChimp, but the next week’s (April 29, 2014) blog post email stayed inside the Gmail window, even on mobile; mobile screenshot below.
So what’s happening?
Well, in the first email above, the image was linked to the full size image, and it looks like I wasn’t careful selecting the post image size, so it was also full-size, over 900px wide. My posts usually use a custom post-image size of 680px width.
Because the CSS for images in my WordPress theme makes the image fit within the width of the blog post, I didn’t notice that I used the larger size.
img {
height: auto;
max-width: 100%;
width: auto; /* IE8 */
}This CSS to make images fit isn’t used in the email templates, because it just doesn’t work well in many email applications.
So what can you do?
When you create your own email campaign, you can resize all images to make sure they fit within the email. But it’s more difficult when you email your blog posts with an RSS feed or campaign because the RSS has whatever content you put in your blog posts, including large images.
The easiest fix is to use smaller blog post images, so that they fit in email, usually with widths less than 700px.
More Information and Another Solution
Chris Coyier of CSS-Tricks wrote a recent blog post about this issue. Chris says:
It’s not a problem isolated to FeedBurner. I switched to MailChimp for this service more recently. It’s not their “fault”, but huge images break their email layouts as well.
Chris also offers more information and a solution that involves creating a new RSS feed just for your email campaign.
Comments