Email design and coding requires an awareness of email client limitations rather than web browser standards, so when I was assigned the task of creating a new email newsletter template, I thought it was a good idea to start with a review of email CSS support.
Since emails are coded using tables, it helped to sketch a table-based layout design before creating the mockup in Photoshop. With a background in web design, I can get quite opinionated about aesthetics even when I know the extra visual details may make cross-browser compatibility more challenging and time consuming. My email template design contained subtle gradients that would make cross email client compatibility even more difficult.
Once the design mockup was approved, it took some trial and error experiments in a code editor to figure out the right solution for the gradients and then some painstaking planning before the real coding began.
What I came up with was a new way to create email gradients.
Flexible Gradients With No Repeating Background Images
My header gradient image is the maximum recommended email width (600 pixels), but I wanted the gradient to appear flexible by extending horizontally on either side of the header, according to the width of the user’s email client/device. So if the view width is more than 600 pixels, the gradient will fill that extra space.
This would be easy to accomplish for web by using a repeating background image or CSS gradient.
But this is email and with no consistent support for background images in Outlook 2007, a much different approach was needed. I decided to create an HTML gradient using one- and two-pixel high table cell rows, each with its own background color.
We’re talking about 100 rows of different color values to match the gradient in the header image. Tedious? Yes. But it was worth it to the right side of my brain and hopefully to the subconscious of our email subscribers!
Photoshop Pixel Planning
I started in Photoshop by zooming in 3200% on the header image, which was 120 pixels high. Using the eyedropper tool on the top pixel, I located the color value and recorded it in a text editor. I repeated this process for each pixel below it. Yep, all 120. I also noted the number of pixels for colors that repeated.
It’s important to sample the colors from the final optimized header jpg, not the psd. Optimizing an image for web or using tools like ImageOptim may change the color values slightly and we wanted the HTML gradient to match the colors in the header image as seamlessly as possible.
Lovely Tables | Groovy Gradient Code
Now onto the HTML coding. So, believe it or not tables are the best way and actually, the only way to code emails.
I started by inserting a 3-column table with a guesstimated 200 rows, knowing the gradient would be about 100 rows. More rows would be needed for the rest of the template and any excess, unnecessary rows could be easily eliminated later.
<td> percentage widths to the three columns of 33%, 34% and 33% so the total email width would expand according to the email client/device size.
I referred back to the text editor for copying and pasting the background color values into the row tags
<tr> along with adding the appropriate height to the data cells
<td>. After finishing this laborious task, the center rows from the end of the gradient up were ready to be merged. This merged cell
<td> is the place that will contain the header image. See the sample code below or check out the full working example:
<tr bgcolor="#525252"> <td height="2" width="33%"></td> <td rowspan="95" width="34%">Header Image Will Go Here</td> <td width="33%"></td> </tr> <tr bgcolor="#515151"> <td height="2"></td> <td></td> </tr> <tr bgcolor="#505151"> <td height="1"></td> <td></td> </tr> <tr bgcolor="#505050"> <td height="2"></td> <td></td> </tr> <tr bgcolor="#4f4f4f"> <td height="2"></td> <td></td> </tr>
No White / Non-Breaking Spaces Allowed
It’s important to not have any white space between your
<td> tags. Email clients like Yahoo! and Hotmail can create additional padding from white space that will ruin the gradient, along with many other precious things. Non-breaking spaces
should also be avoided due to similar results across all email clients.
The Drop Shadow: Coding a Gradient in Disguise
For coding purposes, the drop shadow around the content box was treated like our previous gradient. I wanted the shadow to expand vertically depending on the length of the email content which will vary.
Once again, if we were building for the web, there would be a few simple ways to achieve the box and shadow effect utilizing background images or new CSS3 magic.
But with limited background image support for emails, I decided to create the shadow effect by using two images (to cut corners, no pun intended) for the top and bottom of the box and two HTML gradients running vertical on either side of the box. Once again using Photoshop, I zoomed in 3200% on the shadow and sampled color with the eyedropper tool from the pixel closest to the box and moved across until I reached color #cccccc, the solid background color in the template. Thankfully, this horizontal gradient was only nine pixels wide and much easier to record the color values for coding down the road.
Dragging, Counting & Nesting
Nested tables are perfectly acceptable for emails. Go figure! So I added another table within my original table which contained the shadow gradients, white box, content, padding, image, ‘share this’ button and ‘call to action’ link.
I first had to figure out how many rows by how many columns my nested table needed to be. Dragging guides in Photoshop over the mockup is a great way to visualize and count your rows and columns. Make sure your rulers are turned on in Photoshop, which makes adding guides possible. Guides can be dragged vertically and horizontally to separate each section which will represent the number of columns and rows. Once these are counted, the table is ready to be inserted.
Merge Carefully & Check Your Wide Load
The nested table cells must carefully be merged to match all the sections highlighted with guides and to eliminate unnecessary
<td>s. It’s good practice with good outcomes to put widths on every single
<td>. I added the
<td> widths after all merging was completed. This time, the
<td> widths had to be fixed and accurate, not the percentage widths used on the first table.
<td>s with added widths to create all padding — an unusual way to apply padding but it renders better for email clients than inline margins, CSS padding or cell padding. Fixed heights for margins and shadow images were also added to
<td>s. Check your math to make sure the combined
<td> widths add up to the total width of your nested table. Copy and paste those previously recorded gradient color values into the appropriate
<td>s. Add the images, links and content.
Time To Test
I’ve tested my HTML template throughout the coding process locally with a browser. The next step was to test for cross-email client compatibility. Our testing was conducted using a Litmus render feature on Mill33 (both Dyn partners) that displays how your email will render across 30 email clients and devices in minutes.
Watch That WYSIWYG!
Be careful when pasting HTML code into a WYSIWYG for testing. Paste into the HTML window view only. Pasting into the visual window view can add extra unwanted code like non-breaking spaces to your
<td> tags creating unwanted results. It can also drive a developer insane who is trying to debug using the original code.
The Final Results
The HTML gradients rendered fabulous across all the major and not so major email client versions and browsers including Gmail, Outlook, Hotmail, Yahoo! Mail, Thunderbird, AOL Mail and Apple Mail. The only clients that rendered buggy were Lotus Notes 6.5 and 7. Time to get your gradient groove on!