Back to blog

Decoding the Anatomy of a Stellar Email Newsletter Design

For most email marketers, an email newsletter is the single most effective tactic for awareness, acquisition, conversion, and retention (GIGAOM Research). When your newsletter imparts the knowledge that your subscribers are looking for, it helps to build up their trust for your brand.
Salesforce 2014 Mobile Behavior Report found out that of subscribers who opt-in to email messages from a brand; 95% find these messages somewhat resourceful or very useful.

So, what elements would you ideally add while designing an effective newsletter? Well, let’s scan through a newsletter from head to toe, and understand which elements prove to be effective for newsletter design.

1) Mobile-First Approach

More than 56% of email subscribers view their emails on mobile phones. This clearly means that your emails should be designed keeping mobile compatibility in mind. Let’s understand some points to consider while designing an email for mobile devices:

  • Consider a minimum size of 44×44 for your CTA, remember your CTAs should be big enough to be visible and tappable.
  • The single-column layout is a must for mobile devices
  • Google is gradually rolling out its update wherein Gmail shall support media queries. But till then emails coded for Gmail app shall need a spongy layout combined with media queries called Hybrid Emails.
  • Retina display is in. So, if you have a higher Apple subscriber base, create images with double the size for the images to render well.

email newsletter design

2) Subject Line & Preview Text: The Hidden Elements

The subject line might not be part of newsletter design, but it influences your subscriber to open your newsletter. So, make sure your subject lines are appealing.

Preview text displayed right after the subject line in the inbox, should look distinctive and is of utmost importance to improve the open rate. “To view the email in the browser, click here” or “to unsubscribe click here” are some of the common links we always find in the pre-header. Well, avoid such cliché and get creative with your preview text.

Let’s understand the best practices of using snippets & preview text in a newsletter.

  • Use Johnson Box to build on the subject line or a brief about the email.
  • Consider using emojis, create a sense of urgency, and add personalized content, and so on, for your preview text to stand out in the crowded inbox.
  • Preview pane top is 400×300 Pixels. So, make sure the height of the Johnson Box doesn’t exceed 150px; or the content from your email body would be pushed.

3) Table of Content for Long Newsletters

It is quite surprising to hear about a table of content for a newsletter. Though it is advised to keep the newsletter as short as possible, but in case you have a long newsletter adding a table of content can prove to be quite effective. Adding links in the table of content can let the subscriber directly scroll to the section he/she is interested in.

4) Concentrate on a Crisp Layout & a Strong Typography

It is recommended to keep the width of your newsletter between 320-650px. For mobile devices, maintain the width between 320-550px. However, the height of the newsletter depends on the amount of content in your newsletter. Readers don’t prefer to scroll down much in an email, so consider keeping your newsletter short and crisp for readers to skim through your newsletter quickly.

Structure your newsletter layout by using tables in it. Remember, the newsletter with tables in it render well across all email clients and do not create any issues. On the other hand, strong typography is essential for any newsletter to create an impact. It not only engages a subscriber but also takes care of the aesthetics of a newsletter.

To get more ideas of how your newsletter could look like, here are some examples.

Let’s have a look at the things to consider for strong typography.

  • Avoid the orphans
  • Repair the Rags
  • Select the correct text size and style based on subject prominence
  • Stick to a couple of typefaces, multiple typefaces in newsletter ruins the user experience
  • Maintain the right spacing

5) Place compelling Visuals; don’t forget to optimize them

Use compelling visuals in your emails to engage the readers and motivate them to read your entire newsletter. But, some email clients do not support background-image property in an email; this is where optimizing visuals in newsletter comes into the picture. Try using fallback images for your emails to render well in email clients that do not support background images.

Furthermore, Gifs in emails look visually appealing and can be considered in a newsletter. Make sure you add an alt tag to all the images in your newsletter. This will help the readers with the low internet connection or the ones who are struggling to download the images, to understand what the image is all about.

6) Minimalistic & Informative Content is the Key

Concise copy in an email makes it a lot easier for readers to scan through the newsletter. If you are adding minimalistic content in your newsletter, it will scale well on mobile devices too.

However, if you have a long newsletter with a lot of content stuffed, instead of creating huge clutter of text, try using Menus in email through CSS3 animation to stack up against your content and make your newsletter look clean and easy for users to scan through. By doing this, your subscribers can click and read the content they are interested in.

7) Enhance Your Footer

Footer is one of the most underrated section of an email newsletter. Brands tend to take the footer for granted and don’t pay attention to a good footer design. Essentially, the footer must comply with the Spam laws and must include all the necessary details like the company’s physical address, unsubscribe link, and so on. More so, the footer should also be optimized for mobile devices, and changes in text and links must be done accordingly.

8) A/B Test your emails

What works for one particular email marketer need not necessarily work for someone else. Hence, it is very much important to A/B test your email in a small group before sending to the rest in your email list.


  1. First things first- Design your emails with a mobile-first approach.
  2. Consider designing your newsletter layout with tables, they render well across all email clients.
  3. Use fallback images to support the actual images in your newsletter. This will help your emails render well across all email clients that do not support background images.
  4. Email advancements is the future of email marketing. Try using Menus in email through CSS3 animation to stack up against your content. This will help you fashion a clean and crisp newsletter design.

Author Bio:

Kevin is the Head of Marketing at EmailMonks – one of the fastest growing Email design and coding companies specializes in crafting beautiful email design, PSD to email html services and much more. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage and share insights with fellow marketers. You can follow him on Twitter.

Decoding the Anatomy of a Stellar Email Newsletter Design
Tweet about this on TwitterShare on FacebookShare on LinkedInPin on PinterestEmail this to someone


    November 4, 2016 at 6:10 pm

    Great article Kevin! Love the Monks and wisdom you guys spread. 🙂

    November 7, 2016 at 8:52 am

    Great that you loved this article :)… Stay connected…

    June 3, 2017 at 8:47 am

    Wonderful article kevin. PSD to Email/newsletter conversion is good option for business.

Leave a comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2010-2020 Mailigen. All rights reserved.