Using screen size and media queries for email marketing

As of September 2016, Gmail began supporting cascading style sheets (CSS) removing one of the final barriers to the use of @media queries for responsive email design

What are media queries?

Media queries are CSS questions ‘asked’ of a device which carry a number of expressions and outcomes which occur depending on the answer. These include device width, pixel density, orientation and more and (along with the !important statement) can be perfect for styling email either for a specific mobile presentation or individually for a host of email clients and services.

Why use media queries?

While inline styling has been used for a while to help email marketers cater to various devices, CSS could potentially save time for email marketers and also improve user experience (UX) across mobile devices and, while we wouldn’t recommend CSS is employed to the same extent in email as it is in web design, the news that Gmail would support it from September 2016 makes it a good time to start implementing it at least for responsiveness.

With 55% of all emails opened (during a Litmus study of over a billion emails), it is more important than ever to ensure that there is a UX of at least equal quality across mobile and desktop.

While it can be time consuming to implement CSS to one off email sends, the vast majority of brands will be using templates which presently rely on in-line styling to control formatting for mobile – for this type of email marketing, media queries can be a fantastic resource, especially if you want to offer multiple devices a unique, and therefore more personalised, appearance.

If you have used templates so far (and are not well-versed in HTML and CSS), you will have, for example, experienced occasions when particular images were not used because they displayed poorly on smaller screens; or there may have been errors that have crept in to email templates and formatting over months of regular updating that have caused time consuming trawls through the code.

Not only can media queries resolve these issues (by, for example, allowing you to substitute secondary images for specific screen sizes in one case and reducing the amount of code it is necessary to change from occasion to occasion in the other), they make the overall code for emails both simpler and more useful across platforms.

How to use media queries

As a CSS function, the media query is a rule applied in the header (of an email or webpage) to content in the body matching the name of a tag it defines (unless it is overridden by inline styling, which is why the !important notation can be, well, important).

The image above, for example, shows a simple change – the body text is defined as blue for the .colored class before it is amended by the @media query of the displaying devices pixel width. By defining the min-width variable as 500px and redefining the .colored class as ‘red’ it ensures that only screens fewer than 500px wide will see the blue font colour.

This has obvious implications not only for font sizing, but image and object sizes – which can be controlled using a max-width value in percentage form to ensure it matches the device size – and even whether various elements (which may not display well on mobiles or impact mobile UX) display at all (as above).

There can also be multiple media queries in order to cover multiple device types (see below) which can save having to use and subsequently override inline styling.

Once you have defined your media queries in the header, what remains is to then ensure that you are using the right classes in theof the email – so that your text is marked with the appropriate class – as, for example, in the example provided by Google where the required text is marked by the p class=’colored’ where the desired change is required.

All of this, while fiddly to begin with, enables you to follow your audience or consumers as they begin to read their email on mobile devices more and more frequently (and sometimes exclusively). It is no longer good enough to have emails which look great on desktop but just ‘work’ on mobiles and tablets, the extra effort to give the same consideration to all devices is soon to become not just an example of best practice but a consumer expectation.

Click Consult is an award winning search marketing agency with years of email marketing experience as well as accredited email coding professionals, to find out what Click Consult can do for your email marketing, contact us today.