One of the most frustrating aspects of email design is the final phase – testing your design. It can be discouraging when the design you spent hours perfecting doesn’t display correctly in all clients. Luckily, we have a few tips to keep your design looking great, no matter what client it’s viewed in.

If you’ve been following our series since the first post, you should now have a skeleton template and some content blocks. The final step is putting them together.

To get a copy of our fully optimized skeleton template today, ask your Ascent360 account manager for details. If you are not an Ascent360 client, sign up for our newsletter to receive a copy of our fully optimized skeleton template instantly.

Placing your content blocks

To place your content blocks, you’ll simply open your skeleton template file, and copy and paste each content block table into the area you want it to appear in your template. This is easier if you have commented your skeleton template extensively – if you give each content area a unique name, you can easily use the Find & Replace function in most text and HTML editors to find each content area quickly and paste in your content blocks.

Now you’re ready for the next step: Test your Design

Placing your content blocks with ExactTarget

If, like many of our clients, you use ExactTarget to send your emails, you can save your content blocks in the “My Content” folder, and save your template in the “My Templates” folder to easily create emails utilizing both.

After saving your template in the “My Templates” folder, and any necessary content blocks in the “My Contents” folder, head over to the “My Emails” folder to create your email. Select “Template Based” from the “Create” dropdown

After selecting your template from the My Templates folder, and adding your email name and subject, you’ll get a view of your template, with each of your content areas outlined in a gray dashed border

To place your content blocks, click the tiny up arrow at the bottom of the editing pane. This will open the content bar, which displays content blocks you have saved in the “My Contents” folder

Click the arrow above to open the Content Bar

Content bar expanded

Navigate to your content blocks. If you have saved them inside of a custom folder, select that folder from the left, and the content blocks saved inside will appear with a mini-preview on the right. After finding the content block you wish to place, click and drag the content block from the content bar to the content area you’d like to fill.

The area should be highlighted with a blue border when it’s ready to place. After dragging the block to the area you want to place it, let go of your mouse button to place the content.

That’s all there is to it! Now you can modify your default content within your email, and any changes you make won’t affect the saved content block. If you make a mistake, or want to set the block back to the default, simply drag a new block to replace yours.

Now you’re ready for the next step: testing your design!

Testing the Design

The best way to test your email for style inconsistencies is to use a service like Litmus or Email on Acid, which allows you to see what your email looks like on any and all email clients. This allows you to narrow down exactly which clients have problems displaying your email, and what those problems are. Ascent360 utilizes Litmus to test clients’ emails regularly. If you’re an Ascent360 client and would like to know more about email testing, reach out to your account manager to learn more!

Common Email Design Problems


As most email designers will tell you, Outlook is the most problematic email client. Because Outlook uses Microsoft Word as its rendering engine, there are a lot of elements of email design that display strangely in Outlook.

Outlook shows unexpected gaps in content, or right side of content is pushed down

In this case, you have some side-by-side content that looks fine in all other clients, and you’ve set your widths to accommodate Outlook’s extra table padding, yet you still see something like this in your Litmus test:

So, why is this happening, and how can you fix it? Well, since Outlook uses Word to render emails, it adds in a “page break” after your email reaches a certain pixel height. This causes your right aligned table to drop off after the page break, and creates a strange gap between your tables.

The fix for this issue is actually quite simple – you just need to set a height on the <tr> that contains the two left and right aligned tables.



Outlook adds white space to the right of my flexible image tables

This bug is something that drove me crazy for a few days, before I finally happened upon the extremely simple solution while researching another styling issue. To stop Outlook from adding white space, just add align=”left” to the parent <table> tag.



If you have already added align=”left” to your table, and you’re still encountering this issue, it may be due to using a pixel-defined line-height (something like “line-height: 24px;”) Try to stick to relative line-heights instead (something like “line-height: 200% or line-height: 2;”)


Yahoo won’t center my email (even though my table has align=”center”)

In most cases, the top-level parent table in your email will be center aligned, by adding align=”center” to it. But you may have noticed that Yahoo still displays your email all the way to the left, instead of center-aligned like you were expecting.

This fix is also a simple one – set the CSS property table-layout to a value of ‘fixed’ on your parent table.




Gmail displays my links in blue, no matter what color I set them to

Gmail wraps your email HTML in several <div>s, so that the application can apply various styles, including link colors and underlining. Gmail generally sets these link colors to #15c, a bright blue. If you want your links to appear in another color, add .a3s a[href] to your <style> section and set the link color. This should override any Gmail settings for link color.



Although this is by no means an exhaustive list of the problems you might encounter while testing your email, these are some of the most common problems you might run across.

To get a copy of our fully optimized skeleton template today, ask your Ascent360 account manager for details. If you are not an Ascent360 client, sign up for our newsletter to receive a copy of our fully optimized skeleton template instantly.