You've likely already viewed at least one email on your mobile phone today, yet did you know that there are actually three different types of mobile email designs you can receive?
Email opens on mobile devices have risen 512% since 2011, and are only going up. In 2013, 80.3% of mobile email users would have deleted an unappealing looking email, but today, that number has risen a staggering 15%! Think of the pressure your email communication colleagues must feel! For this reason, every DMO must be using some sort of mobile email.
Lucky for us, we have options. When thinking about your email communications, your most important decision is what type of mobile email you are going to pursue. The rest is easy (well mostly).
While taking part in The Email Design Conference by Litmus, I attended a workshop on responsive email, the fruits of which I'd like to share with you — one #emailgeek to another. So without further ado, let's take a look at the three types of mobile email; mobile first, fluid, and responsive.
As I see it, mobile-first design is best suited for a DMO that does not have access to anyone who can code an email template. This is due to a few convenient elements:
- One layout for all screen sizes - from desktop to tablet to mobile.
- Single column design; 320px to 500px - think about how the email fits on all those screens.
- Large text and buttons - at least 13px to match Apple adjustments.
- Generous white space - allows the eye to move.
- Short, concise body copy - link off to your website.
There is a bit of a learning curve when developing mobile email in a fluid design, yet it is certainly worth learning how to create and/or retrofit fluid emails for the following reasons:
- Percentage based widths - no counting pixels required!
- Adapts to fit the screen - any screen.
- Text wraps automatically - making it easy to read.
- Best for DMO's with text-heavy emails.
Of the three types of mobile emails, the responsive email design takes the most amount of coding know-how. The way I see it, you are almost preparing two emails (to an extent). The first set of code is for the desktop and utilizes inline coding skills, while the second is adapted for the mobile version and puts to use your CSS savviness. Unify all this code together in one email, and what displays is the specific version based on the media query and width of your screen.
Here are some other ways you can spot a responsive email:
- Resize content making the images fit and the text larger.
- Hide content on mobile.
- Stack columns.
- Move a two-column design to a one-column design.
In an effort to make things interesting (or more confusing), another responsive approach has been introduced to the email world; Hybrid Coding. This was in response to Gmail and some Android clients not supporting media queries. Frankly, it seems just plain manic to me, as you have fluid tables by default, but you constrain those tables and sprinkle "ghost tables" in the mix just for Outlook. This is not recommended for anyone but the most experienced template builders.
Depending on your level of experience with building email templates and coding, one of these emails may be more appropriate than others. At the end of the day, however, remember that your email is only as good as the content you are putting into it. So don't make it too serious, and have fun. If you wouldn't want to read your email all the way through, then why would you expect others to?
Looking to have some mobile email templates constructed for you? Email email@example.com and we'll be happy to put you in touch with one of or specialists.
Resources: Litmus; TEDC15 Responsive Workshop