April 20, 2020, 0 Comments

Email Design The ‘How To’ Guide

A great email shouldn’t be a conflict between content and design. A great email uses design to accentuate and improve the content. Design is just as important as content in delivering a compelling email. Content will always be the king but the way that content is presented, will determine the fate of that content.

Excellent content delivered through an equally compelling design is attainable, provided one is in the right mindset. To quote Steve Jobs, “Design is not just what it looks like and feels like. Design is how it works.” In an increasingly mobile world, great design helps you in providing a great experience to your readers. People won’t spend much time in reading your emails, so you only have a few seconds to deliver your message before the reader says, TL;DR..

Why is good email design important ?

First,great design also helps create a consistent experience for everyone who receives your emails. Put yourself in the shoes of your recipient. What would they want their experience to be like? How would they like to interact with and consume your content? Another reason is that design helps drive conversions. The message will be delivered with as little friction as possible. If your reader doesn’t understand why they are receiving this email , they’ll probably ignore the email, delete it, or even worse, unsubscribe. And lastly, design can help you take advantage on aspects of branding and recognition to create an immediate connection with your readers. If your company has established trust and authority leads and customer, you want to take advantage of that.

The ‘Inverted Pyramid’ Model for email design

The inverted pyramid model is borrowed from journalism. It suggests that newswriters place the most important news in the first paragraph. The model is borrowed from journalism but unlike journalism, instead of placing the most important content at the top, it is placed at the bottom. The average attention span of an adult is 8 seconds. With is information in mind, it cannot be assumed that your emails will be read word to word.

Because of this it is important to create your email campaigns in such a manner that these scanning readers can quickly grasp the important elements of your campaign. The inverted pyramid model will guide you in doing that. In essence, it is a framework for stitching the elements of your email campaigns (headers, imagery, buttons, etc.) so that they flawlessly work together to draw people in, deliver the important elements of your campaign and get them to click-through.

Using the Inverted pyramid model in your email

1. Create a killer value proposition 

A value proposition is a short and concise statement that explains benefits you obtain from using a particular product or service. A good value proposition explains the offer to the reader and why he/she should care about the offer. A good value proposition should be clear in its communication. It should explain the benefits and should differentiate the product/service from its competitors.

2. Use amazing imagery

Human brains process images faster than text. That is why it is a good idea to deliver your message using compelling images that are clear in their communication. Tools like Campaign Monitor can help you crop, resize, brighten, sharpen, and enhance images in order to make professional looking email designs within minutes. These tools also give you the options of adding buttons and text over images so that you can create a more engaging email that drives conversions.

3. Write succinct copy

While writing long paragraphs of text in an email isn’t a good idea, writing short succinct paragraphs that clearly deliver the message is a always a good idea. There are several copywriting methods such as the PAS(Problem-Action-Solution) method or the BAB(Before-After-Bridge) method or the story telling method. Take a look at your product/service and decide which method would be most suitable for it.

4. Include a prominent CTA

The CTA is the most important aspect of your email because it encourages the reader to take action. It should be big, bold and hard to miss. Since most of the viewers will be viewing the email on a mobile device, the CTA should designed in a way that in can be clicked with a thumb.The magic number is 44 by 44 pixels.


A preheader is the short text that is visible when an email arrives in your inbox. It iis there to tip you off about the contents of the email. Optimizing the preheader is very important.The subject and the preheader are the first two things that people see in the email. Secondly, the preheader text can be used for subtle advertising. The preheader along with the subject line should deliver a message consistent with your brand. The preheader text creates an association with your brand in the mind of the reader.It is only after reading this that the reader decides to open the email and click on the CTA. Preheaders should be kept short to ensure readability across devices, browsers and email clients.

Generally speaking, a preheader between 40-50 characters should be fine. The preheader shouldn’t appear as an integral part of your campaign. It is a good practice to keep it distinct from the main email campaign. Since the primary objective of the preheader is to get the reader to open your email, it doesn’t need to be as prominent in the design of your campaign.Another good practice is to keep the preheader as a continuation of the subject line. Since the preheader appears next to the subject line, both of them together need to tell a cohesive story. The preheader should be written in such a manner so that it appears as an extension of the subject line. Including a CTA in the pre-header text is also a useful practice. It tells the reader what to do next and gives increase the chances of them opening the email.

Contextualization And Personalization

Contextualizing or humanizing means converting the email to a 1 to 1 engagement from a one to many engagement.As indicated in an article earlier, contextualization and personalization improve engagement and drive conversion rates. A great example of contextualization would be Amazon which suggests you new products on their website that are in line with the previous purchases that you have made. Music apps such as Wynk also suggest you songs based on your listening history, another great example of contextualization. Perhaps the best way to personalize your email is to include dynamic content in the email. Dynamically changing content would make the campaign more relevant and appealing to the readers.

Email Layout

You should put great emphasis on the email layout: how it should look, its size, the text to be used, the fonts, the colors, etc. The ideal email width is between 500 to 650 pixels, and a vertical layout is considered to be better than a horizontal one. A table of contents is useful especially if there is a lot to be covered in a restricted space. A navigation bar can be useful if you have multiple products to display. Limiting the email to four or sections in order to improve readability is a good idea.


