Realtor You!

Remember that Pizza Express email that we featured in our ‘Image blocking in email clients‘ post? The one that displays an impressive pixel-art fallback when images don’t load? Well, our friends at Email Fail have found another impressive example from Mac. Check it out:

Images on:

Images off:

Given the amount of work put into this fallback, Becs at Email Fail is right to ask:

“I wonder if the general public will ever appreciate this as much as us email designers?”

Perhaps this is a clever shout-out to folks like us – an easter egg to those who intentionally turn off images in the inbox, a maker’s mark amongst makers. To the Mac email designer, we tip our hats to you. Your efforts have not gone unnoticed.

For those wondering, this fallback is achieved by adding carefully cutting the image, assigning the pieces to individual table cells, then adding a bgcolor="" to each cell. Style Campaign has a free app for automatically converting images to HTML pixel-art to create a similar effect.

Thanks to Email Fail for sharing this full-of-email-win newsletter design with us!

Remember that Pizza Express email that we featured in our ‘Image blocking in email clients‘ post? The one that displays an impressive pixel-art fallback when images don’t load? Well, our friends at Email Fail have found another impressive example from Mac. Check it out:

Images on:

Images off:

Given the amount of work put into this fallback, Becs at Email Fail is right to ask:

“I wonder if the general public will ever appreciate this as much as us email designers?”

Perhaps this is a clever shout-out to folks like us – an easter egg to those who intentionally turn off images in the inbox, a maker’s mark amongst makers. To the Mac email designer, we tip our hats to you. Your efforts have not gone unnoticed.

For those wondering, this fallback is achieved by adding carefully cutting the image, assigning the pieces to individual table cells, then adding a bgcolor="" to each cell. Style Campaign has a free app for automatically converting images to HTML pixel-art to create a similar effect.

Thanks to Email Fail for sharing this full-of-email-win newsletter design with us!

When optimizing HTML email for mobile, it’s really easy to get overwhelmed by the CSS trickery and technical stuff and simply put it all in the too-hard basket. But the truth is that some of the most effective techniques are also fairly simple – such as adding a good preheader to your campaign.

A preheader (otherwise known as a ‘Johnson Box’, haw haw) is the the short summary text that follows the subject line when an email is viewed in the inbox. Many mobile, desktop and web email clients provide them to tip you off on what the email contains, before you open it. Here’s an example in Gmail:

Generally this line of text (in this case, ‘Wishing you a safe and merry holiday season!’) is borrowed from the first text found in the email campaign, that’s not within an image. On mobile clients in particular, the preheader can mean the difference between someone opening your email and archiving it – so you generally want it to be something meaningful. Like a summary of your offer, not your campaign’s webversion message or the remnants of social sharing links. Because believe it or not, they work. From our friend, Elliott Ross:

“In my experience we’ve implemented it (preheaders) on a number of campaigns and it’s raised open rates, click thrus and reduced spam complaints.”
- “The Perfect Email Preheader/Johnson Box“, Email Design Review

A lot of designers make their preheaders very visible by adding a short summary to the very top of their designs, but personally, I like to hide my preheaders and forget about them altogether. Lets go through the nitty gritty of how to do this.

Adding a preheader to an email campaign

The first thing to ask is if you have to worry about a preheader at all. For instance, if your email already cuts to the chase and the first text that appears does a good job of summarizing what’s to follow, then you may not have to add one. But for the rest of us, a little bit of text just after the <body> tag in your HTML email code usually suffices:

If you’re like many senders that add a nice visible summary, you can stop here and style it up all you like. But as I mentioned earlier, I prefer to hide mine… This being HTML email, in a seemingly overkill way:

I know, that was a horror bit of code, any way you look at it. But consider that Gmail doesn’t support display: none; and you’ll see why we’re scratching for ways to hide the text.

You may wonder why we’re putting so much effort into hiding the preheader. This will make a lot more sense the next section.

Automatically adding a meaningful preheader with our email editor

The major downsides to using the above preheader technique are:

1. It’s easy to forget to update the preheader text
2. When using templates, customizing the preheader for each campaign is a lot of hassle

Cool customer Mark Shingleton came up with an ingenious way to ensure the preheader in his campaigns looks good each time – adding a table of contents to the top using our template tag language:

Not everyone can make the design decision to place a table of contents at the top of their campaigns, however if you or your clients are using the email editor to build campaigns, you can use the text that is automatically generated by a combination of repeatertitle="true" on headings and <tableofcontents> in our template language to fill the <span> tags we were using earlier:

