Learn the basics of responsive design. Find out what is it and how it works. We'll discuss the email clients that support it and go over a few tips and tricks for a mobile first design mindset.
Topics covered in this article:
The term 'responsive' is thrown around often to describe websites and emails that dynamically update with the screen being used.
You will also hear the terms 'breakpoint' often. This describes when - as in what screen width - the email transforms into a new view. In general, the mobile breakpoint is reached when the screen width is 480px.
There are several styles of mobile design and each one describes unique functionality:
|Fluid||Maintains the full width of the container with one viewpoint. This is typically a single column design.|
|Adaptive||Multiple viewpoints that are all fixed width.|
|Responsive||Multiple viewpoints that have fluid widths. Uses @media queries in the code to detect screen size and serve up a tailored design for that screen width.|
Responsive email is gaining in popularity with email marketers and for good reason too. Emails that render appropriately on devices generate 15% more unique clicks! More clicks usually means more converting customers on your website (especially when coupled with a responsive website design).
Email marketing life would be too easy if responsive email design was supported everywhere. Unfortunately responsive design is not supported across all devices and email clients. In fact, a little less than 50% of email clients support it.
A helpful note to remember when using responsive email design is that support is based on the app processing the email and not the device receiving the email.
Our friends at Litmus have put together a great reference chart on email client support. Check it out here.
With only about 50% of mobile email clients supporting responsive email, how do the other email clients that don't support it load the email? If responsive isn’t supported by the mobile software, a static version of the email will be loaded. In many cases, the email will load in desktop format compressed into the mobile width. Depending on the device/software, the email may be scaled to fill the screen.
In WordFly, we provide a tool called Modern Editor that helps you build responsive emails. Modern Editor emails are designed for desktop and then easily transform to one-column on mobile. When displaying on mobile the email always stacks left to right to create the one-column rendering. We have many options that let you hide on mobile or desktop, scale on mobile or fine tune how your email displays on mobile giving users the ability to create one version of their email for desktop and an entirely different version of the email for mobile.
Learn all about Modern Editor in our Introduction support post.