Tag Archive | "email client"

iPhone fail: The trouble with table borders and HTML email

iPhone fail: The trouble with table borders and HTML email

Borders in iPhone Mail

We recently come across a strange email client rendering issue in Mail on the iPhone and iPad – hairline borders are appearing in HTML email designs with table layouts. These borders are sometimes barely visible, but often they can be fairly pronounced, especially at certain zoom levels (see picture). What makes this bug so hair-pullingly tricky is that the borders appear and disappear as you zoom in and out of the HTML email, which can quickly take a design from passable, to impossible.

When do these borders appear?

We’ve found that the borders appear when a background color or image is applied to individual table cells. In this example, we’ve nested a table with white cells (eg. bgcolor=#FFFFFF) in a table with a red background color. As a result, the red is showing through, creating these borders.

Solving the border dispute

To prevent these borders from appearing on the iPhone, you can try:

  1. Removing background colors or images from individual table rows and cells, and/or;
  2. Nesting the problematic table in a new table, featuring a background color that matches that of the inner table.

In this example, the red borders disappeared when the white table cells were nested in a 1×1 cell table with a white background color applied… Not an entirely elegant solution, but we’re coding with tables here, right?

It seems like this issue has been floating around well before the release of iOS5, however for some reason, has become fairly visible now. Hopefully Apple takes notice and takes steps to fix this rather obvious rendering glitch, thus restoring their otherwise designer-friendly email client in our good books.

I know, I know, it’s a bit of a downer, this one. To cheer you up, here’s a video featuring levitation and quantum superconductors. Hover boards are on their way…

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

iPhone fail: The trouble with table borders and HTML email

iPhone fail: The trouble with table borders and HTML email

Borders in iPhone Mail

We recently come across a strange email client rendering issue in Mail on the iPhone and iPad – hairline borders are appearing in HTML email designs with table layouts. These borders are sometimes barely visible, but often they can be fairly pronounced, especially at certain zoom levels (see picture). What makes this bug so hair-pullingly tricky is that the borders appear and disappear as you zoom in and out of the HTML email, which can quickly take a design from passable, to impossible.

When do these borders appear?

We’ve found that the borders appear when a background color or image is applied to individual table cells. In this example, we’ve nested a table with white cells (eg. bgcolor=#FFFFFF) in a table with a red background color. As a result, the red is showing through, creating these borders.

Solving the border dispute

To prevent these borders from appearing on the iPhone, you can try:

  1. Removing background colors or images from individual table rows and cells, and/or;
  2. Nesting the problematic table in a new table, featuring a background color that matches that of the inner table.

In this example, the red borders disappeared when the white table cells were nested in a 1×1 cell table with a white background color applied… Not an entirely elegant solution, but we’re coding with tables here, right?

It seems like this issue has been floating around well before the release of iOS5, however for some reason, has become fairly visible now. Hopefully Apple takes notice and takes steps to fix this rather obvious rendering glitch, thus restoring their otherwise designer-friendly email client in our good books.

I know, I know, it’s a bit of a downer, this one. To cheer you up, here’s a video featuring levitation and quantum superconductors. Hover boards are on their way…

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

When it comes to HTML email, anticipate the worst

When it comes to HTML email, anticipate the worst

Outlook's Trust Center

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.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

When it comes to HTML email, anticipate the worst

When it comes to HTML email, anticipate the worst

Outlook's Trust Center

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.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Email, phone home: Initiating voice calls from HTML email newsletters

Email, phone home: Initiating voice calls from HTML email newsletters

Initiating a call from an email

Once upon a time, mobile devices were primarily used for calling other people. That was long ago and since then, we’ve graduated to using our iPhones and Androids primarily to play Angry Birds. Nonetheless, voice calling still has its place in the world.

There are loads of businesses that rely on phone calls to make their bread-and-butter – from Thai take-out joints, to your local salon. Perhaps even you and your clients fit into this category, too!

In this post, we’re going to look at how you can get your subscribers to place calls from an HTML email newsletter received in their desktop, web or mobile email client. You heard it – we’re not talking about maximizing click-throughs, but call-throughs. Featured is an example HTML email newsletter (pictured) which you can download, adapt and use to learn more about this technique.

Placing calls via email: the basics

If you check email on a mobile device, you may have noticed how some models parse phone numbers in messages and turn them into tappable links. These links allow you to conveniently place calls, by automatically switching from the email app to the phone interface on your device.

As of recently, Gmail has started doing the same thing, launching Google Voice in a similar manner to make it really easy to place calls via their telephony service.

Creating links for convenient calling is nothing new. Prior to either of the above hitting the scene, Skype URLs were commonplace on the web. In March this year, Skype hit a record 30 million simultaneous online users and can be installed on Windows and Mac machines, as well as on iOS and Android handsets.

It turns out that these methods can be adapted for use in HTML email. The resulting links can be customized, meaning that you can turn a phone number or Skype username into a bold call-to-action. To demonstrate, lets look at the example template (click to view):

Phone numbers in email demo

The ‘Call:’ button has been disabled in most browsers – we’ll explain why and how shortly.

Linking to telephone numbers and Skype usernames

When testing email newsletters on the iPhone and in Gmail, we found that both email clients automatically wrap phone numbers with <a> tags like so:


<a href="tel:555-666-7777">555-666-7777</a

This can be a massive annoyance for email designers, as these ‘new’ tel: links tend to be bold, bright blue and often difficult to style with CSS.

Thankfully, there is a universal fix – preemptively adding your own tel: links to the HTML code. Using this method, you can also add phone number links wherever you see fit – let it be in your call-to-action, or surrounding a ‘call us now’ line in your copy:


To order a pizza, <a href="tel:555-666-7777">call us now</a>. 

The same can be done with Skype links:


Skype us on <a href="skype:555-666-7777">555-666-7777</a>. 
Don't forget to add <a href="skype:abcpizza">abcpizza</a> to your contacts! 

The downside to this method is that in order for the links to be detected in email clients, we can’t convert them into tracking links for use in Campaign Monitor campaign reports. To turn off tracking specifically for these links, we use the cm_dontconvertlink attribute:


To order a pizza, <a href="tel:555-666-7777" cm_dontconvertlink>call us now</a>. 

To make things even more testy, not all email clients know how to deal with tel: links. Obviously, Skype has to be installed on the recipient’s machine for skype: links to work. With this in mind, here’s what support looks like across the major email clients:

Desktop email clients Tel: support Skype: support
Outlook 2007/2010 No ‘Access denied’ alert Yes
Prompt displays to open Skype
Outlook 2003 No Browser opens, blank page Yes
Apple Mail No ‘No associated appplication…’ alert Yes
Windows Live Mail No ‘No associated appplication…’ alert Yes
Thunderbird No ‘No associated appplication…’ alert Yes Prompt displays to open Skype
Webmail clients Tel: support Skype: support
Hotmail No Link disabled No Link disabled
Yahoo! Mail No Link disabled Yes
Gmail Yes Opens Google Voice No Link disabled
AOL No Link disabled No Link disabled
Mobile email clients Tel: support Skype: support
iPhone Yes Yes
Android (Gmail) Yes No Link disabled
Android (default) Yes No ‘Web page not available’ error
BlackBerry 6 OS Yes No Browser opens, blank page
Windows Mobile 7 Yes No No Skype (yet), link disabled

While tel: support is great across mobile clients, it’s spotty at best on desktop and in webmail clients. Conversely, skype: support is the bee’s knees on desktop clients, it falls over on mobile and webmail clients (unless you have the Skype web toolbar installed).

Disabling tel: links in desktop and webmail clients

Given the inherit troubles in featuring tel: links in anything but mobile email clients, the best option is to simply turn them off. We’ll do this by nesting the link text in a block-level element (eg. a table), wrapping this with the tel: link, then applying the following CSS:


a.disable-link {
    pointer
-eventsnone;
    
cursor: default;
}
...
<
a href="tel:1800ABCPIZZA" class="disable-link" cm_dontconvertlink>
   <
table>
      <
tr>
          <
tdCall: +1800-ABC-PIZZA </td>
      </
tr>
   </
table>
</
a

And voila! The tel: link above is inactive in Outlook, Apple Mail, Thunderbird and most browser/webmail combinations. Remarkably, Google Voice still picks up on tel: links, even with the workarounds above. That’s a good thing.

In mobile email clients, we’ll activate the link by using a @media query:


@media only screen and (max-device-width480px{
   a[class
="disable-link"] {
      pointer
-eventsauto !important;
      
cursorauto !important;
   
}


Nicely done, if I say so myself.

The template, yours to download and tweak

Admittedly, this isn’t a perfect solution, due to the lack of tracking and limitations with tel: support. However, if your business relies on phone enquiries, then you can build very innovative campaigns around this technique. Feel free to download the template, see how it works and refactor it for your own adventures in email and telephony:

Download the templateDownload the phone-friendly email template (zip file, 20kb)

A huge thank you to vlanzoiz for the inspiration and early testing and Panic, for letting me rip off their design again. If you have any questions or comments on initiating phone calls from email newsletters, we’d love to hear them in the comments below.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Email, phone home: Initiating voice calls from HTML email newsletters

Email, phone home: Initiating voice calls from HTML email newsletters

Initiating a call from an email

Once upon a time, mobile devices were primarily used for calling other people. That was long ago and since then, we’ve graduated to using our iPhones and Androids primarily to play Angry Birds. Nonetheless, voice calling still has its place in the world.

There are loads of businesses that rely on phone calls to make their bread-and-butter – from Thai take-out joints, to your local salon. Perhaps even you and your clients fit into this category, too!

In this post, we’re going to look at how you can get your subscribers to place calls from an HTML email newsletter received in their desktop, web or mobile email client. You heard it – we’re not talking about maximizing click-throughs, but call-throughs. Featured is an example HTML email newsletter (pictured) which you can download, adapt and use to learn more about this technique.

Placing calls via email: the basics

If you check email on a mobile device, you may have noticed how some models parse phone numbers in messages and turn them into tappable links. These links allow you to conveniently place calls, by automatically switching from the email app to the phone interface on your device.

As of recently, Gmail has started doing the same thing, launching Google Voice in a similar manner to make it really easy to place calls via their telephony service.

Creating links for convenient calling is nothing new. Prior to either of the above hitting the scene, Skype URLs were commonplace on the web. In March this year, Skype hit a record 30 million simultaneous online users and can be installed on Windows and Mac machines, as well as on iOS and Android handsets.

It turns out that these methods can be adapted for use in HTML email. The resulting links can be customized, meaning that you can turn a phone number or Skype username into a bold call-to-action. To demonstrate, lets look at the example template (click to view):

Phone numbers in email demo

The ‘Call:’ button has been disabled in most browsers – we’ll explain why and how shortly.

Linking to telephone numbers and Skype usernames

When testing email newsletters on the iPhone and in Gmail, we found that both email clients automatically wrap phone numbers with <a> tags like so:


<a href="tel:555-666-7777">555-666-7777</a

This can be a massive annoyance for email designers, as these ‘new’ tel: links tend to be bold, bright blue and often difficult to style with CSS.

Thankfully, there is a universal fix – preemptively adding your own tel: links to the HTML code. Using this method, you can also add phone number links wherever you see fit – let it be in your call-to-action, or surrounding a ‘call us now’ line in your copy:


To order a pizza, <a href="tel:555-666-7777">call us now</a>. 

The same can be done with Skype links:


Skype us on <a href="skype:555-666-7777">555-666-7777</a>. 
Don't forget to add <a href="skype:abcpizza">abcpizza</a> to your contacts! 

The downside to this method is that in order for the links to be detected in email clients, we can’t convert them into tracking links for use in Campaign Monitor campaign reports. To turn off tracking specifically for these links, we use the cm_dontconvertlink attribute:


To order a pizza, <a href="tel:555-666-7777" cm_dontconvertlink>call us now</a>. 

To make things even more testy, not all email clients know how to deal with tel: links. Obviously, Skype has to be installed on the recipient’s machine for skype: links to work. With this in mind, here’s what support looks like across the major email clients:

Desktop email clients Tel: support Skype: support
Outlook 2007/2010 No ‘Access denied’ alert Yes
Prompt displays to open Skype
Outlook 2003 No Browser opens, blank page Yes
Apple Mail No ‘No associated appplication…’ alert Yes
Windows Live Mail No ‘No associated appplication…’ alert Yes
Thunderbird No ‘No associated appplication…’ alert Yes Prompt displays to open Skype
Webmail clients Tel: support Skype: support
Hotmail No Link disabled No Link disabled
Yahoo! Mail No Link disabled Yes
Gmail Yes Opens Google Voice No Link disabled
AOL No Link disabled No Link disabled
Mobile email clients Tel: support Skype: support
iPhone Yes Yes
Android (Gmail) Yes No Link disabled
Android (default) Yes No ‘Web page not available’ error
BlackBerry 6 OS Yes No Browser opens, blank page
Windows Mobile 7 Yes No No Skype (yet), link disabled

While tel: support is great across mobile clients, it’s spotty at best on desktop and in webmail clients. Conversely, skype: support is the bee’s knees on desktop clients, it falls over on mobile and webmail clients (unless you have the Skype web toolbar installed).

Disabling tel: links in desktop and webmail clients

Given the inherit troubles in featuring tel: links in anything but mobile email clients, the best option is to simply turn them off. We’ll do this by nesting the link text in a block-level element (eg. a table), wrapping this with the tel: link, then applying the following CSS:


a.disable-link {
    pointer
-eventsnone;
    
cursor: default;
}
...
<
a href="tel:1800ABCPIZZA" class="disable-link" cm_dontconvertlink>
   <
table>
      <
tr>
          <
tdCall: +1800-ABC-PIZZA </td>
      </
tr>
   </
table>
</
a

And voila! The tel: link above is inactive in Outlook, Apple Mail, Thunderbird and most browser/webmail combinations. Remarkably, Google Voice still picks up on tel: links, even with the workarounds above. That’s a good thing.

In mobile email clients, we’ll activate the link by using a @media query:


@media only screen and (max-device-width480px{
   a[class
="disable-link"] {
      pointer
-eventsauto !important;
      
cursorauto !important;
   
}


Nicely done, if I say so myself.

The template, yours to download and tweak

Admittedly, this isn’t a perfect solution, due to the lack of tracking and limitations with tel: support. However, if your business relies on phone enquiries, then you can build very innovative campaigns around this technique. Feel free to download the template, see how it works and refactor it for your own adventures in email and telephony:

Download the templateDownload the phone-friendly email template (zip file, 20kb)

A huge thank you to vlanzoiz for the inspiration and early testing and Panic, for letting me rip off their design again. If you have any questions or comments on initiating phone calls from email newsletters, we’d love to hear them in the comments below.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Applying fluid layouts to HTML email design

Applying fluid layouts to HTML email design

Following our recent post in Smashing Magazine, we received a couple of questions in regards to designing fluid layouts for email. Hardcore CSS trivia aside, the big questions came down to: ‘Can I use a fluid layout to adapt my design to fit in any-sized email client?’, and perhaps more importantly, ‘Does the CSS used to achieve fluid layouts work at all?’

I’ll answer these shortly, but first, I wanted to look at the fundamentals of fluid-width design and its applications in HTML email. CSS nerds are going to love this.

Using fluid layouts in email

In ‘Web Design 101′, you probably learnt a little something about fixed and fluid (or relative/liquid/flexible/elastic) layouts. While fixed layouts have exact pixel widths for elements, fluid layouts adapt to different device or browser dimensions by using percentages (eg. width="70%"), allowing elements to flow horizontally across the available space. The width CSS property and moreso, the HTML attribute are widely supported across mobile, desktop and webmail clients and can be reliably used to set percentage-value widths for layouts. Here’s an example of a fluid email design (also see below) – try resizing the browser window to see how the text adjusts.

While fixed-width layouts are overwhelmingly the popular choice when designing HTML email, the rise of responsive email design for mobile devices has renewed interest in all things fluid. In theory, if the content within HTML email designs can be set to adapt to the width of any device, then we could use fluid for all layouts, right?

WooThemes go too wide

Sadly, things are never so easy. The email design above adapts nicely when stretched in the browser or reading pane, but then after a point, the wide paragraphs become hard to read. When too narrow, the email can become unnecessarily long and the layout can suffer.

On the web, we’d usually tackle this by applying fixed max-width and min-width properties to the surrounding container, usually a div or table cell. Here’s an example of what this looks like in code:


<table width="90%" style="max-width: 600px;">...</table

As we’ll discover in a moment, quirky ol’ email isn’t that straightforward.

CSS support for max-width and min-width in email clients

We tested max-width and min-width support in 24 of the most widely-used email clients. Here’s what the situation is like in the top 8:

Style element Outlook
2007/10 [1]
Outlook
2000/03
Apple
iPhone/iPad
Windows
Live Hotmail
Apple
Mail 4
Yahoo!
Mail Beta
Google Gmail Android 2.3 (Gmail) [2]
max-width No No Yes No Yes Partial or buggy support[3] Partial or buggy support[4] Yes
min-width No No Yes No Yes Partial or buggy support[3] Partial or buggy support[3] Yes
Market Share 27.62% 16.01% 12.14% 11.13% 9.54% 7.02% 1.7%

[1] For full CSS rendering capabilities, see MSN Developer docs | [2] Tested on a Google Nexus S | [3] IE7: Partial support. Good in IE9, Safari, Firefox, Chrome | [4] IE7: No support. Good in IE9, Safari, Firefox, Chrome

As you can see, support is a little shaky. In particular, webmail clients viewed in Internet Explorer 7 have variable support, while IE6 doesn’t support these properties at all.

That said, things are not as bad as they may seem. For one, the preview panes of most email clients don’t allow content to run so wide that it’s unreadable, which means that you may be able to get away with not using max-width. But nonetheless, it’s easy to see that fluid layouts in combination with max-width are often not the most reliable choice for web and desktop clients, especially if multiple columns are involved.

Fluid for mobile email clients, fixed for web and desktop

Unlike many of the web and desktop email clients above, mobile devices like the iPhone tend to have much better CSS support. The use of fluid-width layouts is also far better suited to these smaller screens, not only due to the very limited viewport size (which pretty much removes the need for max-width), but ability to adapt across the near-infinite screen resolutions available across iOS, Android, Blackberry and other mobile devices.

Fluid images on mobile clients
Adapting to screen dimensions by applying % widths to images and layout, courtesy of Style Campaign

Given the benefits of using a fluid layout on mobile devices and a robust, fixed-width layout everywhere else, why don’t we use both?

With @media queries, it’s possible. In Anna Yeaman’s post in the Style Campaign blog on moving from a fixed to fluid layout, she features a great example of an email that uses a fixed, 550px wide table layout in web and desktop email clients, then switches to width: 100% on small screens. In tandem with fluid images, you can create insanely robust responsive layouts using this technique.

max-width vs. max-device-width in @media queries

Another great example of using simple @media queries to switch between large and small screen layouts is this Starbucks Coffee newsletter by the uber-talented Ed Melly. Unlike previous examples, the @media query used here targets small displays using max-width over the more commonly-used max-device-width. Each of these properties calculates maximum width differently in the context of mobile device viewports and so we generally recommend using the latter. However, if you’re keen to have the layout adapt to most small displays (ie. narrow email client preview panes) and are happy to do a little more testing on mobile devices, then using max-width is certainly a valid option.

A huge thanks to Anna Yeaman at Style Campaign and Ed Melly for providing the know-how and examples for this post. We’d love to hear about your experiences and advice when using fluid layouts in email, so feel free to contribute in the comments below.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Pitch perfect: Tips on offering email marketing to small businesses

Pitch perfect: Tips on offering email marketing to small businesses

If you offer email marketing to small businesses (or plan to), then you may know about some of the challenges that come with the territory. For example, with limited resources comes a big desire from smaller companies to seek a measurable and often, immediate return on their marketing spend – how can you address this in your pitch?

To gain a real-world insight into how designers can offer value to their clients, we sat down with Eddie Johnson at Hat Trick Media, a UK-based agency with over 4 years of experience in rebranding Campaign Monitor and literally dozens of small business clients. Whether you’re a seasoned designer looking to make email more appealing or simply throwing around ideas for a rebrand, Eddie’s advice is sure to help you refine your pitch, close the deal and measure the success of your campaigns.

Hat Trick Media team

Hi Eddie, lets start off with how your agency pitches email marketing to small businesses. What solutions do you offer, apart from simply sending campaigns? Does email marketing usually accompany services like web development, or is more often a stand-alone offering?

The majority of our early email marketing clients first engaged Hat Trick Media to build and update their websites. Email marketing was sold mainly as a feature to drive traffic to their site or to say hello to their customers, so we’d design them a template based on their online or offline collateral and help with their subscriber lists.

“…allowing clients to measure the effectiveness of their campaigns for themselves is really compelling…”

Just before Campaign Monitor and MailBuild merged in 2008, we really cottoned on to how great the software is and started offering email marketing as a stand-alone product within our portfolio. It meant that we could offer designed email communications to clients, instead of them sending email from a standard email client like Outlook. The fact that the reporting tools allow clients to measure the effectiveness of their campaigns for themselves is really compelling and makes email marketing a fairly easy sell.

We charge for template design, testing across the most popular email clients and helping out with data integration. In addition, we used to charge a monthly fee for access to the system, but found some clients only wanted to send bi-monthly or quarterly campaigns and so had to re-think this. We now charge £5 per send, then 1p per recipient for most clients, but for larger accounts we use an ‘all you can send’ monthly pricing model, which has won us some accounts.

That said, does offering email marketing to small businesses present specific challenges? What are they, and how do you overcome them?

“…when pitching email marketing, I use a true story or case study that illustrates how great newsletters are.”

First of all, having limited resources – including money – tends to make small businesses wary of spending on marketing, especially if they can’t measure the outcomes. To address this when pitching email marketing, I normally use a true story or case study that illustrates how great newsletters are. For example, we had a client who sold telephone systems, who was aware that one of their existing customers was in the market for a new system. However, every time one of the clients’ sales guys tried to call the customer’s office, the gatekeeper – a receptionist – said he was busy or unavailable.

We sent an email campaign on behalf of this client, featuring a headline story about a wonderful new phone system. Consequently, this usually off-limits customer received it and really engaged with the offer, clicking through via the phone system story a number of times and even forwarding the newsletter to a colleague. Armed with the email campaign reports, our client sent just a single email to the customer, confirming that they’d seen that he had clicked a number of times, which to them suggested interest. As it turned out, the timing was perfect. The resulting sale of the phone system pretty much paid for the following year’s email campaigns for the client – without access to these reports, it’s unlikely they would have ever got that deal.

“The resulting sale… pretty much paid for the following year’s email campaigns for the client – without access to reports, it’s unlikely they would have ever got that deal.”

So, when the main challenge presented by a small business client is in regards to spend, we point to this story. Similarly, another of our clients knew he wanted to send email campaigns, but allocating money to other parts of their business had always taken priority. However, since the first campaign went out, he’s been saying that they should have done it earlier!

That said, the single most difficult aspect of selling email marketing is advising clients that they just can’t send to a list they’ve bought from a data company. We take permission really seriously, even if it means turning down an account. This was a lesson we learned the hard way with a charity-based client we have. When members joined this charity, they give their consent to be emailed with news and updates. Nonetheless, the first campaign we sent for them got marked as spam by many of their members. We couldn’t believe what had happened, but it made us realize that if a tightly-managed list could generate spam complaints, then there was no way we could successfully send to a purchased list!

In your recent email newsletter, you mentioned a particularly successful campaign you sent on behalf of The Grange Spa. In fact, the first booking received as a result of the email campaign generated enough business to cover the cost of the entire campaign.

With this success story in mind, is ROI enough to justify the success of a small businesses’ email campaign, or are there other indicators, too?

Return On Investment (ROI) is the key consideration, especially as our clients become more savvy and aware that they can, and should measure results. Fundamentally, everything leads to ROI, but just as important as an immediate return is brand awareness, or the little reminders to customers that they’re here. Of course, familiarity does lead to increased business – thus contributing to ROI, but on a different timescale.

Overall, clients are delighted if they can get more cash in than they’ve spent, whether that’s per campaign or over the year.

Finally, what’s your advice to other designers who want to offer email marketing to small businesses?

“Keep abreast of changes within the email clients.”

Keep abreast of changes within the email clients. Subtle changes, such as the green text bug in Hotmail really hurt us – it made some legacy templates hard to read as the text color clashed with backgrounds. The recipient won’t care that Hotmail did this, they’ll just reason that the sender thinks green text on a blue background is ok.

Also, clients need to understand what can be built and delivered. Many times we’ve created something that looks ace, then have had to strip it back because it looks so different in Outlook from our original design.

Many thanks to Eddie at Hat Trick Media for taking the time to answer our questions. For more on offering email marketing to your clients, take a look at our recent post on building brand awareness, or our lively collection of rebrander case studies.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Pitch perfect: Tips on offering email marketing to small businesses

Pitch perfect: Tips on offering email marketing to small businesses

If you offer email marketing to small businesses (or plan to), then you may know about some of the challenges that come with the territory. For example, with limited resources comes a big desire from smaller companies to seek a measurable and often, immediate return on their marketing spend – how can you address this in your pitch?

To gain a real-world insight into how designers can offer value to their clients, we sat down with Eddie Johnson at Hat Trick Media, a UK-based agency with over 4 years of experience in rebranding Campaign Monitor and literally dozens of small business clients. Whether you’re a seasoned designer looking to make email more appealing or simply throwing around ideas for a rebrand, Eddie’s advice is sure to help you refine your pitch, close the deal and measure the success of your campaigns.

Hat Trick Media team

Hi Eddie, lets start off with how your agency pitches email marketing to small businesses. What solutions do you offer, apart from simply sending campaigns? Does email marketing usually accompany services like web development, or is more often a stand-alone offering?

The majority of our early email marketing clients first engaged Hat Trick Media to build and update their websites. Email marketing was sold mainly as a feature to drive traffic to their site or to say hello to their customers, so we’d design them a template based on their online or offline collateral and help with their subscriber lists.

“…allowing clients to measure the effectiveness of their campaigns for themselves is really compelling…”

Just before Campaign Monitor and MailBuild merged in 2008, we really cottoned on to how great the software is and started offering email marketing as a stand-alone product within our portfolio. It meant that we could offer designed email communications to clients, instead of them sending email from a standard email client like Outlook. The fact that the reporting tools allow clients to measure the effectiveness of their campaigns for themselves is really compelling and makes email marketing a fairly easy sell.

We charge for template design, testing across the most popular email clients and helping out with data integration. In addition, we used to charge a monthly fee for access to the system, but found some clients only wanted to send bi-monthly or quarterly campaigns and so had to re-think this. We now charge £5 per send, then 1p per recipient for most clients, but for larger accounts we use an ‘all you can send’ monthly pricing model, which has won us some accounts.

That said, does offering email marketing to small businesses present specific challenges? What are they, and how do you overcome them?

“…when pitching email marketing, I use a true story or case study that illustrates how great newsletters are.”

First of all, having limited resources – including money – tends to make small businesses wary of spending on marketing, especially if they can’t measure the outcomes. To address this when pitching email marketing, I normally use a true story or case study that illustrates how great newsletters are. For example, we had a client who sold telephone systems, who was aware that one of their existing customers was in the market for a new system. However, every time one of the clients’ sales guys tried to call the customer’s office, the gatekeeper – a receptionist – said he was busy or unavailable.

We sent an email campaign on behalf of this client, featuring a headline story about a wonderful new phone system. Consequently, this usually off-limits customer received it and really engaged with the offer, clicking through via the phone system story a number of times and even forwarding the newsletter to a colleague. Armed with the email campaign reports, our client sent just a single email to the customer, confirming that they’d seen that he had clicked a number of times, which to them suggested interest. As it turned out, the timing was perfect. The resulting sale of the phone system pretty much paid for the following year’s email campaigns for the client – without access to these reports, it’s unlikely they would have ever got that deal.

“The resulting sale… pretty much paid for the following year’s email campaigns for the client – without access to reports, it’s unlikely they would have ever got that deal.”

So, when the main challenge presented by a small business client is in regards to spend, we point to this story. Similarly, another of our clients knew he wanted to send email campaigns, but allocating money to other parts of their business had always taken priority. However, since the first campaign went out, he’s been saying that they should have done it earlier!

That said, the single most difficult aspect of selling email marketing is advising clients that they just can’t send to a list they’ve bought from a data company. We take permission really seriously, even if it means turning down an account. This was a lesson we learned the hard way with a charity-based client we have. When members joined this charity, they give their consent to be emailed with news and updates. Nonetheless, the first campaign we sent for them got marked as spam by many of their members. We couldn’t believe what had happened, but it made us realize that if a tightly-managed list could generate spam complaints, then there was no way we could successfully send to a purchased list!

In your recent email newsletter, you mentioned a particularly successful campaign you sent on behalf of The Grange Spa. In fact, the first booking received as a result of the email campaign generated enough business to cover the cost of the entire campaign.

With this success story in mind, is ROI enough to justify the success of a small businesses’ email campaign, or are there other indicators, too?

Return On Investment (ROI) is the key consideration, especially as our clients become more savvy and aware that they can, and should measure results. Fundamentally, everything leads to ROI, but just as important as an immediate return is brand awareness, or the little reminders to customers that they’re here. Of course, familiarity does lead to increased business – thus contributing to ROI, but on a different timescale.

Overall, clients are delighted if they can get more cash in than they’ve spent, whether that’s per campaign or over the year.

Finally, what’s your advice to other designers who want to offer email marketing to small businesses?

“Keep abreast of changes within the email clients.”

Keep abreast of changes within the email clients. Subtle changes, such as the green text bug in Hotmail really hurt us – it made some legacy templates hard to read as the text color clashed with backgrounds. The recipient won’t care that Hotmail did this, they’ll just reason that the sender thinks green text on a blue background is ok.

Also, clients need to understand what can be built and delivered. Many times we’ve created something that looks ace, then have had to strip it back because it looks so different in Outlook from our original design.

Many thanks to Eddie at Hat Trick Media for taking the time to answer our questions. For more on offering email marketing to your clients, take a look at our recent post on building brand awareness, or our lively collection of rebrander case studies.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Mobile email design in practice: the new Campaign Monitor newsletter

Mobile email design in practice: the new Campaign Monitor newsletter

To coincide with our Worldview announcement last week, we also put together a fresh new design for our regular monthly newsletter. I thought it might be interesting to walk through the redesign process and highlight some of the interesting techniques we went for, especially on the mobile side.

Before starting on a new design for our newsletter, I spent some time looking at the reports for the last few issues to see if there were any hints about what we could improve. One of the more suprising discoveries I made was in our email client report. I was amazed at just how many subscribers were opening our newsletter on a mobile device. The iPhone alone accounted for close to 15% of our subscribers.

Email client report showing 15% iPhone usage

Once you throw in Android, Palm and the iPod Touch this jumps a couple more percent. We’ve shared some great techniques and examples of mobile optimization before, and it was clearly time to start practising what we preach.

The new design

One of the things I liked least about our old design was that it didn’t really allow us to more heavily promote our bigger announcements. The new design also puts our social sharing tools in a more prominent position and did a better job exposing the great email designs we feature in our gallery.

Here’s what we finished up with. Click to see the coded version.

The new design - click to see the full version

Because we kept the design simple, I managed to get it looking great in all the major email clients (even, shudder, Lotus Notes). You can view the results from a design and spam test I did before sending to see exactly how it looks on 20+ web, desktop and mobile clients.

Simple steps to mobile optimization

By using the @media query and some design common sense, I was able to produce a tweaked design for mobile devices that was easy to scan and looks great. Here’s a cropped version of the finished product on a rather stretched iPhone.

The mobile optimized version on a iPhone

Here’s the same email in the Android email client, which unlike the Android Gmail client, has full support for the @media query.

The mobile optimized email on the Android email client

While you’re left with a much more streamlined design for mobile devices, this targeted version was actually fairly straightforward to put together. It’s all about focusing on a few important areas.

Target with the @media query

By adding a simple @media query to my CSS, I was able to provide custom CSS that only mobile devices (and Yahoo!, more on that later) would see. Here’s a simplified version of the code I used:

@media only screen and (max-device-width: 480px) {
    .hide { display: none !important; }
    .table, .cell { width: 300px !important; }
    .divider { height: 1px !important; }
 }

Using this approach I can adjust widths, tweak padding and hide content altogether for smaller screens. Notice you also need to add the !important declaration to ensure the @media query supersedes any inline CSS you have for desktop and web-based email clients.

Tighten your cell widths

While the regular version of our newsletter is 600 pixels wide, the mobile version is only half that. By adding a class to each table and cell in my design that sets the width at 600 pixels, the table and cell classes in my @media query will automatically halve it to 300 pixels for mobile devices. This means the text is clearly readable as soon as it loads. There’s no need for your subscriber to zoom in or pan around your email to try and read your message. It’s a much better experience.

Adjust larger images accordingly

I applied special classes to a number of images in my design. The Worldview screenshot and gallery image widths were automatically halved with CSS. Both the iPhone and Android do a great job of scaling down images without any nasty artifacts, especially if you’re reducing the width by exactly 50%.

To get the Campaign Monitor logo looking as crisp as possible on the iPhone 4 retina display, I actually created the image at twice the size I planned on displaying it. Again, by sticking to exactly double the size it looks just the same in regular email clients and super crisp on an iPhone 4.

Turn off webkit font resizing

Webkit (the browser rendering your HTML emails on the iPhone, Android and Palm devices) has a great feature where it will automatically adjust text sizes as the viewport changes to give you the best reading experience. But, now that you’ve gone to all this trouble to get your widths and font-sizes right for a mobile device, I recommend turning off font resizing.

This is done by applying the following CSS inline to your body tag.

<body style="-webkit-text-size-adjust:none;">

Hide low priority content

One of the main aims of a mobile version of your email should be to ensure it’s as scannable and easy to read as possible. This often means that some of the secondary content in your newsletter should be hidden to keep the focus on what’s most important.

By applying a simple hide class to any image, paragraph or entire table I didn’t think was top priority, it was automatically hidden from the mobile version. Here are some of the elements I deemed unworthy for the mobile version:

  • The web version and preference center links – Traditionally you might put high priority on things like a link to view the email in a browser for a mobile device. But by optimising the design, the version you’re sending is actually the best way possible for it to be viewed.
  • Social sharing links – This was a tough call, but I felt that in order to “Like” us on Facebook, the subscriber would need to be logged into Facebook on their phone (instead of just using the Facebook app). Same goes for sharing on Twitter or using our forward to a friend feature. These are easy on a desktop, but possibly too involved on a mobile device. I might try and include it in the next issue and see what the reports show me.
  • Additional footer content – The links to our Flickr, Twitter and Facebook pages were nice-to-haves, but didn’t have a place in the mobile version. I actually made the mistake of hiding our address too, but will be sure to include that in the next issue for CAN-SPAM compliance.
  • The month name – I figured our readers have got a pretty good hold on that already.

Stick to a single column

To make the process of optimizing our newsletter as painless as possible, I deliberately opted for a single column design. Because we need to rely on nested tables these days, it makes it very difficult to re-order columns or stack blocks of content on top of each other. This is relatively easy with CSS (open this site and then resize your browser), but next to impossible given the rigidity of HTML tables.

If you do go for a two or three column design, you still have the option of simply hiding certain columns altogether. If you’re using a column for secondary content that isn’t important, this might be a great option for your mobile version anyway.

Yahoo! Mail won’t come to the party

Frustratingly, it looks like the current release of Yahoo!’s email client isn’t processing the @media query correctly and is applying it instead of ignoring it. This means that our Yahoo! subscribers are also seeing the mobile optimized version by default.

I was originally bothered by this, but given the fact that only 1.6% of our subscribers use Yahoo! Mail and the mobile version still looks great, I learned to live with it. I’d recommend checking your own email client stats to see the split between Yahoo! and mobile clients for your own list before making that call yourself.

Yours to download and tweak

I’ve always found the best way to learn new techniques is to peek under the hood at other implementations and have a go yourself. To get the ball rolling, we’re making our new template free to download and modify as you see fit. No need to link back to us or attribute in any way, we just hope it encourages more email designers to go down this path.

Download the templateDownload the mobile optimized template (zip file, 147kb)

The most important thing I learned during this process was that it’s actually quite simple to create a mobile version of your email. Throw in the @media query, start tweaking widths and hiding the less important stuff. Plus, if you’re re-using the same template over and over, you only need to do this once. As more of your subscribers start reading your emails on a mobile device, they’ll thank you for it.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Photobucket
Powered by WordPress Lab