We’ve already looked at what’s possible in terms of creating a responsive design for your emails, and how important it is when we’re communicating with people. Now let’s take a closer look at how you can make changes to your code that will enable a responsive approach.

When designing a new email template it’s important to consider not just how an email will look on a desktop but also on mobile and tablet devices. Recent stats from Litmus show that the proportion of people opening emails on their mobiles is hovering at about 50% – on JustGiving we’re seeing over 65%.

With people reading more and more of their emails on their mobile phones, many companies are taking the approach of designing for mobile first to avoid a cumbersome translation of the desktop experience. But what if you’d like to simply update an existing HTML template that’s been performing well on desktop?

Using media queries

Responsive emails use something called ‘media queries’ to adapt the layout depending on whether someone is using their mobile phone, tablet or PC. They adjust the size of text, images, and buttons, and can even re-order or hide content on different devices.

Media queries are the best way to achieve different styles for a variety of devices. Part of the CSS family, media queries work like a set of dynamic rules, detecting the device type and screen size and therefore creating a responsive approach across various devices.

The image below illustrates how a media query can adjust the layout of your email to suit the device:

In code, this is translated as follows:

Why not try making a few coding tweaks to an existing HTML and test how it looks? Don’t be afraid to make mistakes during testing, it can take a while to crack and what works for some email designs might not for others.

Which email clients don’t support a responsive approach?

Although we’ve continued to see a rise in mobile and tablet usage, there are still a number of email clients that don’t support a responsive approach. That’s not to say things won’t change in the future, but don’t panic if your email doesn’t look responsive across all devices – some clients just aren’t there yet. So who does and doesn’t support media queries/responsive design?

The main thing to determine is which devices are commonly used by readers of YOUR emails. For example, if you know that a large number of your emails are being read on an iPad, then ensure that thorough testing takes place so that your emails look good and work effectively on that particular device. You don’t want a large portion of your audience to be left disappointed.

What to do when responsive isn’t an option

As responsive design is not yet supported by all email clients, one option is to make some tweaks to your existing emails, such as increasing the font size. It’s a simple but effective way to make your emails easier to read on a mobile phone and, importantly, easier to click on the main call to actions. This won’t make it as visually appealing as a pure responsive design (and can, to a degree, compromise the design on desktop), but at least users have the ability to engage with content on their mobile or tablet device.

Test, test, test

Whether you’re using a responsive approach or not, continuously test how your emails are viewed across certain email clients. That way you can address any issues and make changes where appropriate.

Try and try again

It can take time to shift to a responsive email approach, so be patient and ensure that you give yourself enough time to perfect it. Then go through a process of continually reviewing the email performance, so that changes or tweaks can be made swiftly if you’re not happy with the finished product.

Have you implemented any of our responsive email tips? We’d love to hear how they’re working for you. Leave us a comment and let us know.