June 8, 2017

The basics of email design.


Ever made a peanut butter and jelly sandwich? I’d be shocked if you said no. Email design is much of the same.

As an email marketer, your goal is to increase open rates, engagement, and conversions; but are you making it easy for customers to engage within the inbox? Design plays a major role in how people interact with your campaign. If you’re looking for a bigger impact on your audience, it’s time to make your emails more appealing. After all, good design means good response.

It’s time to build a sandwich… er, I mean email.

dancing peanut butter and jelly sandwich

Get Your HTML Bread Ready

There is no sandwich without the bread, just like there is no email design without HTML.

To begin, you need a template to design on. Are you constructing from scratch or using a pre-built template? Either way, make sure to frame your email layout around 600 px wide. Many email clients provide a preview window that’s rather narrow; keep your width low if you want to play nice.

Email Viewport Example

View of an email larger than the ESP’s viewport window.

Keep in mind not all emails render to mobile. With 34% of consumers checking emails on mobile devices, it’s essential to design with a small screen in mind. It’s possible your pre-built template is automatically fixed to be responsive. Those who are struggling can learn about viewport meta tag, and how pasting its code into your HTML will allow you to alter the size and scale of your virtual window.

The more complex your emails are, the harder they are to maintain (kind of like a sandwich, wouldn’t you agree?) Three words to remember ‘til the end of email’s time: keep it simple! When building your email, keep the file size below 100kb. Going over significantly raises the risk of being marked as spam. In Gmail’s case, your email will be clipped after 102kb with a link to view the rest. To keep your email under the limit, avoid attachments, use .png images over .jpeg, and abstain from unnecessary content. Design with simplicity.

Gmail's Messaged Clipped

Need additional direction on HTML email? You can learn more here.

Peanut Butter Jelly Time

Mixing an appealing layout with easy navigation creates a positive experience for the customer which can lead to better response rates for the marketer. Mix the right amount of peanut butter and jelly, and you’ve got some happy taste buds.

But let’s be realistic, not everyone enjoys the same kind of PB&J. Your neighbor adds four more scoops of peanut butter than you could ever dream of. And what kind of jelly are you even suppose to use? Grape, strawberry, rhubarb!? The options are never-ending.

Design is limitless. So how do you focus on a style or technique to produce the highest engagement? If your demographics range across all ages, gender, and location, list segmentation may be your best bet. Speaking to your audience on an individual level will increase the campaign’s appeal.

Typography

Think of your text as the peanut butter.

Use too little, and the consumer is unsatisfied. Apply too much, and they could end up overwhelmed and give up. Find your Goldilocks equilibrium that gets your message across in the most concise manner.

Not much variety is available either. Only until recently has email design accepted web fonts (fonts that are not installed on a user’s machine but still accessible via web.) If you want to enhance the type in your campaigns, add HTML code into the CSS that will allow web fonts to be accessed. Note that these web fonts are still considered extremely basic – Opens Sans, Proxima Nova, Lato – so don’t expect any wow-factors.

In the event you desire a more intricate font header, create an image of the typography and be sure to treat it like any other image in HTML email.

Visual Elements

Images and graphic elements are the jelly on this email sandwich. Depending on what style you pick, the overall experience can alter. Whatever design you showcase, make sure it is on brand.

When featuring a graphic, always include alt tags. Add descriptions of the important visual elements, so the viewer will understand what is missing. Many email clients block images by default as a safety measure. Because of this possibility, it’s recommended to not design an email completely image-based. Leave room for text – 60/40 text to image ratio is key – and you should avoid having deliverability issues.

You want engagement? Calls-to-action (CTA) are the holy grail. After reading your email, subscribers should have a clear idea what to do next. A big, well-positioned CTA will help them decide. Here are a few tips to help you make the buttons in your email appear clickable:

  • Use distinct rectangle shapes (sharp corners or rounded edges) to give enough room for text. The length of the rectangle will correlate with the amount of text used.
  • Design with a contrasting color to the background to draw more attention to it. The smaller the button, the sharper the contrast.
  • Balance the size of the button with an appropriate amount of negative space surrounding it.
  • Clear boundaries and borders to create even more distinction.
  • Don’t over do it. Too many CTAs can confuse the subscriber.
  • Place the button at the end of its corresponding offer.

If you choose to add a graphic element to the CTA, staging an arrow next to the text can further communicate that the button leads to a new destination. Despite all visual elements, a CTA button is nothing without proper messaging. CampaignMonitor recommends using high-performing words, avoiding friction words, focusing on the benefits, and using first-person phrasing.

Email Examples with Visual ElementsExample emails with good usage of visual elements.

Organization

Once you place all elements into your email – text, graphics, and CTA – review your overall layout. Prioritize your content from top to bottom. Include reasonable amounts of white space to improve the readability of your message; the layout will appear organized and clean (keep it simple, remember?). Other elements to include:

  • Your logo – this will tell your subscriber who the message comes from, place it at the very top, so the subscriber will register the brand.
  • A preview link where a subscriber can preview the message in a browser if the email doesn’t load properly.
  • Optional – Add your navigation links from website to the top alongside the logo or social icons in the footer. This creates an even better chance of snagging those clicks.

Example Email with Logo and LinksExample email using additional elements.

Check to make sure your images and links are behaving correctly. Once you hit send, there’s no “undo” button. Test your email before sending and thoroughly test it often. And if you want to discover revenue-impacting issues before you hit send, check out 250ok Design.

Remember, keep your content simple, responsive and easy for readers to scan quickly. Don’t bite off more PB&J than you can chew!


For more email marketing techniques, download our 9 Things Every Email Marketer Must Know About Email.

Author: Alex Eilmann

Alex Eilmann is the senior designer at 250ok. She joined the company in its infancy, acquiring creative and email design best practices by being the driving force behind 250ok’s evolving visual brand.

You may also like...

[Infographic] Global Privacy Relationship Status: It’s Complicated

I recently gave a presentation on global privacy regulations to a post-graduate marketing class and one of the things I noticed while preparing was that even within a single country, privacy is complicated. On a global scale, it is really complicated. For example, Canada has one federal private sector privacy law, three similar provincial laws, […]

The Year in Email 2018

*Update: This article was featured on email influencer Jordie van Rijn’s emailmonday blog! To see it in action, plus a great round-up of other articles and thought leadership looking forward to the future of email, click here.* The Black Friday emails are deleted, marketers’ email lists are checked twice, we pretty much know which senders […]

Poorly designed emails could cost you millions of dollars. But what does that really mean?

We partnered with the smart folks at Lab42 to research what people really think about marketing email. Do they like how they look on their preferred device? Do they prioritize the same design elements you do? If you’re not aligned with your recipients, you could end up sending unwanted, unsatisfying email. You know what that […]

Ready to get started?