While the percentage of emails opened on a mobile device varies by industry, the overall average is 49 percent, which is a 500 percent increase since 2011.1 Within the financial services industry, mobile email has increased signicantly over the past few years and currently accounts for 31.5 percent of all email opens.2
So what does this mean to financial services marketers?
Standard email designs are intended for viewing on a desktop computer versus a mobile device. Sometimes they include columns or navigation that is best viewed at a larger size. In general, these types of emails simply shrink to the size of the device on which they are viewed. It is now essential that financial marketers adopt a mobile email design mindset and develop mobile design strategies to ensure account holders will have a positive viewing experience across their devices.
Mobile Email Design Mindset
Having a mobile email design mindset means learning how to visualize mobile email rendering and designing email for that device. Essentially, after understanding mobile parameters, there are two approaches designers can take: 1) they can design what is commonly referred to as “mobile aware” or “mobile friendly” email, or 2) they can use responsive design.
Let’s review each one in more detail.
Mobile-friendly email design is created with mobile device viewing in mind and follows best practices for smaller screen sizes, legibility and easy click-through capabilities. More specifically, fonts are set a bit larger and buttons are given more space to make them easier to touch on a smaller screen. This design approach intentionally eliminates things that might be difficult to read, such as a navigation menu. A banner might be a table cell with a background color that can change width versus an image that would be tiny on a mobile device.
|Single design that works across all email viewing environments||Provides a one-size-fits-all mobile experience|
|Does not require any media query support||Slightly compromises some device experiences|
|Less resource intensive to produce||May require horizontal scrolling on some devices|
Responsive design includes special code in the header of an email that will determine the device on which your email is viewed and adjust the layout accordingly. Fully responsive email designs should include a desktop version at 600 pixels wide and a mobile version at 320 pixels wide.
|Provides a custom mobile experience when @media support is present||Not fully supported across all devices or email clients|
|Consistent experience across a wide range of devices||HTML coding requires a greater level of complexity|
|Rearranges or hides specific content||Incremental level of effort and resources for production needed|
|Provides the ability to collapse content areas with a finger tap|
No matter which type of mobile email design approach you choose, it is best to keep things simple. Due to the lack of standardization across email clients, it’s difficult to predict how a complex design will work for your email recipients.
- Designs should be approximately 600 pixels wide.
- Keep it simple by using a baseline grid and avoiding complicated elements.
- Anticipate that images can be blocked by email clients, and background images should be avoided as they commonly fail to load at all.
- Image-heavy emails perform poorly.
- Use web-safe fonts such as Arial, Verdana, Georgia and Times New Roman, which work well across all platforms.
- Design with mobile in mind. Increase font sizes in the body of your email to 14 pixels or larger, and make sure there is enough white space around your buttons for easy clicking.
1. Litmus. (June 2015). “Email Analytics.”