Emails: mobile or bust

With communication moving more and more into digital, the importance of emails is only growing (even if we believe they will be eventually phased out), but their marketing levity isn’t going anywhere anytime soon. When thinking about well designed emails, we think HTML over plain text more often than not.

Designing for an email is like designing a one-page website, but with a few key differences that will make the difference. Whilst needing to keep in mind that an email is a push in communication rather than a pull like a website.

I’m pretty sure all of us reading this, know what it feels like getting 00s emails everyday at ridiculous rates, so to actually get anyone to look at your email is a challenge in itself, but its the first second or two when your email is opened that will decide if its a success or a failure. By keeping that at the centre of your mind and following some of the tips you’ll do well.

Mobile or Bust

Mobile devices are one of the most common access points to the internet all over the world, especially in Asia where more people own mobile devices than actual computers. So designing something that either isn’t responsive or won’t work on mobile, will alienate quite a big market for the push.

Think of it this way. If a user checks out an email on their mobile and it doesn’t look right (images overblown, text the wrong size) whats the chance that they will go back to their desk at work and look at it properly. If it looks rubbish, they’ll just delete the email and its game over.

There are two ways to go about designing for mobile. You can create emails that resize to fit the readers screen, which will be perfect for the more minimalist and simple designs. Or a responsive email that will just adjust itself to different screen sizes.

There are advantages and disadvantages to both. Emails that resize are fairly simple to code and will tend to work on virtually any device. But they work best with reduced email designs that can be viewed on significantly smaller than desktop sizes. A responsive design on the other hand is much harder to code and doesn’t exactly work with every browser, but it does work on every resolution and reduces the visual workload.

Responsive Design

Responsive designs are likely to be the most practical for the majority of work that will need to be done.

Here are some tips that you should keep in mind when designing these emails:

1. Layouts should be consistent and narrow, ideally in the range of 500-600px (generic sizing). This will make them both readable on both desktop and mobile devices, with less chance for layout to go all wonky when its resized.

2. Font sizing is extremely important. Due to the way responsive design works, you need to select a font that can be downsized to the ‘minimum recommended size’ for whatever designing your working on. As an example iPhones tend to tail of at around 13px.

3. Clickable areas need to be tap-friendly. By that we mean making them big enough and isolated enough from other links to people with bigger fingers can still utilise the website without wanting to throw their phone against the wall.

4. Using something like ‘display:none’ to reduce the clutter on mobile layouts will really help improve the impact of the email design. As what is user friendly on a mobile or desktop can quite easily become highly annoying.

Considering typography

While a lot of designers will rightly or wrongly focus on the graphical content of the HTML emails, the typography is actually even more important on email than on many websites. After all, considering how many email clients prevent images from loading, it wouldn’t be a bad idea to make the type really stand out.

Consider using large type sizes for better legibility regardless of screen size Also keep in mind line lengths on various screen sizes, I’d suggest to keep about a 50px border from the screen, so its guaranteed to be legible. Be sure to use a hierarchy throughout the email, for the best results.