Get into Responsive Email Design – Small Steps First!

Published by

With over 50% of emails opened on mobile devices there is a real desire from marketers to optimise their emails for the small screen. However, responsive email can be quite daunting, so before you revolutionise your whole template, try taking a few small steps first.

Here are 3 examples from Emailcenter clients that you can learn from:

Marshalls – Optimise Navigational Links

Navigational links at the top of the email, which take the customer to categories or departments on your site can achieve 30% of the clicks.

Often designers will choose to remove these navigational links when optimising for emails, as the text may appear to small or push the email to wide. Instead, a better solution can be taken from Marshall Seeds’ email campaigns which replicate the navigation menu from their website into their emails. Not only does this provide a familiar experience for their subscribers, but is also fully mobile responsive. Now the options are stacked and the product categories are still a good size for selecting with our big fingers.

View Email

D&D London – Stacking Content

Here’s an example of a classic newsletter layout with multiple articles all shown on one row – which is optimal for desktop viewers but on mobile, the text, links and images are way too small to be user friendly. However here, they have deployed stacking, a technique for making each article the full width, and subsequent articles appear underneath. Now everything is far more optimal for small screens.

View Email

GoCompare – Big Call to Actions for Fat Fingers

GoCompare have an email here which has 2 main key benefits for mobile. Firstly they have ensured their call to actions are always large enough for our big fingers. When you put multiple links together on an email there is a real danger that you can click the wrong link by accident, therefore responsive code has been used here to make them big.

Even when the responsive code does not change the appearance of the email. This is really important as anyone who is viewing email in the a non-default email client on their phone such as the Gmail app will have the responsive code stripped out. GoCompare haven’t forgotten about these customers here and the email is still clickable for this audience.

If you want to learn more about how you can optimise elements of your email for mobile devices, talk to our Client Services team who can take you through best practice and using our Email Builder to make mobile emails easy.

View Email

To find out how Emailcenter can help you with optimising your emails for mobile devices, get in touch with our client services team today.