Template Time: Balancing HTML Text and Image

Are you relying on images in your email to convey messages? You might want to think twice about this tactic. Here's why:

1. Most email clients do not display images by default.
2. A skewed image-to-text ratio can negatively impact your deliverability.
3. Subscribers might miss out on critical details that could inspire them to act on your messages or purchase from you.

Ideally, a subscriber would understand your message's value even with images off - hopefully inspiring them to go ahead and display them or click through to take a closer look at your offerings.

For those marketers wed to the "one big image" format, you absolutely CAN design smart, appealing emails that feature beautiful images and keep copy separate.

Building a template can help. Here are some examples I reference often:

This Restoration Hardware layout is perfect for simple messages - straightforward sales or coupons, new product announcements and much more. The important copy lives in a rich-text section to the left, while a supporting image can be featured on the right. (Additional hint: consider making the text section with a lighter or white background and darker type to avoid the difficulty of reading reverse type.)

Looking at the main body layout of a Macy's message, you see a great balance of image and text. This particular layout not only enables you to have a main message/call-to-action featured, but also highlight some individual products (with descriptive text underneath each image) as well as a secondary message (in this case a great contest and podcast series to engage subscribers). If I had my druthers, I'd swap the big image at the top with the main copy section underneath so that readers could see the main message without scrolling.

Lastly, this Williams-Sonoma email body is another one of my favorites to reference. We have a full-width rich-text section at the top to feature a prominent call-to-action, then smaller image and text areas for product features and a horizontal text area with a small supporting image to the left.

These are just a few simple examples that I feel illustrate how you can separate your text from image and produce a beautiful and effective email.

Remember also that templates can be flexible and create variety for your readers.  You can have certain sections coded to be repeatable, enabling you to feature additional products or secondary messages if you like.

P.S. If you're stuck with the one-big-image format for whatever reason, at least make sure that you are incorporating call-to-action preheaders in your messages as well as compelling alt text behind images to best communicate with subscribers. Even consider putting your coupon codes into the preheader or subject line so that they don't go unseen.

Do you have any example layouts that do a great job balancing text and image that you'd like to share? Please do!

Kristen Gregory
Email Marketing Strategist at Bronto
@kristengreg