Design Considerations for Multiple Email Clients and Devices | How To

Email design follows a lot of the same considerations as web design: many different types of browsers, operating systems, screen sizes, and devices. But where web designers have been able to use modern CSS techniques and client side scripting languages to help them overcome these challenges, email designers haven’t been so lucky.

So, what’s an email designer to do? First, and most importantly, as email designers we need to forget the notion of pixel-perfect design. Then, we need to embrace several design considerations that will help email designs shine regardless of where the email is read.

Note: this tutorial is part of a whole week’s worth of email content on Tuts+ Web Design–check out the Mastering HTML Email learning guide for more!

Layout and Structure

Emails need to be easy to read and understand no matter what device they’re read on so that their message is communicated to the subscriber. Here are some simple design aspects to consider:

The Inverted Pyramid Model

The inverted pyramid model (where the most attention-grabbing elements are placed first, followed by supporting information and so on) is perfect for email designs:

• It creates a hierarchy in the email which makes the content easy to consume.
• The content hierarchy makes the call-to-action clearly stand out in the email.
• It’s one of the easiest types of layout to adapt for multiple screen sizes because all the content sits in one column.

This email from Nest uses the inverted pyramid model perfectly, to help draw the user to the call-to-action button:

The Zig-Zag or Z Layout

The zig-zag layout is a simple grid structure, which can be translated very easily into HTML tables—the foundation of all email designs. This type of layout makes content easy to digest independent of the device the email is read on. On a device with a large screen size, such as a desktop, the zig-zag structure will be displayed. On smaller devices, such as smartphones, the structure can degrade down to a single-column layout:

While this layout type is slightly more challenging to adapt for different screen sizes, there are plenty of methods documented online to code this type of layout.

Check out this email from Tinder which uses the Z-pattern layout to easily walk users through how to set up their profiles, without overwhelming the subscriber with information:

Again, the layout converts to a single-column design for smaller devices.

White Space

White space is often the nemesis of email designers. With such limited space, especially on smartphones, there’s pressure to ensure that white space is closed up. Emails with little white space and content crammed together can be off-putting to subscribers, unreadable, and ultimately unsuccessful.

Embrace white space. Intelligent use of white space can make your emails easier to read and used effectively around your call to action buttons will make them stand out more and get more of those much-needed clicks.

Effective use of white space can even help the legibility of your emails, which is key for subscribers reading your emails on teeny tiny mobile devices.

This email from Squarespace is a great example of how whitespace can elevate your email design and make the email’s message clear to the subscriber:

Typography

Users need to be able to read your emails whether they’re taking a quick glance at it on a mobile device or checking their emails on a desktop. Ensuring the text in your email is legible no matter what screen size your email is read on is critical.

In the time before smartphones, it was common for body text in emails to be 12px. When people started to read email on smartphones, there was a lot of pinch-to-zoom-ing going on just to read the content. This often blew out the design of the email, leaving subscribers with a terrible inbox experience.

Using a minimum font size of 16px for your email’s body copy will ensure that it’s legible, no matter what size screen it’s read on. But it’s not just the font size that’s important. Line height is also a key design consideration to ensure your email is easy to read. A line height that’s no smaller than 1.5 times the size of your font size will ensure your email copy is easy for all to read. So, if font size for your body copy is 16px, the line height should be 24px. You can use the same calculations on headings and other items of text in your email.

Images

Support for even the most basic of HTML and CSS attributes is still spotty in plenty of popular email clients and devices. Take background images for example.

Background Images

Background images are commonly used by many email designers, however, the they’re not supported in all email clients, specifically versions of Microsoft Outlook and GANGA (Gmail Android with a Non Gmail Account).

There is a great online tool from Campaign Monitor that will generate VML (Vector Markup Language)—Microsoft’s proprietary language used for HTML markup in Outlook—thereby enabling background images in those versions of Outlook that doesn’t support background images. Win!

But if you don’t want to mess with VML code and want to stick with HTML and CSS, simply use an appropriate fallback background colour for when background images aren’t supported. And when choosing a fallback background colour don’t forget to take into account the colour of any text that might be sitting on top of the background image.

Using a fallback background colour is also a great way to ensure your emails are still understandable if someone is reading them on a mobile device with a bad data connection. If images don’t load, the fallback background colour fills the space the background image is in.

A technique known as Pixel Art takes this to another level. Known as a form of defensive design, it combines images and background colours which creates mosaics when images don’t load.

Text in Images

Limitations in support for web fonts and strict brand guidelines meant that, historically, email designers had to create images with text in them, so that they could have full control over the look and feel of the text.

Back in the day, when email was mostly viewed on desktop devices this was perfectly acceptable. However, text in images poses a huge problem for folks who view emails on mobile devices. As the image scales, so does the text. It often becomes illegible, creating a poor experience for the subscriber.

The solution? Use a background image with live text on top. Using live text, you’ll be able to control the size of the text on different devices using media queries, which are widely supported in popular email clients such as Gmail and Apple Mail.

This email from REI uses a combination of background images plus text over it for its main message, and it looks great on desktop and mobile devices:

Animated GIFs

The humble animated GIF is still widely used by email designers. GIFs are perfect for adding a bit of interest or excitement to an email. But there’s a dangerous trend of increasingly complicated animated GIFs with longer animations—and that means larger file sizes.

It might be a breeze to download a 4MB GIF from your laptop, at home, on your wired internet connection. But think about those who are trying to download that same GIF on a mobile device using their data network. The image may take so long to download that the reader will simply grow tired of waiting and close or delete your email. And this is especially bad if the main message of your email is in that GIF.

Ideally, you want to keep animated GIF image sizes under 1MB. That means simplifying any animation, keeping the colour range relatively small, and a short duration of animation. You don’t have to be a Photoshop wizard to optimize your GIFs for email. There are tools online that can help you do just that, like this online GIF optimizer.

To reduce the size of your animated GIF try:

• Resizing the image
• Applying a lossy compression
• Reducing the number of frames by removing duplicate frames

• GIF

  10 Ways to Optimize an Animated GIF File

  Martin Perhiniak

• GIF

  How to Compress Animated GIF Files Without Losing Image Quality

  Harry Guinness

This email from Postable features a fun animated GIF, and clocks in at just 303kb:

Call-to-Action Buttons

Call-to-action buttons, or CTAs for short, are a main staple for email. After all, you’re sending an email to notify the subscriber of something and you want the subscriber to be able to do something with the information in your email. That’s where the call to action button comes in.

The trouble here is now folks are not only clicking on your email from a desktop device with a mouse or trackpad. But they’re also using tablets which have styluses. And smartphones, of varying screen sizes, using their thumb or finger to tap with.

Call to action buttons need to be clickable on a variety of different screen sizes, either using a mouse, stylus, thumb, or even finger. Say hello to bulletproof buttons.

Bulletproof buttons use just HTML and CSS to create a 100% clickable button. There are various different techniques you can use to create a bulletproof button. And even a code generator that will create your button for you. They key piece of information for a great bulletproof button is the size. Apple Guidelines recommend buttons should not be smaller than 44px by 44px to ensure they can be tapped on from a mobile device. And this is the standard that email designers have adopted for bulletproof buttons in their emails.

Conclusion

All of these design considerations guarantee that your emails will be read, understood, and actioned on by a larger audience. All goals that any email marketer should be aiming to achieve.