5 Responsive Email Fails You Need To Avoid

Back in the past, when I received an email I couldn’t read properly, I would blame my phone, try and shake it or even go for the classic, yet still miraculous “close and reopen mail” technique.

Nowadays, how many emails do you receive a day? 20, 30, 100? Today, when I get an email with a dodgy display, cropped images and blocks aligned  weirdly where it resembles a Picasso, I just click ‘Delete’. And I’m not the only one: 80% of people out there would delete an email that doesn’t look good on their mobile device.

So, in a world ruled by mobile, where people like me undervalue all the effort you put into your newsletter and campaigns, which just get deleted without a hint of remorse, responsiveness is the key attribute.

However, coding a responsive email can be confusing and certainly hard to learn. Lucky for us, there are alternatives to turn the design of a responsive message into an intuitive task. When designing your responsive emails there are a number of things to look at out for:

1- Alignment is key

Sometimes, when designing an email, we get all artistic about our multiple columns, amazing backgrounds cat gifs and pictures, only to see them ruined when the messages are opened on tablets and smartphones.

Opting for a single column layout will prevent you from having to rearrange the design as the screen size gets smaller. When it comes to mobile devices, simplicity is your ally!

Have a look at some of these layout fails, taken straight out of our own inbox!

2- Images to text ratio

Images (and GIFs) are a great way to break up big chunks of text. However, images can potentially be a double-edged sword. Pictures that don’t render properly can appear too big or too small on some devices, ruining your killer background or making your banner unreadable.

Similarly, watch out for images that are too large and don’t load properly when using data plans without 4G. Edit and optimize your images for the web before uploading them and don’t forget to add ‘Alt Text’.

3- Calls-to-action

Without an obvious instruction to recipients, it’s hard to invite them to your website or product pages. This is where we need to get clever with where we add links to our email campaigns.

That’s also why calls-to-action and links need to be easily identifiable and perfectly targeted. We need to think of the size and the position: not too many, not too cramped.

Make primary calls to action as buttons so on phones and tablets it could be easily tapped with a finger, and we all know there are pretty big fingers out there! Try and be creative with other areas to use links such as secondary CTAs within the text, or turning images into clickable links.

4- Watch your text

More than half the emails we send are opened on mobile devices, but phones aren’t the best place for reading large amounts of texts.

Before responsive became a standard, emails and websites which were mobile optimized would just be cramped to fit the screen, without out making further changes to the layout, content and images. Nowadays, we have learnt the importance of optimizing these elements to ensure our messages are looking their best on any device with any sized screen.

Text is one of those things that we should adapt to ensure people opening our messages on the go don’t get overwhelmed by small font and long paragraphs.

However, there are still emails out there that look like chapters in a novel. Let’s face it, no one is going to read this:

Tip: Provide a snippet of the text and invite recipients to read the full article on your blog.

5- Hierarchy and priorities

On a web browser, there are different techniques to catch readers’ attention: using colors, eye-catching pictures, stylish fonts etc… But when it comes to other smaller screens, such as smartphones, hierarchy needs to be clear to ensure your readers get a feel of your key message, even if they don’t scroll all the way down.

With people receiving so many emails every day, the competition is hard and it’s becoming increasingly difficult to get people to read through your whole email. That’s why we should always design our email in order of importance, with the most relevant elements first.

EXTRA!

We’re nearly there: we’ve crafted a beautiful email and tested it on various devices, we are ready to send… Hold on. What about the landing pages?

Even if we’ve done a great job and we have managed to captivate our readers, our efforts can still be ruined by a non-responsive landing page! Research shows that even though mobile devices drive more opens, most conversions actually come from the desktop. Make things easy for your readers and ensure they have a great user experience, regardless of the device!

Have you tried any of these techniques before? What are your tips to ensure your emails are responsive? Share them with us to be included in future posts!