Designing a Mobile Friendly E-mail: a Mobile-first Approach

Insights / 08.06.2015

Monique Veenstra / Marketing Technology Specialist

In its simplest terms, "mobile-first" means designing an online experience for mobile before designing it for desktop, tablet, or any other device. E-mail design in particular, differs from traditional web design in many aspects. In today's consumer landscape, a mobile-first approach ensures that we are meeting consumers wherever they are: the gym, the grocery store, in line waiting to order lunch, or the hallway between business meetings. Although tailoring e-mail design depends on the individual needs of your audience, here are some best practices to help you get started. 

Design With Purpose 

Before starting a design, it's important to have a clear understanding of your audience and the purpose of your e-mail. Although there are many different kinds of e-mails, generally speaking, they fall within one of three categories: Read Me, Buy Me, and Join Me. Each of these categories has its own set of best practices. Knowing the purpose of your e-mail will inform its content and design. If you are unsure of your audience or the e-mail's purpose, work with your team to come up with a mobile-first strategy. 

Design Mobile-first

Recent studies show that 41% of e-mails are opened on a mobile device, and 75% of smartphone users delete e-mails they can't read on their mobile devices. However, designing mobile-first often seems to be easier said than done. A common mistake is to design an e-mail as you would a landing page. Remember, simplicity is important. Typically, the shorter your e-mail, the better it will perform. For e-mail designers, having some basic knowledge of the limitations of developing e-mails is beneficial. It is helpful to work with your developers and ask questions for additional insight. 

Best practices for designing mobile first e-mails:

  • Use a single column design. In single column design, the content flows downward rather than both, downward and side-by-side. (tweet this tip!)
  • Create an information hierarchy. Keep the most important information above the fold. Information secondary to the e-mail's main purpose should always come after the e-mail's main content and Call to Actions (CTA's).
  • Streamline content so that it is scannable while avoiding clutter. 
  • Use larger font sizes and web-safe / system fonts. Check out this list for more information on typography in e-mail. 
  • Make sure CTA's are touch-friendly. 
  • Link CTA's to mobile friendly Web pages - think beyond the click. 
  • Avoid full-blown navigation bars (remember, this is not a landing page). 
  • Use plenty of negative space. This increases mobile readability
Image courtesy of Fog Creek
Image courtesy of Fog Creek

Mobile-first vs. Mobile-Optimized 

Essentially, the biggest difference between mobile-first (single-column design) and mobile optimized (multi-column design) e-mails is the flow of content. In a single-column design, the content flows downward rather than both, downward and side-by-side, eliminating the need for media queries. This ensures that the e-mail is consistent in all mobile e-mail clients in both portrait and landscape views. Multi-column design usually requires a blend of responsive and adaptive design (in addition to separate mobile and desktop e-mail designs) to achieve a mobile friendly e-mail. Responsive design uses device breakpoints (media queries) to reflow content, while adaptive design uses percentages to achieve a fluid grid. Not all e-mail clients are created equal, and there is no perfect solution for achieving a mobile-optimized e-mail. Having a mobile first e-mail strategy, knowing your audience and the purpose of the e-mail, will help to inform your decision about which route to take.

Image courtesy of Fog Creek
Image courtesy of Fog Creek

Sources and Additional Reading: 

Is Responsive Design Really Effective?
Email trends report: mobile vs. desktop 
Anatomy of a Mobile Email 
Mobile First: What Does It Mean?
The Ultimate Mobile Email Statistics Overview 
Responsive HTML Emails: A Different Strategy 
iOs Human Interface Guidelines 

Insights,User Experience Design

Subscribe to Our Blog

Be the first to get our expert tips, industry insights, Red Door happenings, and more.


Blog post currently doesn't have any comments.