What you’ll end up with is a preheader consisting of headings from the articles in your email campaign (pictured).

The beauty of this is that it’s totally set-and-forget – your clients can take a template and add articles in the email editor, while being totally oblivious to the whole preheader thing. But the downside is that you can only add one table of contents to your campaign (sorry!), so you either feature one in your design, or use it for the preheader.

Now, I’d love to know how you use preheaders – are they important to you? Do you have a particular technique that you use in your email campaigns and templates? Let us know in the comments below.

When throwing the spotlight on an awesome customer like Eugene Tan, it’s hard to imagine that we’re somehow brightening his already luminous position in Australia’s photography and surf communities.

As a chronicler of all things Bondi Beach and beyond for Aquabumps, he’s developed a following both locally and abroad – boosted by the Aquabumps gallery, site and in no small part, a near-daily email newsletter.

We shared a few moments with our favorite surf dude (sorry, Dave and Ben) to find out how he’s used email to get his wickedly good photos into the wild, plus pass on some of the marketing lessons he’s received along the way.

Hi Uge, many of our long-haul customers are creatives like yourself – what is it about email marketing that you and presumably others find so valuable?

“Everyone is on email. It just makes sense to use it as a delivery platform.”

Using email is a great way to push out your photography. I like the fact that I push my photos, rather than put them up on website and pray for people to visit – I have the control. People love looking at images… Beach images even more so. Email is simply a great platform to pack a little 30 second beach escape into busy working inboxes, especially now that most email clients can display HTML emails.

Oh, via email you just have access to so many people – everyone is on email. It just makes sense to use it as a delivery platform.

Aquabumps’ email newsletters are delivered pretty much every weekday, but your subscribers never seem to lose their interest in them. How do you keep your readers wanting more?

“Our open rates are very high as we are 95% content and go easy on the sell.”

We send 5 newsletters per week – Monday to Friday. Our open rates are very high as we are 95% content and go easy on the sell. You need to build trust with your audience by just showing stuff they want to see or read about. Pick a niche too, preferably something you are very passionate about. Mine is the beach.
 

We noticed that two of your recent campaigns linked back to surf videos via an image of a video player – how did this affect response?

“Click-through rates were huge on the campaigns where I linked back to my videos”

Video is new to me, even after many years of talking about it. So many photographers are switching over to the ‘dark side’ since the inception of the DSLR HD video capabilities. Personally, I’ve found video to be a compelling way to engage my audience – I broadcast escapism and as you can imagine, video is a great way of taking my viewers to another place… Outside the office cubicle, anyway.

Click-through rates were huge on the campaigns where I linked back to my videos – the best they’ve been in a long time. Shame we can’t play video in the inbox, though (Note: In some instances you can play video in the inbox – view our latest results).
 

Finally, what is your advice to other folks who are considering, or have just started using email marketing to promote their work?

Use Campaign Monitor! Far out their tools are good, intuitive and basically just work – so you can spend more time creating content… They didn’t ask me to say that!

Many thanks to Uge for taking the time to answer our questions. To see his surf photography and sign up for the newsletter, visit the Aquabumps site.

A few weeks ago, one of our customers wrote in to ask what the maximum file size is for an HTML email. Keeping in mind how expensive data can be on mobile devices, the obvious response would be, “as small as possible”. But for a moment, we took pause to wonder – is there really a set limit, after which email clients simply spit the dummy?

Thanks to Michelle Klann at Email on Acid, we’ve got an answer – 102kb. In a recent blog post on email size, she explains:

‘If your email exceeds 102K, Gmail will display the first 102K and then it will clip off the remainder with a few different variations depending on the device.’

Listed are the consequences for exceeding this limit in Gmail, the worst case being:

“(after reaching 102k) the mobile version of Gmail for the iPad does not appear to offer any links for viewing the entire message, instead the email is simply cut off.”

Thankfully, images do not count towards this total – just the initially-downloaded HTML content. Of course, an email would have to be pretty long (or code heavy) to clock in at 102kb – which is a usability challenge in itself.

The bottom line is that if your HTML file size is nearing 102kb, your email is too long. Think about how to better refine the email message and/or placing your content on a landing page for easy reading in the browser instead.

Our passion at Campaign Monitor has always been about making a designer’s job easier. This happens in a variety of ways, from our research and advocacy right through to the features we add to our software. While these efforts have come in handy for a lot of you, the truth is, building a great looking and rock-solid email is still incredibly hard. Limited CSS support combined with such a broad range of email clients means that designing an email campaign for a client can actually be an order of magnitude harder than building them a simple web site.

