Email Design Tip of the Week

We’re going to get a bit technical in this blog and talk about the code behind a popular request in email design: “Give me rounded corners!” (The most popular request being, of course, “Make the logo bigger.” But that’s a blog for another day.)

In the ever-changing landscape of designing and coding email, scalability and rendering consistency are key. The box of nine makes rounded corners easy to work with and delivers solid rendering in a variety of inbox situations. The term “box of nine” is a nickname for the nine cell table that lives behind boxes with rounded corners in email design. Here’s an example of the finished product:



Now, here’s the same box with the table border set to one so we can see its construction:



As you can see, the basic layout of the box consists of three rows, each with three cells. The corners all consist of ten pixel square images, while the sides—top, right, bottom, and left—are spacer .gifs set to ten pixels. The alignments of all eight outer cells have also been set to ensure they align toward the center cell, allowing the box’s borders to remain consistent as the content inside changes. For example, the upper left corner is set to align=”right” and valign=”bottom”, the upper middle set to valign=”bottom” and the upper right set to align=”left” and valign=”bottom”.

All the cells have also been assigned a bgcolor. Even when images are off, this box will maintain its color and approximate shape by consistently rendering as a rectangle, thus ensuring the integrity of your message in multiple viewing environments. Extending this idea further, the technique can also work to create text-rendering buttons, using a combination of HTML text (in the center content cell), images, background images and colors. This allows the box’s content, be it a button call-to-action or teaser text for an article, to display and provide full value in all rendering situations.

That covers the box of nine basics, but this technique need not be restricted to rounded corners—any box or other design element that creates a border for content may use a variation on this setup. If the box’s width is fixed, for example, then the top and bottom rows can be a single image and table cell instead of three. Depending on the border used, you may want to set the sides to a repeating background image (again, possibly with a background color). If your email has a border around it, you may even use a variation on the box of nine as a shell for the entire email! No matter the end use, you can count on the box of nine to provide an easy solution for implementing rounded corner boxes that provide aesthetic appeal and reliable rendering.

Chris Studabaker
Supervising Consultant, Design Solutions
ExactTarget Campaign Solutions Team