Modern Trends & Design Ideas for Email Newsletters

As UI design trends have evolved, so have the trends of your friendly neighborhood inbox periodical. A poorly-designed newsletter draws less attention and racks up a hefty amount of unsubscribers.

Good design should work with the content and bring together the message with no ambiguity. This means that design styles vary between different newsletters, and for good reason.

If you’re designing a newsletter from scratch it’s important to spend enough time planning the layout. It’ll help if you study modern trends from professional newsletters to see how they affect content. By studying these trends, you’ll see how they work and gain insight for new ideas to add into your own projects.

More people are now checking email on their phones and tablets with varying screen dimensions. Classic newsletter designs were mostly fixed-width to support the largest audience. To this day fixed layouts are still very popular but responsive design has slowly tiptoed into the newsletter design process.

Client support is really the biggest problem for wide adoption of responsive email design. Most email apps and mobile websites do support media queries. The problem arises with stingy applications like Outlook that command a serious share of the market.

To manage universal support it’s a good idea to design fixed-width first. Then you can add media queries and responsive features to improve visibility in supported clients.

The Lollapalooza newsletter above offers a solid example of responsive design. Their email layout has a maximum width just as you’d expect. But when the window resizes the content shifts and graphics rearrange themselves. Everything is super easy to read and works like a charm at any resolution.

Finding the best of both worlds requires practice. HTML newsletters seem easy to build since they mostly rely on old-school coding techniques. But the addition of new-school media queries does add complexity into the process.

Another fantastic example is the Eventbrite weekly newsletter. In a maximized window the newsletter tops out at 600px width. However if you resize smaller it’ll shrink the margins and reorganize content accordingly.

If you like the idea of a responsive newsletter then check out Ink Framework by Zurb. It’s a free HTML/CSS newsletter library made for building custom responsive templates from scratch.

We may still be a few years (or decades) away from 100% inbox media query support, but it’s safe to say designers are already tinkering and moderately succeeding with this crazy idea of email responsivity.

Most people just want to get through email as quickly as possible. If your newsletter design looks confusing or overly-detailed, you’ll probably lose quite a few subscribers.

Design is simply a means of conveying something whether it’s a juicy magazine column or a new product in the grocery store. Newsletters convey information & they tend to work best when they’re simple and easy to grasp – especially if the company doesn’t have a strong brand.

Notify is a great template on Envato Market which focuses more on email notifications. Obviously these templates are meant to be simpler but the overall design can still be applied to a newsletter.

There’s some room at the top of each design for a logo but not much else. That’s a good way to go when first designing a newsletter. Try to incorporate basic elements like a background color vs a body color, and if needed split the content into 2-3 columns.

Minimalism can also be found in the wonderful Tuts+ instructor newsletter. It uses a fixed-width layout and solid colors matching the brand. Not too commodious with the logo but plenty of room left for content.

Remember that when people are in a hurry, less is more. If possible trim down the newsletter copy and emphasize areas that require the most attention. A great newsletter design should be skimmable and readable to support people who are in a hurry, and those who aren’t.

Minimalism often works best for small newsletters but recognizable companies can garner attention by milking their brand with a more decorative style.

This may seem like a contradiction to the previous section on minimalism – and in some ways it is. But the addition of custom graphics can spruce up an interface when used tastefully. This means it’s real easy to add too many graphics and get too flashy with a design that’d look better simplified.

Learn to assess when a newsletter could work best with minimalism and when it could benefit from a custom design style. Each project will have different needs and as a designer you’ll want to become sensitive to these needs.

Pronounced graphics are meant to emphasize the content and/or the branding. They can also be used to break up blocks of text & add rhythm to the layout. Random graphics that add no value are just clutter and should be removed.

I really like the Panic newsletter for its use of exaggerated graphics and bright colors. The design features horizontal sections and icons floating near paragraphs. At the very top you’ll notice a subtle striped pattern kinda like a sideways barber pole.

This newsletter does have a lot of graphics but they seem to blend into the zany style rather than detract from it. Take note that Panic’s newsletter design wouldn’t be a great fit for Calvin Klein or P.F. Chang’s.

The best newsletters are designed around the content & the company itself.

Artist is another visually-enhanced template made for creatives and creative products. The newsletter uses a hand drawn style with sketch marks outlining boxes, blockquotes, and even buttons.

Bold graphics and styles aren’t the norm for newsletters, but they are popular with companies that can make the best of such designs.

Some newsletters are primarily informational where subscribers are expected to read and move on. But most newsletters also want to drive traffic back to their website. The latter is achieved, assumptively, through links.

But a newsletter with too many links can feel off-putting. A balance should be achieved by adding links to text and photos/icons. This way the whole newsletter doesn’t feel like a big clickable advertisement.

An older example by Smashing Magazine takes this principle to the next level. Their design uses many clickable areas from links, banners, icons, and buttons. They even use 2 different colors for links found in different areas of the newsletter.

This strategy is phenomenal because it breaks up the design without feeling dissonant or fractured. Important links have an increased text size and may even appear bold within a paragraph.

Let’s also take a look at the Dribbble newsletter, which is designed a bit softer.

You’ll find a lot of colors in this design but not all of them are links. For this design color is meant to distinguish certain text from other text in the newsletter. Pink and dark grey are used for emphasis while blue is used for links.

Looking over this design you may feel a bit more at-ease with link exposure. It has far fewer text links but instead attaches links to thumbnails.

It doesn’t really matter how you add links into a newsletter as long as they fit. Remember that each project has different needs and you’ll want to adapt to fit those needs by whatever means necessary (within reason, of course).

Compared to website layouts, few designers are tasked with creating newsletters because they just aren’t needed for every project. But when it comes time to build a newsletter you’ll want to provide the best quality possible.

These trends should help you put content first and build newsletters best-suited for the modern era of inbox design.

For more design updates, sign up for an Envato Elements account. Or head over to the Elements Blog to read up on the latest trends, tips, interviews and roundups!