Join 18,800+ Readers

Designing Quality Newsletters to Captivate your Readers

by Jake Rocheleau

on March 5, 2013

in Resources

Learn how to earn $125 or more per hour as a freelancer - Click Here
Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off

Internet marketers can understand the importance of keeping in touch with readers. The inbox is a nice solution because it does not disturb anyone immediately and readers have the option of checking blog posts in their own time. But if your newsletter is following a generic template you will not likely bolster any interested readers. It is crucial that you design with a sense of purpose for drawing people into your blog.

email newsletter gallery showcase campaign monitor

In this post I would like to discuss a few ideas for creating high quality newsletter layouts. These are often much simpler than full websites and you can reuse the HTML code as templates in the future. Plenty of popular websites follow a similar newsletter design which goes out monthly or bi-monthly. The frequency of distribution is ultimately your call, but design aesthetics follow a universal language which we can all understand.

Important Branding

You will have to determine the content and quality of your newsletter before sitting down to craft a design. This also means implementing a logo and colorful branding to demonstrate the connection to your website. Readers should be able to quickly recognize what your newsletter is about and maybe even a bit about your product or website.

mobile ios iphone app newsletter design

The example above shows a launch advertisement about a new iPhone app named Static. The app icon design is a nice touch which exudes a sense of confidence and comfort. Plus the example screenshot is a quick giveaway that we are looking at an iPhone application. The branding doesn’t need to take up so much space unless it helps with the newsletter interface.

paperli website layout interface pro plus minimalist

Take this other example from Paper.li which was just sent out recently. You can see the newsletter itself blends to appear like a website when viewed in a new tab. However within the email client the layout still fits exactly the same. This is a nice solution demonstrating a small branding effect, nestled into the header area. You should plan ahead for whatever style of branding you wish to equip and fit this into your newsletter design.

External Link References

Another key aspect to email newsletters is the driving force between the e-mail client and your website. Marketing only works well if you are capturing interested readers who may follow onto your website for additional information. These external links will be found all over the newsletter. But there are some key aspects to having these stick out from the background.

Basic text links are great so long as the text sizes are large enough to read. Also consider adding links onto thumbnail images related to different articles on your site. This default behavior is typical in most blogs and it is expected from almost every newsletter, too.

Hoot Suite newsletter layout designs inspiration

In the above example we can see an email I received from Hootsuite just a while back. I particularly like their top header section with the custom background and vector icons. It draws attention to the branding and we can quickly recognize distinct objects in the design. But another aspect which stands out are the UI buttons and the video demo panel.

If you click any of these elements you’ll be linked onto the website in a new tab. The buttons and video screenshot are all images using anchor links to specific pages on the site. The images have been scaled for @2x retina display resolutions and the sizes are cut in half for crisp rendering in all environments. This effect looks fantastic and especially for the video display on mobile smartphone browsers.

Blog-Style Updates

Many times you will be pushing new products and updates about your company into a single e-mail layout. This may turn into multi-column boxes or small icons related to each post. But if you increase the content into a block format it becomes much easier to digest.

cosmetics design newsletter pink blog-style layouts

Take for example the newsletter template design by Pheonix Cosmetics. Their branding is perfectly inline with the header and each new entry has its own box area. The design is setup to differentiate between each of the posts very clearly. I really like this style if you have a series of important articles you want to promote via email. Be sure to include some additional content with each post, along with a follow-up link to your website if applicable.

Footer Details

One final piece to this puzzle is considering what information will be placed at the bottom. If readers are truly interested in your newsletter they will likely skim the content and end up at the bottom of the design. Here you want to offer some basic contact details or links onto similar pages for your website. It is also popular to include unsubscribe links at the very bottom, which gives readers a chance to look over your content before getting off the list.

weave communications newsletter design inspiration dark footer

The gallery example by Weave Web Communications has an extremely straightforward footer area with solid information. You have access to a phone number, company address, e-mail, and social networking accounts. Also the unsubscribe link and “view in browser” links are located in the same area. Also the contrast between colors immediately catches the eye.

Christmas candy cane vector graphics newsletter

Similarly I really like this footer example from the same gallery. Here we can see there isn’t a lot more information, if much at all. The green Wonderland button actually leads out to the main website which is perfect for drawing attention and attracting curious users. If you are looking for quality aesthetics you cannot overlook the importance of custom vectors or graphics.

Since this whole newsletter example is themed around Christmas we can find candy canes and some mistletoe. The contents are minimal at best, but the design is enough to entice some readers to dig further into the website. I feel this example best defines how you may include a small amount of content, but still create a beautiful design to influence more attention.

Final Thoughts

If only a couple of these ideas may apply to your newsletter then I recommend following through with some design styles and building demo layouts. It can be difficult to know which designs are good and which designs are not-so-good. I think the Campaign Monitor gallery has a few outstanding examples to get you on the right track.

But an even better method is to sign up for various newsletters from the most popular websites you visit. Consider registering at websites you may not have even know about! You’ll start receiving plenty of emails and it is a quick process to rule out the wheat from the chaff. Trust your own design instinct and be sure to always keep building.

Powered by Shutterstock

About Jake Rocheleau

Jake is a frontend user experience designer and frequent blogger. He writes about all things web and mobile design. Check out his updates on Twitter @jakerocheleau. Connect with Jake on google+