What Should I Be Concerned With When Designing HTML Email?

Despite many similarities between coding web pages and HTML emails, there are major differences that can make or break a nice design. With the variety of email applications people use, they tend to display HTML in inconsistent ways which could lead to your design looking different than you intended.

Email Template Design

After an email is designed, run a few tests in a variety of email clients to see how they will render the message. Depending on the way in which the client displays HTML will determine how they display your email template. For an example, we have sent a test to popular email clients, GMail and Outlook, to display how they can render HTML differently. The first test was conducted in GMail.

21749522_step01fix.png

The second test was conducted in Outlook.

21749522_step02fix.png

 

As you can see, we sent an identical email to both email clients and yet they display almost entirely differently.

Another thing you may want to consider is how your email may look in a mobile device. All of the design templates that we provide are mobile responsive. What this means is that in order for your message to be optimized for mobile devices it may be re-organized when viewed on those devices.

Here is an example of how the same template design above would look on an iPhone running iOS7:

21749522_step03fix.png

Here is example of how that same template would look on an a phone running Android 4.0:

21749522_step04fix.png

So What Should Designers Do?

The answer: test, test, test!

The only way to ensure consistent HTML design rendering is to send copies of your self-designed email messages to as many popular email applications as you can, then make sure they appear in a consistently readable way.

Popular Email Applications to Test

Here are the most common email applications subscribers use to check their messages in:

  • GMail
  • Yahoo!
  • Windows Live / Hotmail
  • Outlook
  • AOL
  • Thunderbird
  • Mac Mail

More Tips From One of Our Designers

Bob, designer of many of our HTML templates, has published a well circulated article about ways to improve your HTML email designs for consistency across email clients (warning: requires basic knowledge of HTML):

6 Easy Ways to Improve Your HTML Emails

Don't Want to Worry About Email Design Problems?

Each of our 600+ email templates have been vigorously tested against all of the above email applications to ensure consistent rendering.

If you'd like to use HTML messages without the pain of testing, just load in a template and start typing.

 

What if I have issues designing my messages?

AWeber offers hundreds of templates you’re welcome to use! If you would ever find yourself wanting to modify an existing template or would like a custom template built for you to reflect your branding, our Template Team would be happy to modify existing templates or design a custom template for you!

Have more questions? Submit a request
Powered by Zendesk