Even though it comes last, the design of the footer should not be ignored, in fact, it’s one of the most significant parts of an email. An ideal email footer should contain links to the main segments of your website, key services or products and social sharing buttons, in addition to your organizations contact details. Another good practice is to include a short, ‘Why are you receiving this email’. This will reduce the chances of your email going into the spam folder.

The footer should also contain buttons for social media integration. Social buttons such a Linkedin, Facebook or Twitter make it easy for your reader to share your content which in turn gives you the visibility and reach that you desire. The unsubscribe button should also be clearly visible in the footer otherwise a reader that no longer wishes to receive your emails might block you. This is turn will reduce your reputation with email clients

Responsive Design Emails

47 % of emails today are opened on mobile devices and some companies see this number rise up to 70%. These companies employ responsive design techniques to create a better experiences for their subscribers across devices and platforms and turn up the click and engagement rates. CSS3 media queries are foundations of responsive design queries, and can be confusing and complicated to learn. And it works differently in an inbox when compared to a web browser.

Below are a few things possible with responsive email design

  • Changing the hierarchy
  • Changing navigation
  • Enlarging all fonts
  • Changing all colors
  • Changing the layout
  • Scaling the images
  • Adding padding
  • Changing or hiding the content

Responsive email requires the use of a a media query, otherwise known as @media—a set of CSS styles that act like a set of conditional rules. When planned carefully, these can emails more readable on different screen sizes. Media queries would detect the size of the screen and turn on a set of rules that are suitable for that screen size. These require lot more planning and testing than simple emails and don’t necessarily work on every email client. When it comes to email, media type defines which CSS styles to use depending on the screen size. This media type has the following logic “If the email is displayed on a screen size of 580px or less, use the following CSS.”


Integrated with the media query, the styles act like conditional ‘if-then-else’ statements, that are triggered when a particular screen size is detected. You can create a number of styles based on your requirements.

Change Navigation

This style changes the position of the navigation items to their own row and spans the entire table. table[class=”nav”]{ width: 100% !important; padding: 10px 0 20px 20px !important; }

Enlarge Fonts

Here, font sizes inside the table cells called ‘body-header’ are changed to 18px

td[class=”body-header”]{ font-size: 18px !important; }

Change Colors

Any fonts inside the table cell named ‘body-copy’ will display as the color #dddddd

td[class=”body-copy”]{ color: #dddddd; }

Add Padding

This style adds 15px of padding to table cells classified into class ‘body’

td[class=”body”]{ padding: 15px !important; }

td[class=”body”]{ padding: 15px !important; }

Change or Hide Content

Display property can be employed to hide table cells

td[class=”mobile-hide”]{ display: none; }


Each style in the CSS rule block points to a type of container or element (for instance, the entire table or just a table cell) the style effects. These rules must be assigned and referenced in the HTML if they have to be applied


td[class=”body-header”]{ font-size: 18px !important; }


<td align=“left” class=“body-header”>

For instance, the element (td) and the class (”body-header”) employed in the CSS must match the ones used in HTML.

The responsive design that has been created must be tested in a variety of email clients and mobile devices to make sure it displays the way you intended. Devices, manufacturers, applications and screen sizes can all have an impact on the way your email appears. Using responsive design, you can simplify your message and make it easier to read and interact with on the small screens of mobile devices. Responsive email design offers benefits such as increased usability, higher read rates, along with better performance and click-through rates. You can visit StyleCampaign blog for a comprehensive list of supported platforms and email clients.

Images & CTA’s

When you are using images in your emails, you should keep the following tips in mind.

  • Dimension – Images should ideally be at a resolution that is twice the dimensions of the email
  • File Size – Since majority of the emails will be read on a phone, the image sizes shouldn’t be too big or they will not load on a phone.
  • Alt Text – Most email clients tend to block images, so you have to make sure that you have an Alt Text in its place that loads in case the image doesn’t
  • Use images that complement the email – The email shouldn’t appear to be a bunch of images placed together. The imagery should be consistent with the overall theme of the email
  • Customized Images – Wherever possible, create customized images suited for that particular email and don’t use stock images taken from the internet

A CTA button should ideally be created keeping three main aspects in mind

  • Copy – Specific and focussed on the benefit
  • Design – Unique and has whitespace around it
  • Placement – If some amount of explanation is required, make sure the explanation is made before the CTA is placed. This is especially the case with complex products/services

Few more tips for CTA design are as follows

  • Size – Buttons should be big enough so that people can click with their thumbs
  • Color – The color of the button should ideally match your brands color
  • Frequency – The number of buttons in the email is ideally determined by the number of possible actions the reader can take
  • Language – Use an active verb to signify the button as you want people to take action

Email design should become an integral part of your email strategy. The tips of email design, if followed carefully can result in higher conversions, build a favourable brand image and drive engagement with your target audience.

Write a Comment

Your email address will not be published. Required fields are marked *