We think that sucks. So we did something about it.

Today, we’re excited to unveil a new and super-fast way to roll out simple, beautiful and most importantly, reliable email templates for you and your clients. Here’s a brief walkthrough to show you some of the key features.

Choose a layout

Whenever you add a new template to your account, you’ll now have the option to import your own custom template (like we’ve always supported), or use our new template builder. If you go for the template builder option, we’ll present you with four simple template layouts to choose from.

Pick a color scheme

After choosing a layout, you’ll be able to customize your design and see a live preview as you do it. To give you a head start, we’ve provided a range of simple color schemes so you can match the template with your (or your client’s) brand.

Customize with your own colours and images

You can easily tweak the color of any element in your email, customize the footer, add social sharing links and even upload your own header image to suit.

Save and it’s ready to use

When you’e done building, save the template and it will be available for you and your client’s to use in our new editor. You can also jump back in and make further design tweaks whenever you like.

In a few quick minutes you’ll end up with a great looking email design that will display reliably in every email client out there.

Not available for your clients

It’s important to mention that the new template builder will only be available to admin account holders, and won’t be available to any of your clients. We built this tool for designers who want a quick way to build a basic template for their clients. It’s a nice compliment to the total flexibility of building your own templates, but will never be a replacement for it.

We also see this feature as a perfect way for getting clients who don’t have big template design budgets up and running quickly. In a few minutes you can grant them client access, build them some simple templates and they’ll be ready to start sending.

Export for further tweaking

We also consider the template builder an awesome starting point for more complex email designs. We’ve worked hard and poured everything we know about email coding into these templates to make them as bulletproof as possible.

Because of this, you can create a basic design in minutes, then export the design as a fully-coded template with all our know-how built right in. Open it in your favourite editor and customize away before importing as a new and improved template.

Mobile optimized

No matter how you customize these designs, the saved template will be heavily optimized for mobile email clients without any extra work. Columns are resized, text-sizes are tweaked and image dimensions changed so the email looks great on every device. We’ve got plans to make it easier for you to see how the template will look on a mobile device in an upcoming update, but feel free to test it out and see for yourself.

Our motivation

With the template builder out the door, there’s an important point we wanted to make loud and clear. We keep track of every single feature request we get at Campaign Monitor and we literally have thousands of these ideas that heavily influence the direction we take. The ability for a designer to quickly build a reliable template has been at the top of this list for a long, long time now.

We’re lucky to have tens of thousands of incredible designers as customers, and we know that a lot of you are comfortable diving into nested tables and inline CSS. At the same time, there are also many thousands of you that know the web well, but have been lucky enough to never see a table tag in your life. That’s who we built this for, and we hope you love it.

Our recent blog post on image blocking in email received an awesome response. I generally gauge this by the quality of questions, rebuttals and comments that wash in, many of which are genuinely good food for thought. Like:

This statement “only 48% of email recipients see images automatically.” does not actually result in “(the email being not read) by over half of its intended recipients.” because presumably… some have changed the default settings. I would like to see some stats on how many users have changed their default settings to show images.

As it turns out, most folks don’t tinker with their apps. According to this experiment by Jarrod Spool, less than 5% of users change their default settings, even when prompted. Jarrod’s study required that users turn on autosaving of documents in Microsoft Word – a simple, beneficial change – and was just as surprised at the low uptake then as we are now. He explains:

When we interviewed a sample of (our users), they all told us the same thing: They assumed Microsoft had it turned off for a reason, therefore who were they to set it otherwise. “Microsoft must know what they are doing,” several participants told us.

Now think about Outlook 2007. The first time I attempted to turn off image blocking in this email client, I had to Google around to find out where this setting could be (it’s in their Trust Center). Do you think most Outlook users (excluding coders, designers or tech folk) would have the time, inclination or know-how to fool around and do the same?

Would most Yahoo! Mail users be bothered to change their similarly tucked-away spam settings, so images are displayed for trusted senders?

What this tells me is that email designers have to anticipate the worst. Images will be blocked in email clients. Just because .wmv videos do play in the inbox when Outlook’s security settings are turned right down, doesn’t mean that they will play. To take it a step further, if some of your subscribers are using CSS-unfriendly email clients like Gmail, you have to design like they all are. This doesn’t mean that you can’t use cool CSS effects and nice formatting – you just have to make sure the message is still very much readable, even under less-than-desirable conditions.

