Putting it simply, responsive email design?has to be pretty straightforward in order to maximise functionality over multiple email clients, screen sizes and browsers. The following rule for designing for responsive will get you through most of the problems you could encounter. As long as the design follows this main structure, you shouldn’t run in to too many issues.

Responsive_Mockup

The mobile version is set to a maximum screen size, so when the email client detects that the email is being read on a mobile screen; it activates the media queries and moves the elements to fit within the maximum screen size. This means that anything outside of the maximum screen size has to be resized and moved underneath the content that is inside of the maximum screen area. Elements on the left hand side are generally resized, whereas elements in the right hand column move underneath the elements that they are lined up with.

We have had some clients come to us asking for their desktop versions to go against this natural flow when converting to mobile. In order to replicate the desired designs for both desktop AND mobile, we would have to create entirely new sections and hide them in either the desktop or mobile versions of the email.

Shifting elements to stack in the incorrect way, (ie. Right section on top of the left section), would result in us having to create 2 entirely new sections ? effectively creating 4 sections.

You can see from this example that the mobile version of the template would require a lot of work to set up and for the most part would be an entirely different email. Hiding elements between desktop and mobile comes with its own set of rules, which can be seen in our experiment here.

Though it would be possible to build 2 entirely different emails, the workload would increase which would increase the price quite a lot. You would also run into a critical issue with Gmail as explored by our previous blog.

What do we learn from this? Planning is critical. Responsive email design?can be tricky, especially if you are used to designing for print or websites where you have a lot more freedom. Emails are fairly rigid and have to be approached with the knowledge of the email clients and how they render code. If you are unsure about your design and want to make sure it is possible before you promise it to the client, contact us and ask about our Email Design Check service.

 

Glossary:

Responsive Email Templates – A Quick Guide

Responsive Email Design?- The Basics

Experiment: Hiding Elements on Desktop and Mobile