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.

test message displayed in Gmail

The second test was conducted in Outlook.

test message displayed in Outlook


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:

test message displayed on iPhone running iOS7

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

test message displayed on Android 4.0

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


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?

Custom Template Design information

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