So test your emails with default settings on, even if it results in the worst-case rendering scenario. Chances are, that’s what many of your subscribers are stuck with.

Our recent blog post on image blocking in email received an awesome response. I generally gauge this by the quality of questions, rebuttals and comments that wash in, many of which are genuinely good food for thought. Like:

This statement “only 48% of email recipients see images automatically.” does not actually result in “(the email being not read) by over half of its intended recipients.” because presumably… some have changed the default settings. I would like to see some stats on how many users have changed their default settings to show images.

As it turns out, most folks don’t tinker with their apps. According to this experiment by Jarrod Spool, less than 5% of users change their default settings, even when prompted. Jarrod’s study required that users turn on autosaving of documents in Microsoft Word – a simple, beneficial change – and was just as surprised at the low uptake then as we are now. He explains:

When we interviewed a sample of (our users), they all told us the same thing: They assumed Microsoft had it turned off for a reason, therefore who were they to set it otherwise. “Microsoft must know what they are doing,” several participants told us.

Now think about Outlook 2007. The first time I attempted to turn off image blocking in this email client, I had to Google around to find out where this setting could be (it’s in their Trust Center). Do you think most Outlook users (excluding coders, designers or tech folk) would have the time, inclination or know-how to fool around and do the same?

Would most Yahoo! Mail users be bothered to change their similarly tucked-away spam settings, so images are displayed for trusted senders?

What this tells me is that email designers have to anticipate the worst. Images will be blocked in email clients. Just because .wmv videos do play in the inbox when Outlook’s security settings are turned right down, doesn’t mean that they will play. To take it a step further, if some of your subscribers are using CSS-unfriendly email clients like Gmail, you have to design like they all are. This doesn’t mean that you can’t use cool CSS effects and nice formatting – you just have to make sure the message is still very much readable, even under less-than-desirable conditions.

So test your emails with default settings on, even if it results in the worst-case rendering scenario. Chances are, that’s what many of your subscribers are stuck with.

Since our last update to our ‘Image Blocking in Email Clients‘ guide in 2007, its come to our attention that a lot has changed. In fact, email clients are more aggressively blocking images by default than before, with a 2009 report stating that only 48% of email recipients see images automatically. This means that if an email campaign relies heavily on images, it’s probably not being read by over half of its intended recipients.

What this means for email designers is that we have to be prepared for images to be blocked automatically in our campaigns. In this post, we’ll look at current conditions for image blocking in email clients, as well as suggest new strategies for getting your message across, even if it’s image-free.

Default settings in popular email clients

As well as refreshing our original results, we’ve also covered current conditions across the most popular mobile email clients. For more information on how ALT tags display in these email clients, check out our most recent results.

Desktop clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
Outlook 2007
Outlook 2003
Outlook for Mac 2011
Outlook Express
Windows Live Hotmail
Apple Mail
Thunderbird
AOL Desktop
Lotus Notes
Webmail clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
Hotmail
Yahoo! Mail Beta
Gmail
AOL Webmail
Mobile clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
iPhone/iPad
Android default
Android Gmail
Windows Mobile 7
Blackberry OS6

As you can see from the above results, blocking images by default in email clients is the norm, not the exception as was previously thought. Webmail clients in particular have cracked down on the automatic display of images, most probably to prevent tracking images from being downloaded in spam email.

Surviving image blocking in 2011

In our earlier blog post, we provided some timeless advice for ensuring your message is displayed, even with images off. These pointers are more relevant than ever, as we ultimately have to anticipate our images being blocked in the inbox.

In addition to becoming a known sender, ensuring that your images come with ALT text and using text as much as possible throughout your designs, there are some creative solutions to consider when designing for image blocking. Here are two of our favorites.

Style up your ALT text

Now you’ve got your ALT text in place, how about making it a little fancy? Funnily enough, you can style up your ALT text using CSS, just as you would any other text in your HTML email. Here’s an example of an email in Yahoo! Mail Beta with a plain-jane ALT tag:

How about if we want to make it look more like the heading? More like:

Here’s the code we used to achieve this:

A tip is to explicitly set the width and height of images with ALT text to prevent them from collapsing. This technique works in Yahoo! Mail, iPhone, Gmail, Apple Mail and Thunderbird. In Outlook Express, you can only change the color.

Another example and more details can be found here.

Substitute images with HTML/CSS

