Design for Success – Email Thursday



Today’s topic is Design for Success, best practices on how to develop email templates that are reusable and adaptable across various channels including personal computers and mobile phones.

A well designed email template will optimize interactivity (vis a vis click-through rates) and facilitate clear communications. It will maximize the effectiveness of your calls to action within the email. Ultimately, the design of an email will impact the overall user experience and effect the willingness of your recipients to open future emails.

I want to introduce you to the Grid System. This is a fundamental design principle where the layout of the email is cordoned off into rectangular grids as shown. This approach provides several key benefits.

First and foremost, the grid system will help you design in manner that is scalable. As you can imagine, the screen on an iPhone is significantly smaller than the screen of an iMac. Using the grid system will help you develop emails that can scale according to size of screen.

Secondarily, the grid system helps you arrange your content in a logical manner. Text and images can be positioned so that it is legible and follows an organized flow of ideas.

Thirdly, you can interchange content from month to month. This level of flexibility is evident with this example. This month, I am featuring Sling Chairs in the first sector in the right-hand column. Next month, I could feature a photo of a rocking horse in place of text. The grid system gives me an idea of what is and is not possible, and how much content is too much…. And how much content is just enough.

ALT tags are an often overlooked detail concerning images embedded in email messages. Although it’s not as nice as having the actual image displayed, an ALT tag can give the reader an idea of what should be displayed.
Please take a look at the example on the screen. My email software initially blocks out images as a security measure. This initial email does not contain any ALT tags, so as a reader, I have absolutely no idea what the image is supposed to display. Based on the email text, I could guess that it’s a photo of a screwdriver, but I don’t know for certain.

But if I place an ALT tag in the HTML image reference, I can add a description of what the photo is supposed to depict. I used a basic, uncreative example but you can put any descriptor that you see fit in that area.

With graphic design in abundance in the market, it’s tempting to produce the flashy, graphics-intensive emails.
Do not be overly dependent on images in your email. In fact, try to design with text in mind first – just in case the images don’t render.

I really like this email example.
It uses images, but if you were to remove the header image and the “resubscribe now” button from the email, the message would remain intact. The recipient would still receive the 50% incentive and be able to click on the text-based alternative to the resubscribe link.

From a business perspective, it’s tempting to throw a lot of offers into an email in an attempt to appeal to a wide spectrum of customers. This mentality often results in convoluted emails that inundate the recipient with a hodge-podge of offers. It could even possibly confuse the customer and deter them from taking advantage of the offer.

At the most, each email message should have no more than four offers. Ideally, those offers would be united under a common theme. Try to keep the offers distinct in scope and purpose. For example, an email should not contain multiple coupon offers towards the same class of products. A more viable alternative would be to have the coupon as the primary offer and links to other products as secondary offers. The coupon would draw interest in the email and the links would provide an overview of the breadth of inventory that you carry.

You don’t have to tackle all your offers in one email. Vary your email content from broadcast to broadcast. Use A/B testing to determine the types of content that are most compelling to your readership.

Related posts