Email Design Review

Email Design Review

Strategy, design & HTML code best practice in email marketing

Main menu

Skip to primary content
Skip to secondary content
  • Home
  • News & Insight
    • Email Strategy
    • Infographics
  • Design Guides
  • Email HTML Code
    • Coding Guides
    • Code Fixes
  • Design Inspiration

Category Archives: Code Fixes

Post navigation

Newer posts →

HTML Email Issue: Yahoo! Mail Turning Links Default Blue

Posted on July 14, 2010 by Elliot Ross
6
Tweet
Pin It

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.

Posted in Code Fixes | Tagged email clients, email coding, html email, rendering issues, yahoo mail rendering issues | 6 Replies

Do changes to Gmail’s rendering affect your email HTML? (includes fix)

Posted on May 12, 2010 by Elliot Ross
18
Tweet
Pin It


Typical! I’m off work for a few days with the flu and the whole internet goes haywire! Gmail have recently had a bit of an Outlook 2007 moment, causing yet another rendering problem for HTML email coders. Luckily, this one is pretty easy to fix, and to be honest is close to a fix that you should already be implementing to combat a similar Hotmail + Firefox/Safari issue.

The issue is that extra spacing can be included around images in email HTML, when viewed in Gmail through Firefox, Safari, Opera and Chrome (But not Internet Explorer). Hotmail has a similar issue, and the fix for that is to add this style declaration at the top of your html: <style>img {display:block}</style>

However, as Gmail can ignore this code, the best way to work around this issue in Gmail is to add the style declaration to every image, i.e.: <img style=”display:block” src=…

So all in all not a show stopper, but still another step to add to that checklist.  It’s also worth remembering that this also affects triggers, templates and anything else you may have that is mailed but isn’t part of the day to day html builds.

Has this affected you and your email campaigns? let us know in the comments!

First spotted by e-Dialog’s coding gurus and Alchemy Worx.

Posted in Code Fixes | Tagged gmail, google mail, html code fixes, html email best practice, rendering issues | 18 Replies

Post navigation

Newer posts →

Get our latest posts

Follow @emailreview
Follow @iamelliot

Elliot Ross is founder of Action Rocket, a creative agency working in email. His experience includes creating award winning websites, mobile experiences and email marketing campaigns for British Airways, Sony Playstation and IKEA.

Let's Connect

Mobile Email Design
  • Rethinking Mobile Email Design
  • Infographic: UK Mobile Email Statistics
Social Media & Email
  • 5 Tips: Integrating Email Marketing with Social Media
  • Pin to Pinterest from Email - Toys R Us Case Study
Email Design Resources
  • Essential Resources for Coding HTML Email
  • HTML5 Video in Email
  • Designing for Images Disabled
  • Subject Line Best Practice
  • Optimising Email Preheaders
  • Outlook 2007 Background Fix
  • Email Design Gallery
  • The Fold and Email Marketing

The views on this blog do not necessarily represent those of our employers - view disclaimers.

Paying the bills

All Post Tags

animated gif apple Banana Republic best practice clever stuff cool emails designing emails for mobile drive online email e dialog edialog email and social media email best practice email design Email Design Best Practice email design gallery email marketing email marketing best practice email marketing design Email Marketing Jobs email marketing strategy english email design facebook fashion fashion email design gmail high street retailer hotmail html code fixes html email code infographic mobile email rendering issues retail retail email retail email design share with your network share with your network (swyn) social media subject line best practice swyn travel travel email travel email design twitter write better subject lines

Blogroll

  • Campaign Monitor Blog
  • Email Critic
  • Email Marketing Voodoo
  • Email Marketing.me
  • Email Standards Project
  • EmailBlog.eu
  • HTML Email Gallery
  • Mailchimp Blog
  • No man is an iland
  • The Email Guide
  • The Email Zoo
  • The Relevant Marketer
  • Viva La Email

Other Projects

  • 3G for iPad

Recent Posts

  • Email Inspiration: Squarespace dummy forms in email
  • Thinking outside the box: RNIB
  • [Now Fixed] Email Issue: © Copyright symbol breaking in Hotmail
  • Rethinking Mobile Email Design
  • Breaking the rules: Brooks Brothers

© Copyright 2009-12 Elliot Ross All rights reserved.

Want your message infront of thousands of email experts? Advertise on our site from $49/month | Contact Us

Selected creative artwork remains the property of the client and/or agencies that produced it.
Creative artwork may contain photography that remains the property of the relevent stock library.