Perhaps one of the most creative approaches we’ve seen when it comes to tackling image blocking can be found in this amazing email for Pizza Express. Thanks to a table layout and some meticulous image cutting, this design substitutes images for blocks of color, turning the email into a work of 8-bit wonder when images are turned off (click to enlarge):

Thanks to Andrew King for this excellent example. To view some more email newsletters that have used a similar technique to do away with images, I highly recommend you scoot over to Anna Yeaman’s blog post on how to bypass image blocking by converting images to HTML. She’s famously used her pixel-art and coding skills to send totally imageless HTML email campaigns, although you wouldn’t know it at first glance (click to view):

On a closing note, image blocking is something that we all have to take seriously as email designers. Sending all-image HTML email campaigns may have worked in the past, but at a time when so many email clients do not display images by default, it’s likely that they will either not display in most preview panes, or simply get junked/deleted.

The good news is that there are both practical and highly creative approaches you can take to this issue, most of which are easy to implement. If you have a favorite technique for ensuring your message gets displayed in any inbox, we’d love to hear about it in the comments below.

Since our last update to our ‘Image Blocking in Email Clients‘ guide in 2007, its come to our attention that a lot has changed. In fact, email clients are more aggressively blocking images by default than before, with a 2009 report stating that only 48% of email recipients see images automatically. This means that if an email campaign relies heavily on images, it’s probably not being read by over half of its intended recipients.

What this means for email designers is that we have to be prepared for images to be blocked automatically in our campaigns. In this post, we’ll look at current conditions for image blocking in email clients, as well as suggest new strategies for getting your message across, even if it’s image-free.

Default settings in popular email clients

As well as refreshing our original results, we’ve also covered current conditions across the most popular mobile email clients. For more information on how ALT tags display in these email clients, check out our most recent results.

Desktop clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
Outlook 2007
Outlook 2003
Outlook for Mac 2011
Outlook Express
Windows Live Hotmail
Apple Mail
Thunderbird
AOL Desktop
Lotus Notes
Webmail clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
Hotmail
Yahoo! Mail Beta
Gmail
AOL Webmail
Mobile clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
iPhone/iPad
Android default
Android Gmail
Windows Mobile 7
Blackberry OS6

As you can see from the above results, blocking images by default in email clients is the norm, not the exception as was previously thought. Webmail clients in particular have cracked down on the automatic display of images, most probably to prevent tracking images from being downloaded in spam email.

Surviving image blocking in 2011

In our earlier blog post, we provided some timeless advice for ensuring your message is displayed, even with images off. These pointers are more relevant than ever, as we ultimately have to anticipate our images being blocked in the inbox.

In addition to becoming a known sender, ensuring that your images come with ALT text and using text as much as possible throughout your designs, there are some creative solutions to consider when designing for image blocking. Here are two of our favorites.

Style up your ALT text

Now you’ve got your ALT text in place, how about making it a little fancy? Funnily enough, you can style up your ALT text using CSS, just as you would any other text in your HTML email. Here’s an example of an email in Yahoo! Mail Beta with a plain-jane ALT tag:

How about if we want to make it look more like the heading? More like:

Here’s the code we used to achieve this:

A tip is to explicitly set the width and height of images with ALT text to prevent them from collapsing. This technique works in Yahoo! Mail, iPhone, Gmail, Apple Mail and Thunderbird. In Outlook Express, you can only change the color.

Another example and more details can be found here.

Substitute images with HTML/CSS

Perhaps one of the most creative approaches we’ve seen when it comes to tackling image blocking can be found in this amazing email for Pizza Express. Thanks to a table layout and some meticulous image cutting, this design substitutes images for blocks of color, turning the email into a work of 8-bit wonder when images are turned off (click to enlarge):

Thanks to Andrew King for this excellent example. To view some more email newsletters that have used a similar technique to do away with images, I highly recommend you scoot over to Anna Yeaman’s blog post on how to bypass image blocking by converting images to HTML. She’s famously used her pixel-art and coding skills to send totally imageless HTML email campaigns, although you wouldn’t know it at first glance (click to view):

On a closing note, image blocking is something that we all have to take seriously as email designers. Sending all-image HTML email campaigns may have worked in the past, but at a time when so many email clients do not display images by default, it’s likely that they will either not display in most preview panes, or simply get junked/deleted.

The good news is that there are both practical and highly creative approaches you can take to this issue, most of which are easy to implement. If you have a favorite technique for ensuring your message gets displayed in any inbox, we’d love to hear about it in the comments below.