In a time of mobile, many online resources had to transform and adapt to new conditions. E-mail, as one of the oldest forms of transferring information digitally, has had its small revolution too. Until this newest trend became popular, it was only a small matter of sending text messages or HTML messages for a few desktop and webmail clients. Now, mobile is the biggest target group. How should a person deal with getting nice-looking emails on every device and client?

According to statistics from Litmus, one of the best-known email testing service providers, over half of the active email clients worldwide are mobile.

1. Apple iPhone 34% +1.17
2. Gmail 15% -0.88
3. Apple iPad 11% -0.07
4. Google Android 10% -0.3
5. Apple Mail 8% +0.25
6. Outlook 7% +0.02
7. Yahoo! Mail 3% +0.01
8. Outlook.com 2% -0.11
9. Windows Live Mail 1% -0.06
10. Windows Mail 1% +0.42

The source with the current data is here.

Of course, there can be differences in a particular region, but the trend is undeniable. People are mainly checking their mailboxes through mobile devices, while the desktop mail clients are handling less and less. Of course, this is not one of those articles where someone claims that the death of desktop. The desktop is fine and it will be fine for an unforseen amount of time. Why? Mainly, because it is still a great way to communicate at the enterprise level or in many other cases, like across different time zones. Or maybe it’s just that emailing someone is more official than, for example, using some instant messenger. So, if you are wondering if we should still care about desktop email clients, the answer is yes; we have to.

But, do we have to design email for mobile differently than that which works on the desktop? Most mobile clients are able to pinch and zoom any content, but… Have you ever got an illegible email on your mobile device? I have and I don’t like to scroll all over the place just to find useful information or missing something important. Probably, many other users feel the same and we, as software developers, should deal with every inconvenience to provide the best user experience for our products and make human-computer interaction as smooth as possible.

What is important?

Of course, if your emails are only text based, you don’t have to worry about it too much. But sooner or later, every company needs something more than plain text with simple styling. And here the problem begins – there are so many differences between just the desktop email clients, that we already need a complex approach for this task. It’s even needed for Microsoft Outlook alone, because its versions differ so much in rendering engines; some of them are based on Internet Explorer, and a few others use the Microsoft Office Word engine. When we take into account every other important email client from mobile and desktop, the list of limitations and requirements gets quite long. To be able to deal with each issue we have to stick with simple HTML and inline CSS. We can’t base it on a standard and popular box model (div elements) with floating and many other features. We have to go back in time and use HTML tables like in the old web pages. Text headings and paragraphs are treated differently by many clients, so semantics are not a priority in email templates if design takes first place.

Good practices

Not only do we have to pay attention to the HTML markup, to make our email perfect. There are a few guidelines we cannot ignore. Some of the rules are already important at the stage of designing a template. In general, responsiveness in emails is made by preparing two different behaviors of content; fixed for desktop, and fluid for small devices. This methodology is called hybrid templates. Bearing this in mind, our graphic designer needs to know that we will fix the main content in a container width of no more than 600 pixels. There are a few other tips for mail template designers:

• Avoid mail based on images
• Add ALT attributes to images to provide content if graphics are blocked or unavailable
• Choose the right email max-width (550-600px) and font size (14px)
• Simplify design if you can; email is not a website – it has more limitations
• Stay with a high text to image ratio
• Add an unsubscribe link
• Do reverse engineering of popular and nicely done templates, like Cerberus

Regarding the last point, many developers have already struggled with email templates. They have developed and shared many useful resources, so we can learn from their mistakes and thanks to that, speed up the process of making our own template.

The second part of our article will appear soon. Stay tuned!