If you have a mobile device like a smartphone or tablet, chances are you’ve checked your email on it. There have been studies and surveys on this topic, but in general it’s pretty clear that we don’t always sit at our laptops or desktops to check our email anymore. While this movement is great for those of us reading the messages, it has provided a few challenges for those designing the emails to make sure they look good on a variety of platforms. Not only are more and more people checking email on their mobile devices, but we’ve also found it’s extremely important to make sure that those emails render right on those devices—the first time.
So how can we do this? There is a handy property of CSS called @media, which can apply specific styling rules to your email (or website) depending on which device is displaying it. While things may change in the future, right now you need to specifically declare, based on certain criteria, each type of device you want to target. For different devices, the criteria will be different; some will rely on a maximum screen size, others on a pixel ratio, etc.
Let’s take a look at an example:
@media only screen and (max-device-width: 480px) {
body {
background-color: green !important;
}
}
@media only screen and (-webkit-device-pixel-ratio:1.5) {
body {
background-color: purple !important;
}
}
In this very basic example, these two different queries target different devices. The first one is picked up by an iPhone 4S, the second by a Samsung Galaxy S2. So when viewed on two different devices, different properties of the email are displayed, as seen here:
Syntactically, you might notice the format is that of a “style sheet within a style sheet.” (As an aside, the @media component can be used for other media, too, such as print.)
When it comes to ClickDimensions, you can easily add these calls into our Free Style and Custom HTML email templates. (This is not currently supported with the Block Editor.) All you need to do is view the direct HTML of your template and add this code as you would with a web page. Add your opening HTML tag if applicable, and put this code inside your style tag:
<html>
<head>
<style>
@media only screen and (max-device-width: 480px) {
body {
background-color: green !important;
}
}
@media only screen and (-webkit-device-pixel-ratio:1.5) {
body {
background-color: purple !important;
}
}
</style>
</head>
<body>
/*Your email template content goes here.*/
</body>
</html>
The rest is up to you!
For more information about responsive design, check out these resources:
- ClickDimensions – Best Practices for Emails for Smartphones and Mobile Devices
- ClickDimensions – HTML Email Best Practice Recommendations
- ClickDimensions – Secrets to Creating Great HTML for Email Marketing
- Responsive Design with CSS3 Media Queries
- CSS Media Queries for Targeting Mobile Devices
Powered by WPeMatico