Editor’s note: This is part one of a series on mobile-first email development.
Ask any marketer how they want their emails to render on mobile devices and chances are they’ll say “responsive.” What that means is the email should be optimized for readability no matter which email client or device the subscriber chooses to use. Sounds easy enough, right?
Unfortunately, email clients have no set standards when it comes to rendering. Consider Outlook for instance. Certain versions use Microsoft Word to render the email—seriously, Microsoft Word.
Others build their own rendering engine and have their own set of support rules. A good example of this is Gmail, which until a few years ago only supported inline styles. That’s just two examples from a very long list of email clients. With so many variables to deal with, the task of developing emails that work everywhere can seem near impossible.
Email developers have always been in a constant struggle to find that magic technique for the “One Method to Rule Them All.” Back before you could carry around your email in your pocket, table layouts were pretty straightforward.
Once mobile devices started taking off, the need for responsive emails arose. However, building responsive emails relied solely on media queries to do the heavy lifting. Because media queries were (and are) not always supported in email clients, you’re left with the question, “Is some mobile optimization better than none?”
The answer is yes, by the way. Using purely responsive techniques, you may end up with something like this:
Fortunately, that wasn’t good enough for some developers, and the Fluid Hybrid technique was born. Essentially, this provides a way to stack content based off screen size, all without media queries. Now we can cover the spectrum of email clients and do nice things for the media query supporters, but still give the non-supporters a much better experience, hooray!
Mobile-first email development: A development approach that prioritizes the rendering of the mobile layout before the desktop.
The DEG UI Email team decided to take it one step further, which we’re calling mobile-first email development.
The idea behind mobile-first email development stemmed from the lack of support for embedded styles in the Gmail app when using a non-Gmail account (commonly abbreviated as GANGA).
To briefly explain what that means: embedded style blocks (<style> [CSS] </style>) are completely removed from the email code, leaving only the styles inlined in the email. Traditionally, inlined styles were used to render the desktop layout and, in most cases, were not ideal for mobile viewing.
So, the team started playing around with the feasibility of setting mobile styles inline. This required using an embedded-style block to set the desktop styles for the email. Then, for mobile-email clients that support embedded styles and media queries, we needed to overwrite the desktop styles with mobile-media query styles. Now, whether embedded styles are stripped out or media queries are supported, we end up with something much more consistent across mobile email clients:
In theory, mobile first sounds simple enough, but email development is rarely simple. There was a lot of trial and error to figure out the best approach so that emails weren’t left with unnecessary code. On top of that, certain aspects of the technique required email-client-specific hacks to work properly.
At this point, you may be asking yourself if mobile first is really necessary? If we look at recent analytics from Litmus, as of December 2018, Gmail’s share of opens was at 27 percent. With the Gmail app on both Android and iOS allowing subscribers to use non-Gmail accounts, there’s a higher likelihood that your email is displaying without embedded styles.
Our next post in this series will include the five principles of mobile-first email design. In the meantime, consider checking out our email services and creative design services, all of which are needed to craft the right email strategy for your business and its customers.