Skip to Main Content

The Basic Principles of Mobile Email Design

Posted on 9.01.2016

Savvy businesses are realizing that consumers are increasingly interacting with their branded emails on a variety of devices (desktop, smartphones, tablets). This has resulted, of course, in a rush to create email design templates that work on every device and help engage readers/recipients at every step of the omnichannel experience.

Since more than half of all email today is opened on a smartphone or tablet, it makes sense that digital designers learn how to construct these vital consumer experiences. Fortunately, designers that are willing to embrace the concept of responsive email design, and master the art and science of media queries, are able to help move their enterprises in the right direction.

A media query (aka @media) is a special set of CSS styles that serve as conditional statements or dynamic rules. What media queries ultimately do is detect the screen size of a device and then turn on/off different sets of rules based on that information. The reason that responsive design is now the standard is simply because of the possibilities it provides; not only can the hierarchy of content blocks and navigation be changed, but designers can also enlarge fonts, replace colors, switch layouts, scale image, add padding and more.

Responsive email using @media is pretty much from the only way, at least with any confidence, to ensure that the design of emails look great on any device. Mastering media queries, however, doesn't mean that email design will be a benefit to the business. There's much more to realize about the omnichannel experience and the role email plays within it. Let's take a look at a few other basic principles of responsive design for email now so your campaigns will be successful tomorrow and beyond!

+ Design in a Single Column; using tables and the like often force content to be "stacked" in a way that may be out of sequence and confusing to the email recipient.

+ Be Aware of Key Finger Targets; Direct CTA buttons (should their presence be required) and other finger target areas (such as a click-to-call function) should be "tappable" and have a minimum size of at least 44 pixels.

+ Use White-space; A flick of the thumb can send the email recipient to the end of a long email so use white-space and periodic breaks to allow readers to skim through (and stop) with greater ease.

+ Minimal Subject Line Length; smaller devices, less room for a long and detailed subject line. Focus on developing subjet lines that are less than 30 characters (with spaces) to ensure your message is seen.

+ Experience Test Regularly; using the same template frequently can result in code with less of the original integrity, so regularly test the responsive email design to ensure it is compatible across common email clients.


Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up


Leave a comment
    Load more comments
    New code