Responsive Email Design Guidelines

Responsive Email Design can be confusing - but it doesn't have to be! Email design is crucial to a successful email marketing campaign. Making sure your email renders, is readable and easy to navigate often determines if your email marketing is successful or a failure.

Responsive email design is a powerful tool to accomplish this, but is often misused or misunderstood which causes disastrous results – like a Village People song.

Have no fear, grab a margarita and stick to these responsive design tips to find out how to keep your email campaign rolling!

Keep it in One Column and Keep it Simple

You’re not in the business of making art, you’re in the business of making money.

Emails are not paintings or websites – they have to perform a function and, in the case of mass email sending, be readable on as many devices and clients as possible!

The best way to achieve this is to design an email in one column. This ensures that it will scale down correctly on any device with a small screen. Two column designs aren’t too bad, as long as they’re symmetrical, meaning content blocks side by side.

Stay away from two column design emails and don’t even think about emails that are basically one sliced up image, require HTML floats or positioning (like overlaying).

  • Single columns are best
  • Symmetrical design comes in at second place
  • Use grid-based layers
  • Never use complex design (HTML floats / positioning, upwards of 3 columns)

Design for Mobile First

40% of email is consumed via mobile phones and 70% of consumers immediately delete email that doesn’t render well on their mobiles! While inline CSS support has come a long way, you can’t rely on all email clients to respond well to your design – it’s always better to be safe than sorry!

By designing for mobile, which is the most limited, you ensure that your mail will read well on other, more forgiving devices. Here’s some points that will help you design an email for mobile.

  • Keep your links large enough to be selectable with fingers
  • Keep large images to a minimum
  • Use large fonts
  • Use concise copy and calls to action
  • Avoid elements that require java or flash – rather use a .gif

Design for the Lowest Common Denominator

What’s meant by this is that you should create your email to be read by the widest possible audience and prepare for worst case scenarios.

To begin, you should design on a width of 600 pixels. Not only does this help with your email being rendered on as many devices and clients as possible, but it also helps it perform better in preview panes that are becoming more and more popular in email clients around the world.

You should always assume that your images will be blocked, or won’t load – so you should include alt-text on your images and have a good copy to image ratio.

Some email clients haven’t caught up with the times yet and don’t support certain fonts. Because of this, it’s best to stick to basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.

Be careful with using layered images and backgrounds. Outlook generally doesn’t support background images. Always use a solid background colour as a fallback and never include important information in the background.

  • Design on a width of 600px
  • Use Alt Text on your images
  • Always assume your images will completely fail to load
  • Stick with basic, cross platform fonts
  • Use solid background colours
  • Never rely on the background

Email Development Guidelines

Just as there are best practices for designing an email, there are a few things to keep in mind when coding your own HTML newsletter.

Code According to the Table Element

Code all structures using the table element and use element attributes such as cellpadding, valign and width, to set table dimensions. The goal here is to achieve a box-model structure, similar what was discussed above.

Keep CSS Simple

Avoid complex declarations in the name of style (“font:#000 12px Arial, Helvetica, sans-serif;”) shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.) or complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements).

In addition, be sure to inline all CSS before sending. Most email service providers will do this automatically.

Know the Limits

Use absolute links for your images and be sure that they’re hosted on a reliable, trusted server for the best performance possible. This means that your pictures can be accessed from anywhere on the web because they’re stored on an accessible location. Some email service providers provide image hosting for a fee or for free.

It’s a good idea to stay away from Java and Flash code, as almost all email clients reject it.

In the End…

GraphicMail recommends using single column layouts or symmetrical designs which are able to restructure properly on smaller screens. This will maximize the efficiency and readability of your emails.

GraphicMail also offers responsive email design templates that are created to render on a wide variety of mobile devices and computer applications. We also offer guidance and resources that allow you to get the most out of your email.

Try us out!
Start improving your email marketing campaign today.
Take a free trial to testing for email spam
Pricing for stopping email spam
Find out from us how you can avoid email spam

Email Design in the Modern Age

Electronic Mail Design with GraphicMailSince the arrival of commercial internet in the mid 90s, websites have attempted to promote products and services to users around the world through flickering static on CRT screens in some form or another.

Due to a misunderstanding of online interaction, the early attempts of online marketing were largely laughable. Early emarketers typically came from a background in advertising using pamphlets, posters and brochures; and thus designed web pages in the same way.

We’re talking static, unresponsive pages that required early internet users to scroll in eight different directions to read a sentence pointing them to another page… full of the same scrolling!
If there was an internet hell, this was it!

Jump forward to today, and we often see a similar situation.

However, mobile devices have become the new desktop and promotional sites have become the new email – yet so many emails today are still plagued by bad layout design.

This blog post will outline the different email designs available for email marketing and which are best to use today.

Continue reading

Email Segmentation: The Science

Email Segmentation in your marketing campaign can do wonders for client satisfactionThe past few blog posts covered growing your mailing list, sending top-notch email marketing text to your clients, and optimizing your landing pages for maximum client acquisition. If you’ve followed the tips contained in these digital codices, you should be sitting on a mountain of information! But what do you do with all that information? How do you use the fact that your client base consists of a certain demographic, nationality or gender? The answer is effective use of email segmentation – and this blog post will show you how! Continue reading

3 Email Sign Up Landing Page Tips

Email Sign Up forms are your front line troops in the quest for higher profitsWhen it comes to email marketing sign up, size is everything!

You can’t expect to generate many sales with a dwindling contact list. Unsubscriptions, bounces and spam filters chip away at your mailing list everyday, which means that if you’re not working towards gaining more subscribers everyday, you’re losing out!

You have to be constantly growing your list if you expect to see any return on investment – the more contacts you have; the more sales you’ll produce!

The star of the show should be your email sign up landing page – every promotional email you send out, every advert that hits the web and every word that comes out of your mouth should encourage people to hit that link, visit the page and sign up for the ride!

Improving your landing page can increase leads by 96% according to a recent study by MarketingSherpa – isn’t it time you optimized this important aspect of your email marketing campaign?

Here’s some tips to get you started.

Continue reading

Writing Good Email with the AIDA Principle

Writing good email content with AIDAWriting good email is crucial to the game of email marketing.

While you may receive a good response from an email to your grandma, trying to sell a product through a computer screen can be a frustrating process if you don’t know how to structure your email.

Fortunately, email marketing is both an art and a science! While your artistic creativity will be the driving force and face of your email marketing campaign, the science, statistics and data supporting it will be the engine that churns out the results – and with GraphicMail, that engine is a V8!

This blog will give you the science of writing and monitoring good email content to get your readers clicking, converting and cheering!

Continue reading