How to Choose the Right Mobile Design for Email

There is perhaps no term more misunderstood with regards to email design than “mobile”. There are so many different mobile devices and mobile email clients, and they don’t all handle the same email the same way. All you know is that you just want it to work how it should work, and look good on all devices. There isn’t a magic wand that can be waved to make this so, but there is information that can help you understand what you can do to produce the best outcome for your email.

There are several ways to approach mobile email design. This post focuses on the three main options:

• Mobile First
• Flexible
• Responsive

Mobile First Design

Mobile First design is exactly what it sounds like: Designing an email template to look great on mobile devices first, and then focusing on how it should look on desktop email clients.

This design is a great option for anyone looking for an announcement-type email. Everything is in one column stacked on top of each other. Mobile readers can then scroll from top to bottom looking for things that interest them. This approach is simple and pared down to the essentials.

Modern styles should be used, such as square-cornered, solid-colored buttons. Try to use just a couple images at most, and make sure the images are formatted for phones. What do we mean by that?

Take a look at the photo below:

This image is a great banner image for a desktop email. When this gets shrunk down on a phone, however, you’ll have to squint to read the text on it. This image should not be used in an email with a “Mobile First” approach; after all, Mobile First means you are starting with making it look great on mobile devices, and then worrying about how it looks on desktop email clients later. Here is a different version of that image that would be better with a Mobile First email:

The format of that second image will allow it to scale better and be easier to read on mobile devices.

Some things to keep in mind about Mobile-First emails:

• This design can be narrower, like 400px or 500px wide
• A single column with condensed content
• Headings and buttons that are large, clear and obvious
• Use images sparingly, and make them very relevant and easy to read
• Modern design: clean lines, solid colors

Flexible Design

Flexible Design emails use a wide range of techniques, but they’re all developed to look good on both desktop and mobile email clients without solely relying on responsive CSS media queries. (If you don’t know what that means, don’t worry. It just means that things are set up in a way so when the outer container gets narrower, the contents flow and look generally good all over). A good example of a technique used in Flexible Design is text-wrapping an image. The container can get narrower, the image size can remain the same, and the text gracefully takes up the remaining space. This is as easy as it gets, and looks great on all email clients.

If you embrace Flexible Design, a great tool to use is the width/max-width technique. To do this, just set a width on the outer container to be 100 percent, with a max-width of 600px. Because not all email clients honor max-width settings, to use this technique you will also need to write some conditional statements targeting those email clients – all Outlook, luckily. All other widths are then set to percentages unless a fixed width works better. In the case of the text-image block above, the image would have a fixed width. To cut down on unexpected display issues, a 1-column approach is also suggested for Flexible email designs. Sidebars fall under 2-column, so if you want to use sidebars, you should probably opt for the last option, a strictly Responsive Design.

Many different types of emails can be Flexible, including monthly newsletters, press releases and even announcements.

A few things to keep in mind about Flexible emails:

• Flexible design is fluid, liquid and uses relative percentages
• Looks generally good and presentable on all email clients with few compromises
• This is usually set up with desktop in mind, and making sure people opening it on mobile devices can also reasonably read it with relative ease
• Can be a bit longer with more content to accommodate periodic newsletters

Responsive Design

Both Mobile-First and Flexible Design options also use the Responsive Design technique to optimize elements on responsive mobile email clients. This last option is to solely use Responsive techniques to optimize your email for mobile devices.

Responsive design uses CSS queries to essentially “reformat” how an email is displayed. It is possible to set CSS rules that say essentially “If this email is being viewed on a device that is narrower than 480px, make the fonts become 150% larger and make all sidebars stack under, to become 1 column.

Note that not every email client supports CSS rules, but the most popular ones—the iPhone default email app and Android Gmail app—do. If a mobile email client doesn’t support CSS media queries, then it will usually just display the desktop version shrunk down to fit the screen.

Responsive email designs cover a wide range of content types, from periodic newsletters to quick one-story emails. If you only need to have one column, then a Flexible or Mobile-First approach might be a better fit, as they will have a better shot at displaying your design optimally on the most number of email clients out there.

Some things to keep in mind about Responsive emails:

• Uses CSS to adjust how emails are displayed based on rules such as width
• Works with emails that include sidebars or multiple columns
• Can look great on iPhone default and other email clients, but there are occasionally display issues

In the end, your content and your audience mostly dictate what mobile option you should use. If you need help with your email design or have questions about email communication solutions by Granicus, we would love to hear from you!