At the most basic level, User Experience (UX) design is the practice of making informed design choices based on user behavior. It frequently applies to websites, apps, and products, but there are some fundamental UX truths that can be used by marketers to improve email design.
Applying these principles can increase conversion, drive revenue, and improve brand awareness, so incorporating them into your marketing emails is a no-brainer.
Here are seven UX design principles that you can (and should!) borrow for your emails right now.
✔️ Mobile-First Email Design
A mobile-first design approach means designing for the smallest screen size and then scaling up. Mobile accounts for 46% of email opens1 – likely higher if your users are under 30 – and a mobile-first approach helps keep the focus where it belongs: on the content and the user.
- Design for the smallest device size: 320px with a standard email width of 550-600px.
✔️ Email Structure
Most of the people reading your emails are just scanning them. They read in an “F” pattern, quickly scanning for images or content they’re interested in. If nothing catches their attention in 11 seconds, they’re gone.
According to Tom Tate from AWeber, the average adult can read 250-300 words per minute, so if the average reading time is 11 seconds, the ideal length of a marketing email is around 50 words. Other sources suggest the ideal length is between 50 and 125 words2, but no matter what, the point is to remember that minimal copy = better performance.
- Break your email into bite-sized chunks
- Keep headlines short – ideally under two lines
- Use images, colour, punchy subheadings, or big numbers to create sections.
✔️ Paragraph Styling
Best practices for styling text in your emails:
- Keep body text at 16px. Readability drops when text moves below a 16px font size, which is why most browsers render text at 16px by default.
- Create visual hierarchy by adding bold headings and subheadings. This also makes your content easy to read by adding contrast between body paragraphs and titles.
- Reserve your brand fonts for headlines, and use web-safe fonts for the body. We like Arial, Verdana, Trebuchet MS, and Didot, but here is a more extensive list.
- Use bulleted lists for paragraphs – they make content easier to scan. Limit it to 3-5 bullet points per email so your content is easily consumable.
- Keep body copy dark – only add colour to hyperlinks.
- Limit paragraphs to 5 lines or fewer, and left-align paragraphs longer than three lines.
✔️ CTA Buttons
Marketing emails typically use one of two CTA types: button or hyperlink. Research proves that users prefer to click a button rather than a hyperlink. In fact, one study showed that replacing hyperlinks with a clickable button increased the click-through rate by 127%.
CTA best practices:
- Keep CTA copy short, sweet, and action-oriented, ideally between 3 and 5 words.
- Avoid language that implies effort on the part of the user: download, buy, submit, apply, etc. Instead, keep CTA language benefit-focused: learn, watch, get, etc.
- Make buttons a minimum of 44px high to support mobile-first design.
- Make button colours accessible, and use contrast between button colour and button text. If you need some inspiration, here is a great guide to colour and accessibility.
|Knak makes it easy to create compelling, on-brand, customized CTA buttons. Detailed instructions here.|
✔️ S-Curve Design
If your email design is mobile-first, chances are it’s pretty vertical. This works well on mobile, but it’s not the most visually appealing way to display information on desktop. The solution is to apply an S-curve design.
This layout uses two side-by-side columns: one with an image and one with copy. The image and copy alternate between left and right.
This approach to email design has two benefits:
- Users can easily scan your email
- Your email is naturally separated into digestible chunks
Remember that the average reader is only spending 11 seconds on your email. Don’t waste time! Get to the point, and give them a reason to click your CTA. Streamlined content also increases the likelihood that users will open your email next time.
- If it’s not 100% necessary, edit it out. Remember, 50-125 words is the goal.
- Add breathing room by increasing the amount of white space. This can be done by adding padding between sections, headlines, subheads, and body text to improve readability.
- Test your email’s layout by sending yourself test emails. Some email providers like Outlook do not recognize contained padding, which will make your email look weird unless you catch it ahead of time.
✔️ Reduced Email Load Time
Large emails tend to land in the spam folder, and emails larger than 102KB will be clipped by Gmail.
Best practices for reducing file size:
- Keep images under 1MB
- Crop unwanted white space from images and use padding instead
- Avoid using text that’s baked into images. Instead, use HTML text, which loads faster
- Avoid hiding/revealing different content for mobile vs desktop
- Limit the number of custom web fonts that are loaded into the HTML
- Move some of the content from the email to a landing page
Make sure your emails are the ones your subscribers get excited about. Use these UX-based tips to drive click-through rates, brand loyalty, and increased revenue, and if you need further inspiration, check out A Balanced Approach to Email Design Trends.