Email Marketing: Getting to grips with @mediaquery

As a designer, there are a few skills I’m required to have. Coming up with new and exciting ideas, bringing those ideas to life and generally making things look pretty. However, never in my career have I had to showcase psychic powers and predict the future to be able to do my job, that is, until I started working with @mediaquery.

What is @mediaquery?

@mediaquery is a relatively new feature of CSS which can be used to dictate how a website or email renders on particular sized screen such as a mobile device or desktop computer. I won’t bog you down with the details, but basically the way @mediaquery works is that the code is hidden in the email and only comes to life when it detects that your screen is below a certain size. As soon as it detects that you’re using a device with a smaller screen, it switches on the hidden code which manipulates and overrides elements of the email, changing its look and structure to suit the smaller screen.

Email for mobile is still in its infancy but never-the-less it’s already taking a huge chunk of the email market share (roughly 1 in 5 emails are now read on mobile), which therefore has increased the importance for us to have a greater understanding of the subject.

The benefits of @mediaquery

Creating an email that works effectively on a mobile requires much more thought and planning than simply shrinking a normal email to fit a mobile screen. There’s a science to it just like there is for desktop emails. You have to take into consideration that the way people read emails on their mobile is a different experience to doing it on their desktop computer, which will understandably lead to differences in design. For example, the buttons need to be bigger and easier to press when considering touchscreen.

So that means that for every email we build, we’ll have to design one version for desktop and another version for mobile. However, with the help of @mediaquery, that doesn’t have to be the case. Thanks to @mediaquery we can design and build an email that will look and work one way for desktop and then magically transform to cater for mobile.

Our first @mediaquery brief

My first opportunity to use @mediaquery came recently when the wonderful people at moneysupermarket.com wanted us to rework one of their existing email designs so that it worked across both desktop and mobile platforms. I had spent a lot of time at Red C researching this kind of job, but this was the first time I’d be putting my knowledge to the test. So it was fair to say I was a little bit nervous.

A job for Mystic Meg?

The most challenging aspect of the whole process was to predict how it would look for mobile. I had to bring out my crystal ball and literally make an educated guess as to how it would look when displayed on a mobile. So as I was tweaking the email design I was constantly going back and forth between both desktop and email designs, adapting little things that would make the build process easier.

The width of a mobile email is pretty much half the size of a desktop email. However, that doesn’t mean it was as simple as making everything 50% smaller. For example, some elements such as the logo, needed to stay the same size, whilst some things needed to be reduced by 50%, others by 30% and so on. Confused? So was I! Luckily I had a calculator to save me.

Design by code

Once the design was signed off and the build process began, everything became much easier. I could see the email from a technical point of view, which meant I could instantly see whether something would work or not. Luckily, moneysupermarket were happy with me to make design tweaks even though I was at the building phase. They were a great bunch to work with and seemed as interested in learning how to use @mediaquery as I was.

Usually with emails, once the build is finished we do a few tests in Litmus to check that the emails look alright and aren’t broken in any way. However, due to the complex and unpredictable nature of how the email would render in mobile form, it meant that emails were tested at every stage of the build. Once I’d built a section, it was tested again and again, until it was finally doing exactly what we wanted. It was just a case of finding what was broken and what was causing it to break.

A happy medium

Rendering an email so that it works across a huge range of desktop and web email clients is always tough going, but also having to make it work across a range of email clients felt damn near impossible. It involved a lot of fixing one thing for one client and breaking something else in another. It was a generally a process of trial and error.

One of the main hurdles with mobile email clients is that because they’re still relatively new, they all render emails in slightly different ways as there is currently no standardised way for designing them to work consistently across all mobile devices. Then to add to the problem there are also a few differences when it comes to desktop and mobile clients. Mobile email clients seem to have a few features and capabilities that aren’t available in desktop and web email clients. These are all things we have to consider at the start of an email campaign.

It’s your call

The choice you have to make at the start of the process is whether you want to design an email that can work across both desktop and mobile or whether to design and build two separate emails (one for desktop and one for mobile). There are pros and cons with both methods, so it requires some research and planning before deciding which route is best for your customers.

If @mediaquery is your decided route, then what you must consider is that it requires a compromise in the design. You can’t go all out on a desktop email and expect it to magically transform into the perfect mobile email. You have to find a middle ground that makes the design practical but still effective enough to work across both media. This does not necessarily mean that your email will look dull, as proven brilliantly in this email newsletter showcased by Campaign Monitor.

Another thing to consider with the @mediaquery route is that the design and build process will take a lot more time and thought. You have to bear in mind that it’s not just a matter of design, it’s a giant jigsaw puzzle requiring a thorough understanding of HTML and CSS. And speaking of code, expect your email to contain around 3 times as much code as your standard email, which in turn increases the file size of your email. This is not ideal for someone who is trying to load their email on a mobile device using 3G. That’s why I would never say that @mediaquery creates an email that is “optimised” for both desktop and mobile. It’s optimised for neither but that doesn’t mean it can’t work well on both. Like I said, the technology is still in its infancy and there is no right or wrong way to produce a great mobile email – just smarter ways of working. Inevitably, over time the technology will improve and the process will become a lot easier. That’s what I’m hoping anyway!

A happy ending

Given all the blood, sweat and tears shed during the whole process, it was a fantastic learning experience for us at Red C with a big thanks to a fantastically understanding and helpful client in moneysupermarket.com. We did manage to pull it off (twice in fact, with 2 different emails) and with a great amount of satisfaction.