Designing a great email template that renders well in all web, desktop and mobile email clients can be a challenge. It’s absolutely necessary that you put as much energy into your message as you do in how your message will be displayed.
In the United States, 38% of emails are opened on a mobile device every day and most of those are being opened on either the Apple iPhone (23%) or iPad (11%). Unlike Android devices, Apple devices resize a current email to fit on the screen while Android devices may require you to scroll to the right to see the entire message.
70% of people delete an email on their mobile if it doesn’t look good and 55% of people don’t click on the “View in Browser” button. Most startling, only 2% of people will reopen an email on another device. With these kinds of numbers, you’re loosing a large part of your audience if your design doesn’t work in all inboxes.
Microsoft Outlook on a Windows machine seems to be the trickiest email client to design for. I’ve found that separating your content into nested tables allows you to control how the email displays across all platforms the best but some techniques still won’t work in Outlook. Often, CSS will be stripped out of the email when it’s rendered so there are several methods you can use to manage this.
If you’re having trouble with your design, the best thing to do is to use a template that is proven to work across different types of email and then adapt it for your needs. You’ll have to do a lot of testing to be confident your design works.
There are enough resources out there for someone with intermediate HTML and CSS skills to design a great looking template.
Here are a handful of resources that I found that really helped me with my design.
RESOURCES:
Email Template plus Code – many different technique used here
Responsive Design for Mobile Rendering
Insight Unsolicited 