Responsive content: What it is and how to get it right

Today, people have a myriad of options for how and where they read their emails and the content linked within them. Depending on where they are or what they’re doing, they can open a new email on their laptop’s browser, the mail app on their mobile phone, or even on their smartwatch, to name just a few places. Add different browsers and mail clients into the mix, and the variations in reading experiences become endless. 

For marketers, this poses a big challenge. Any time they create an email or landing page, they need to make sure that each component, from the header image to the structure of the copy, shows up properly on the device it’s being read on. In short, the content has to be responsive. The risk of not getting it right? People open poorly formatted emails or landing pages and quickly lose interest in your content, or worse, your brand.

To help make sure you’re on the right track, we’re taking a look at what it means to create responsive content, as well as some industry best practices. Let’s get started.

What it means to create responsive content

Responsive emails and landing pages are ones where every element of the design automatically adjusts to the screen size and format of the device it’s being viewed on. The expectation from readers today is that web pages and emails will automatically adjust to their device – whatever it may be – as well as the position the device is being held in.

In the early 2000s, brands would create web content in both desktop and mobile versions so that readers could toggle between the two depending on the device they were using. This required double the effort, as well as an investment in multiple tools and technologies. Today, with mobile phones and laptops of different sizes, tablets, and smartwatches, this approach just isn’t sustainable. Instead, marketers have to ensure that every element they build into their emails and landing pages is responsive to different device parameters.

Some examples of responsive elements

Here’s a look at how responsive elements work in practice:

Images

An image should be automatically resized and cropped to fit within a smaller screen. Not only that, the person creating the email needs to also make sure that the image is still effective in that smaller version, and that the focal point is still framed appropriately. In some cases, to maintain the effectiveness of the content, marketers might choose to have a completely different image for smaller devices.

Text

Copy that appears in four columns on a laptop browser, for instance, should automatically shift so that the text is stacked into a single column on a mobile phone or two sets of two columns for a tablet. Font sizes should also change to ensure readability across devices.

Forms

To ensure that your form does what it’s meant to do – drive conversion – it needs to seamlessly adapt to the device it’s being accessed on. Responsiveness in forms can look like adjusting the size of the input boxes, stacking the inputs in different formats, and minimizing the use of long drop-down menus.

These are all parts of the whole when it comes to creating emails and landing pages, and need to be considered carefully as you conceptualize content that will reach your target audiences.

The cost of not getting it right

Not building responsive elements can lead to expensive mistakes. On the one hand, a sub-par experience might reduce the trust customers have in your brand, and make them less inclined to convert, or open future emails. On the other hand, if they come across a form or email that doesn’t seem to work properly, they’ll assume it’s broken rather than check if it works on another device. At the end of the day, the average reader doesn’t know that their device or browser can influence how they see a piece of content. So the best thing you can do is ensure that they get the best possible experience.

Best practices for creating responsive content

As you take a look at your content creation process, here are three things you can do to ensure your emails and landing pages are as responsive as possible.

Keep track of the devices your subscribers are using

You need to meet your target audience where they are, and that means covering your bases when it comes to the different devices they use. When creating content, make sure you’re accounting for mobile phones, laptops, tablets, and smartwatches. In addition, keep in mind that people view content in different orientations – think landscape versus portrait mode – and on screens that have varying resolutions. What looks good on a developer’s massive second monitor won’t show up as well on a Macbook Air.

Consider the whole experience

If you have a big, high-definition cityscape image on your landing page, does it have the same impact on mobile as it does on a desktop? What about a portrait video designed for social media? These and many other considerations are important as you set your breakpoints between each design.

As you look at what your email or landing page looks like on a large monitor versus a mobile phone or tablet, don’t be afraid to make changes, like removing an image from one version. As long as you’re creating what feels like a holistic experience for each subscriber, they won’t know what they aren’t seeing.

ABT: Always be testing

Testing is a vital part of creating responsive content. You shouldn’t send out an email or launch a landing page unless you know that it’s going to work properly in each device you’re creating for. While a lot of platforms will have a mobile phone or tablet view for you to check your content, we recommend testing on an actual device. Not only will this give you a better feel of how different elements will show up, it will also give you the chance to try interacting with the content (e.g. scrolling or clicking a link) and evaluating whether it’s doing what it’s supposed to.

Pro tip: When you’re testing a landing page form on mobile, don’t forget to check what it looks like when the keyboard is up on the screen. If people can’t see where they’re typing or what’s coming next, they may abandon the form.

Looking ahead

When it comes to creating responsive content, it’s so important to stay agile and on top of changes in the industry. Every year, we see new devices and innovations that are reshaping how people interact with content. We’re just around the corner from people checking their email on virtual reality headsets or digitized eyewear, and that means content will need to be responsive to these new browsing environments. Who knows what’ll come next?

Want to quickly and easily build beautiful emails and landing pages that are always fully responsive? Check out Knak or request a demo.