Archive for the ‘HTML Email Coding’ Category

« Older Entries

HTML Email Issue: loss of backgrounds in Hotmail (includes fix)

Monday, August 9th, 2010

Various email clients have different quirks and html challenges – in our HTML email coding section we document these and detail any workarounds if available.

Email Client Affected:

This issue affects the new version of Hotmail.

Issue:

Hotmail have introduced a code in their rendering engine that effectively removes the background image or colour properties from ‘wrapper’ full width tables. Full width tables are commonly used in html emails to implement background formatting and to center the main email, and are specified as 100% wide.

Effectively the new Hotmail code forces the maximum width of the email to be widest part of the email defined in pixels, which may be either an image or a table.

Fix:

Whilst the width of the wrapping table could be forced out to a certain width (eg. 1000px), this would cause other rendering issues in other platforms (and it would be pretty impractical). Instead, a small CSS code snippet can be used to force the width back out to 100% – simply add this code at the top of the email HTML code:

<STYLE type=”text/css”>
.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}
</STYLE>

Discovered:

July 2010

Tags:, , ,
Posted in HTML Email Coding | View Comments

HTML Email Issue: Yahoo! Mail Turning Links Default Blue

Wednesday, July 14th, 2010

Various email clients have different quirks and html challenges – in our HTML email coding section we document these and detail any workarounds if available.

Email Client Affected:

This issue affects the current Yahoo! Mail (ie not Yahoo! Mail Classic)

Issue:

This rendering issue is something we spotted here at e-Dialog during testing in certain versions of Yahoo! Mail. It seems a recent update to the rendering engine now gives all <a> tags a class of .yshortcuts, and as a result can mangle inline style code and force Yahoo’s default link colour instead.

Fix:

The fix is to overwrite the style by declaring our own at the top of the email html (this can go within your <head> tags or within the  <body> section).

For example, this code snippet will set all links as black:

<style type="text/css">
    .yshortcuts { color:#000000 }
    .yshortcuts a span { color:#000000 }
</style>

In order to change link colours for different areas, you can nest classes like so:

<style type="text/css">
    .header .yshortcuts { color:#000000 }
</style>

In this example, you’d add class=”header” to the relevant <td>

Limitations:

Unfortunately there’s a pretty major limitation to this fix currently, in that it is applied to every link in a given email. This could cause issues, for example, when part of a creative required white coloured links and another part requires black ones.

Discovered:

July 2010

More info and discussion on Campaign Monitor’s forums.

Tags:, , , ,
Posted in HTML Email Coding | View Comments

Facebook ‘Like’ Buttons come to Email Marketing

Monday, July 12th, 2010

Email platform provider Mailchimp have announced that marketers will be able to use the latest version of their web-based tool to incorporate Facebook’s ‘like’ functionality directly into email campaigns. The ‘Like’ functionality allows recipients to ‘favourite’ content and share it using the social network – it’s essentially a user recommendation system, which Facebook is using to build their own web search engine. We’ve seen something similar in Share With Your Network, which allowed users to post a link to web/email content via their status update – ‘like’ is an evolution of this which allows content to be aggregated more effectively across the site.

It’ll be interesting to find out how they plan to implement this – the existing functionality provided by Facebook is javascript/iframe based, which have never seen widespread support across email clients.

If they’ve managed to crack Facebook’s javascript based implementation then hats off to the team!

Below is an introduction video from Mailchimp, as seen on Mashable.

Tags:, , , , , ,
Posted in HTML Email Coding | View Comments

Spotted: HTML 5 comes to email

Thursday, July 1st, 2010

So over the past 6 months or so, web designers have been getting to play around with HTML 5, which is an update on the HTML standard that natively includes features like controls for audio/video playback and drag and drop. Traditionally, these kind of things have required a mixture of javascript and plugins such as flash, and as a result have not been available in HTML email, primarily due to security concerns.

However as HTML 5 starts to be supported by email clients and web browsers, it opens up the doors for a much richer experience for the user, and allows marketers to experiment with things like scrolling product boxes, and video & audio with controls.

Recently different email client providers have been moving towards supporting this type of technology, particularly webmail clients, who have been adding HTML 5 doctypes to their pages (this was behind the recent Gmail/Firefox issue). This week’s announcement by Yahoo Mail builds on that – as they’ve just announced a beta version of their new HTML 5 Mobile Webmail for iPhone and iPod touch.

If you’re on an iPhone or iPod touch, you can access the new beta by visiting http://m.yahoo.com/mail and tapping on ‘Preview the new Yahoo! Mail’.

Looking at the beta on an iPhone 4 really shows what HTML 5 is capable of, and where email clients are going – it’s exciting!

Above: this is the inbox view – you can see a carousel of photo thumbnails, which have been rotated and had a drop shadow added. You can gesture left and right to scroll through photos. These are custom published, so these are from my friends on flickr.

Below: there’s a similar view at the top of the email itself

Below: Here’s what’s really clever – when you click/thumb an image it opens into a nice lightbox style preview:




Tags:, , , , , , ,
Posted in HTML Email Coding | View Comments

The importance of QA

Monday, May 17th, 2010

aka why you should always check proofs in different email clients.

So first off, I don’t want to turn this blog into the new Photoshop Disasters, and also I’m not 100% sure if this is official or from some third party restaurant booking site. But regardless, here’s a good example of how simple mistakes can cheapen the look of an email and lead to users questioning it’s authenticity.

Issue number one is that entity codes seem to be appearing instead of the symbols they represent (particularly the ampersand). This can be tricky to catch, as different email clients can handle these differently, but it’s something to check for in the QA process. They can be problematic in the subject line, so maybe “and” is the best way forward there.

Issue two is that the greeting is included twice – once is custom published and one is generic. It might be a case that “Dear Guest” is the fallback, and for some reason it’s showing when it shouldn’t. Either way it reduces the impact.

Lastly, it’s not really a mistake, but the body copy is a bit chunky and hard to skim – breaking it out into two paragraphs and pulling out the key details in bold could make it easier to follow.

Kudos, though, for including the links to different language versions of the email in the pre-header.

On reflection..
This was probably sent out by the manager of the individual venue, and therefore this is probably more an exercise in empowering staff to use tools in the best way they can, and ensuring the tools are as intuitive and fail-safe as possible.

Tags:, , , ,
Posted in HTML Email Coding | View Comments