Make Awesome Email

Mobile Email — Design & Code

Many people check email on mobile phones now. Even for “business” brands. So we want to make sure email works on a phone. The most popular email clients on mobile are iPhone/iPad mail, Gmail app on both iOS and Android, and a few different forms of the Android default mail client (this can be rebadged, e.g. Samsung Mail).

For content - consider that people might be jumping into email from Instagram or any number of other apps. On Instagram, you graze on content 2 seconds at a time. Presenting people will 5 paragraphs of text is going to be jarring and hard to engage with.

There are two things you can do from a visual perspective (spoiler: do both):

Make your visual layout fairly simple so it looks ok if the whole thing is zoomed out (single column, larger typography, concise content)

We can use Responsive code (CSS Media Queries) to change the layout of our code so that it works better on mobile. It’s important to consider that we’re changing how existing content looks, rather than showing different content.

If you’re using a template, it might be that a lot of this stuff has already been considered, but you’ll want to be aware of it so you don’t go off piste.

Mobile email rendering

Responsive email is supported in most of the popular places people check email — except when people are using the Gmail App to check a Non Gmail Account. Emailgeeks call this GANGA. You don’t have to though.

In GANGA, you can either show the “Desktop” version of your email, but zoomed out, or you can make your email more flexible so you get a sort of middle ground. This is called the Hybrid code technique. There are some involved things you need to do to make columns stack nicely in GANGA (or more precisely, there are involved things you need to do to stop this code breaking emails in other email clients).

I’d treat GANGA like an end of level boss for now. Deal with everything else first, because there’s more value in that. It’s not a huge percentage of users and if they see an email zoomed out a bit, it’s not the end of the world (You can always design defensively for this by making the font size a bit bigger from the outset).