Are you tired of hearing about the limitations of HTML email design - specifically, how email browsers display (or don’t display) images? What’s a designer to do if you can’t rely on images to provide that hook to grab people’s attention? How do you create visual interest or a branded look and feel?
Of course, images can be used, but the majority of email clients need to actively turn these images on. But I want people to see my email design instantly, and have my design go to work attracting attention and directing the viewer’s eye. After all, isn’t that the point of designing and creating HTML email in the first place?
The Challenge
So, I gave myself a challenge: design a visually engaging HTML email without using a single image. The biggest challenge of any designer is to work within the limitations of the project at hand. Fine, if images are a problem, I’ll do without them. It’s an extreme solution to the problem of blocked images, but one that is well worth investigating.
Design
Since this was just an exercise I wanted to keep it simple. So I needed a design “theme” that would be easy to implement. Since tables are the primary tool for HTML email layout, I decided to work with a grid of squares that could be combined and colored to break up the space and create visual interest. This grid layout would translate perfectly to the rigid structure of HTML tables.
I created a fake company name (PixelMania) which helps make sense of the design elements. Maybe they sell old Atari games…
Once I was happy with the design mock-up, and fairly confident I could create it solely with HTML, I was on to the next step.
HTML
For the sake of time – and just in case this experiment was doomed to fail anyway – I decided to build just a portion of the whole email. My thinking was, if it works for this one section of the email design, it will work for the entire layout and the hypothesis will be confirmed.
I created a table that matched the 20-pixel x 20-pixel grid of the image layout. Then, I brought in an image of the design as a background of the table to use as a guide. The image was tinted so that when adding color to the table cells (described below), I could see the difference between colored and uncolored cells.
I then combined cells where I needed to have space for text. Next, I added color to each individual table cell <td> tag, matching the layout of the image I placed in the background.
Once all of the cells were colored, I removed the background image from the table. I then added all of the text into the layout and styled everything to match the design.
Testing
Of course, as I built this email design I followed “best practices“, and coded it in a way that shouldn’t break in email browsers. But, as I’ve learned through trial and lots of error, never assume it’s going to work as envisioned. I sent a test to myself so I could see the results of the email in multiple browsers.
Unfortunately my fears were realized. The grid I created did not hold its width in any of the email browsers tested. Even though I had set each <td> width to 20px the layout was squeezed when the preview pane was smaller than the total width of the email. This definitely won’t do.
The only solution I could come up with was to use spacer images to hold the table cells in place. Rats, I had to use images after all. I created another row at the bottom of the table and inserted clear 20px wide gifs in each <td>. Time to retest.
Success!
Yes, images had to be used in the end, but only to maintain the HTML structure and not as a design element. I can live with that. I challenged myself to create a visually interesting and engaging email design without using graphics, and I’m happy with the end result.
Implementing the above email design was a time consuming process, and may be difficult when working within the real world of deadlines and budgets. But, what this experiment hopefully demonstrates is that designers can always find graceful solutions to big problems by using their greatest asset: creativity.
This email design experiment also opens up a number of other possibilities, such as:
-
Creating images from photographic sources using this HTML grid technique and coloring cells to match the sources
-
Creating images from colored X’s
-
Creating HTML text layouts – lots of words in different sizes, colors, and Web safe fonts
From lyrishq.com
