Welcome to the Target Internet guide to CSS media queries for digital marketers! Inevitably, this article will feature some technical language, but we urge you to read on regardless, even if you know very little about web development. Learning about media queries and their mechanics is useful for anyone who wants to enhance their understanding of how digital marketing works – particularly responsive design for web and email.
One of the first things young coders learn when they start studying web development is that HTML (hypertext mark-up language) is the language that defines the content of a webpage, whilst CSS (cascading style sheets) defines how that content looks. To use a slightly odd analogy, CSS is to HTML as clothes are to a body – an essential consideration before going on show in public.
Media queries are a module of CSS3, the latest iteration of the CSS language. They affect the way a piece of content is styled according to parameters of the device or browser which is being used to render it. These include:
- Viewport width and height
- Screen orientation (landscape or portrait)
- Resolution
- Device aspect ratio
The possibility to change the way web content appears according to these and other factors has afforded developers the opportunity to optimise their content for a greater share of their audience than they have ever been able to since the mid-noughties, when the advent of smartphones kicked off the diversification of web-ready devices.
How do media queries work?
@media screen and (min-width:700px) { … }
There are two key components to a media query: media type and media feature expressions.
Media type refers to exactly what you might expect – the type of media on which the content is going to be displayed. Numerous media types are supported by CSS3, but there’s only one that we really need to concern ourselves with: ‘screen’.
Media features, meanwhile, are device features like the ones listed in the previous section – screen size, orientation and so on. A media feature expression tells us something about the media feature, e.g. max-width: 900px.
The multi-coloured line of code at the top of this section shows the constituent parts of a media query. The section in blue – @media screen – specifies the media type “screen”. In green we have a media feature expression, specifying a minimum browser width of 700px. If both the media type ‘screen’ and the media feature min-width:700px are true – that is to say, if the device used is a screen and the browser width is 700px or more – the media query will deliver whichever CSS styling instructions are placed inside those yellow curly brackets (we’ve left them empty here for the sake of clarity).
You can extend a media query to involve an additional media feature simply by using an ‘and’ operator, so our example becomes:
@media screen and (min-width:700px) and (orientation: landscape) { … }
This new example would apply formatting on condition that the content is being rendered in a 700px+ screen display, in a landscape orientation.
How digital marketers are using media queries
Digital marketers use CSS media queries to create a tailored web content viewing experience catering for every likely viewpoint – every screen size, orientation and resolution. The objective is to create optimal experiences for smartphone, desktop and tablet, however the device is being used, all within the same content version (i.e. no separate webpages for desktop and mobile).
For our purposes, the most important media feature is viewport width. Let’s take a look at how this feature can be used to optimise a marketing email:
Feast your eyes on this stunner of an email from Uber; a real masterclass in how to execute simple and effective responsive email design.
CSS media queries play an important role in delivering the email’s content optimally for each screen size, using the screen-width media feature.
Here is a media query used to determine how the header part of the email appears:
@media screen and (max-width:699px) {
.t1of12, .t2of12, .t3of12, .t4of12, .t5of12, .t6of12, .t7of12, .t8of12, .t9of12, .t10of12, .t11of12, .t12of12, .full {
width: 100% !important;
max-width: none !important
}
Some of this code should look familiar; some will probably not. Let’s break it down:
- @media screen – sets the media type for the query
- (max-width:699px) – sets the max-width media feature. All views of 699px and under will be affected by the query
- { and } – the code contained within curly brackets is the CSS styling instruction to be applied if the media type and media feature(s) specified in the media query are both true of the device/browser used to view the content, i.e. it’s a screen displaying anything up to a 699px view width
- .t1of12, etc. – much of responsive web design operates using responsive content grids, in which an element (such as the header section of Uber’s email) can contain anything from 1 to 12 columns. The idea is that as the screen width gets greater, some grid squares from each row combine to form longer rows within a shorter, wider version of the grid. Go to the Target Internet homepage, click the Restore Down button at the top of your browser and drag the window from the bottom-right corner to see this effect in action ‘.t1of12’, ‘.t2of12’, etc. are column width specifiers, used here to adapt the width of the content at different viewport sizes.
- width: 100% !important – this instruction causes the content to extend to fill the full width of its parent element.
These are the essential components of a media query in action: a media type, an expression of a media feature, and a responsive CSS instruction. You’ll need to be an experienced CSS coder if you are to create your own media queries along these lines, but understanding the components of a media query and how those components work together is a valuable foundation.
Going deeper: using other media features
So far we’ve focused mainly on screen width – but there are several other media features that can also be used to great advantage in your media queries. Here are some quick tips on how to use them:
- Resolution – use a media query to display simpler, bolder visual content to devices with lower screen resolution.
- Orientation – optimise using the same responsive grid principles applied in the Uber email example discussed previously.
- Colour (spelled ‘color’ in a CSS context) – refers to the device’s number of bits per colour component. If high colour depth is crucial to the experience of your content, consider setting a CSS media query to deliver an alternative version if the device bit count is too low.
How to implement a media query – for developers and content executives
As you may have gathered, implementing media queries requires coding knowledge. Nevertheless, understanding how media queries work is desirable for any digital marketer, as this will allow you to communicate your design ideas more fluently to your web developer colleagues, and also to mould those ideas to the coding techniques available.
Like any other CSS feature, media queries belong in the content’s CSS stylesheet. We recommend either listing all of the CSS queries for a piece of content at the bottom of its stylesheet, or inserting each one right beneath the item of content it styles. If in doubt, ask your web developer.
If you are not responsible for coding, but you are in charge of planning user experience of a piece of content across device types, you can help your developer to achieve the desired effect by providing a clear, precise specification of how content should be displayed according to different media feature conditions. For example:
Image A: display if screen width is equal to or greater than 600px
Image B: display if screen width is equal or greater than 400px
And don’t worry, if there’s something wrong with your instructions you’ll soon hear about it.
Haven’t media queries been around for years already?
Media queries emerged in the early noughties, fulfilling a range of functions including formatting web content for printing (e.g. by turning web copy black and backgrounds white when a webpage is sent to print.) But the real breakthrough moment for media queries came in 2012, when they became the new web standard for responsive design with browser and W3C support.
As of 2016, web queries are a fundamental component of quality web design. They received another boost in September, when Google announced that Gmail would finally start supporting them, removing a long-standing obstacle to media queries emerging as a ubiquitous web design mechanism.
Media queries in responsive templates
Many of the world’s leading email marketing tools use media queries in their responsive email templates. When the news broke that Gmail would now support media queries, MailChimp wrote a blog post explaining the significance of the update: “Gmail will [now] allow the use of media queries, which means fewer wild workarounds to make MailChimp’s emails behave consistently on mobile devices. Now, it’ll be easier to better optimize email layouts for a variety of devices and screen sizes.
“Although our templates were built to work around Gmail’s past limitations, they’ve always included the code for which Google is now rolling out support. Which is to say: campaigns will render more consistently across all clients.”
Why using responsive design is important
Our regular readers will have heard us say this several times before, but we’re not afraid to say it again: creating a great experience for mobile and tablet users is absolutely essential. Why? Because a huge number of web users use mobiles and tablets.
According to research by comScore, as of December 2015, 76% of people online access the internet via a mixture of devices, including desktop, mobile and tablet. Just 11% are using desktop only, which begs the question: can you really afford to deliver sub-optimal content to as much as 89% of your potential audience? Of course there will be many within the multiple-device majority who do use their desktops to access your content – but there will also be many who use something else.
It’s not just web users who want your content to be compatible with multiple device types; it’s Google too. Since the so-called ‘Mobilegeddon’ algorithm update of April 2015, Google has been allotting extra points to mobile-friendly sites in its search result calculations – and the company is open about the fact that responsive design is its preferred method of mobile optimisation. You may find it useful to take a look at this guide to Common mobile web design mistakes from the Google Webmasters hub.
Media queries can be used to facilitate a number of successful responsive design tactics, including:
- Extending content for larger screen sizes – e.g. adding extra copy or images
- Enlarging content for larger screen sizes
- Concealing mobile-specific content after a certain minimum screen width is reached
Looking ahead, we would urge you to use responsive design and media queries whenever you create a website or marketing email, whether that means learning and creating the CSS yourself, or providing well-informed direction to your web developer.