Email design has always been a challenge due to the many technical limitations that the various ways of reading emails can present. Now that mobile devices are becoming a more and more popular platform we face a whole new set of challenges. The thing about these challenges is that – if treated right – they can make for better looking and more accessible emails that will work across all platforms.

The following are six tips that will help with creating an email design that is clean and clear enough to be read on smart phones while also looking good on desktop readers.

1. One Email

If you had the time and budget you could create different emails to perfectly fit each of your targeted devices. However, unlike setting up a website to automatically serve up a specific version for the user’s screen resolution, with an email you would need to provide links to your various mobile versions at the top of the email. That’s not ideal and not necessary. It’s actually pretty easy to create one design that will work for both desktop and mobile email clients.

What it requires is designing with a simplicity and clarity that will allow it to work at half its size while not looking too clunky at 100%. One method that helps with this is to design by using a grid system. Most designers do this anyway with their print and web designs but it is just as important with emails. If the elements of your design are made according to a proper grid, their relational proportions will scale down in proper ratio to each other.

With the addition of a line of code in the header of your email called the Viewport Meta Tag, you can assure that the email scales and fits to the width of the iPhone screen.

<meta name = “viewport” content = “width = 320”>

Without this you’ll notice that the view is initially zoomed out too far with a lot of extra white space on the side. This will only help with scaling on iPhone but it doesn’t adversely affect the way it displays on other devices.

 

2. 640 Divided by 2

The standard width for emails have been stuck in the 600-pixel range for a while and that doesn’t look like it’s going to be changing since 600 divides in half pretty nicely. To be more specific, the iPhone has a width of 320-pixels and since right now that device is considered the standard for smartphone screens you may want to design your emails at a width of 640-pixels for a more exact scaling. Also, be aware that an iPhone screen in landscape format is 480-pixels wide.

3. Don’t Divide it Any Further

Since we need to concern ourselves with the narrow width of a mere 320-pixels it is probably a good idea to not try to divide that space any further by adding columns or sidebars to your designs. This is part of the need for simplicity and clarity. Rather than try to cram a lot of information towards the top of the email, you’ll need to think about directing your reader down through the content. One method to handle this is to think about stacking your information into related and easily scannable blocks.

4. Plan for Clumsy Fingers

This might be the biggest new consideration for email designers. We need to accommodate for how fingers are going to navigate the clickable areas of our email on a smart phone’s touch screen. Apple suggests a pixel space of 29×44 (I have no idea how they landed on these numbers exactly) for clickable areas. The Style Campaign blog has an excellent illustration that shows how that actually compares with the average finger. It looks like you might want to go a little bigger than that if you can. Regardless, what may be more important than the actual size of the area is how much padding you allow around that area. Somewhere in the range of 10 pixels between clickable items should give you enough leeway for inprecise fingers.

What this means is you may have to get used to creating larger button areas than you are used to and giving them all a lot of breathing room. That 29×44 button space will need to be about 88-pixels high on the full size email. If you’re someone that prefers small, delicate graphics then this is going to pull you out of your comfort zone (but in a good way). While keeping padding between buttons in mind, a navigation bar with more than four items in it is going to be a tight fit and tricky for some people to click on.

5. The Children’s Book Approach

When it comes to the written content of your email it’s best to think in terms of the bold simplicity of a page from a children’s book. Fewer words. Shorter sentences. Straight to the point. And written in a large, clear font. What is becoming the standard recommendation for mobile is 14-pt for body text and 30-pt for headlines. At that size for a headline, the less words you use, the better.

6. Don’t Stop with the Email

In many cases, your email is going to be clicking through to a custom landing page which of course will need to look good on a smart phone screen as well. A lot of the same considerations above apply, though you will probably be working from a larger starting point than 640-pixels for a web page layout.

Oh yeah, and get rid of those Flash animations, they aren’t going to work on an iPhone. Keep it simple.

Tags: creative, design, how to, Mobile, mobile email, Tips & Best Practices