Mobile Friendly Emails

Design Tip of the Month: August

There are a few aspects design teams hope to include when sending mobile-friendly emails, two of which include being graphic oriented and quick to read.

While old school column tables are ideal and easy-to-read on desktop computers, they often translate poorly to mobile devices.  Small, often-missed considerations such as making columns adjustable vertically when a device rotates, can turn users away, creating extremely small, tough-to-read text.  In the time users must take to accommodate this issue by zooming, they lose interest.  Most phone users don't have time to waste while checking emails.  Once a user exits out of an email and puts his or her phone back in his or her pocket, it's over.  People will not review old emails to finish because new emails are continuously appearing and piling up.


We suggest combating this issue by making sure that your full-width graphics aren't written with fixed pixel width in the HTML.  If your graphics are wider than the mobile device monitors, they will break the page instead of embedding responsively internally.  Images too wide for their screen create scroll bars at the bottom, meaning that users must put in the effort of scrolling left/right in order to view the entirety of the content.  Proper settings on your graphics can lessen any sort of effort users must put in to view your content, easing their experience and interaction with your email.

Although some mail services provide responsive functions that allow columns to fall vertically, when used on mobile devices, it is a challenge to make the look and feel of the original email remain consistent.  A major drawback of vertical tilting is that these templates tend to skew image dimensions, stretching out your intended content.  This leads to a misrepresentation of information priority.  All of a sudden, small thumbnails became so large that they are almost the same size as the header image, misleading users.  We advise you to prioritize the information size.  Among headers, promotions, visuals, and other information, decide which is the most significant, and size accordingly.


Last but not the least, be sure to test your content on various mobile devices.  Viewing and interacting with your emails on a mobile device before sending it out can help you ensure a strong execution!