What Responsive Design Means
Responsive design is a method used to adapt the way the message is displayed to the device in use. Mobile devices are smaller than desktop or laptop computers, and therefore you need email messages (or web pages) to adapt to the different width. When this happens, the text becomes easier to read, buttons and links are easier to click on, and images become as wide as the device allows them to be.
Things are more complicated in email compared to the web because, instead of a few browsers that are increasingly complying with shared standards, we are dealing with a vast array of email clients (Outlook, Gmail, AOL, etc.) that don't appear to like following a common standard at all.
More and More Responsive
Let's look at how responsive design works in email.
This is a standard message hand-coded with no mobile optimizations.
Here is how it looks in a desktop email client:
And here is the same message opened on a mobile device:
We have exactly the same message in desktop and mobile. Great, isn’t it?
Not really. If you tested the message on a mobile device you would notice how hard it is to read (text too small), how difficult is to click a button or a link (too small for the finger to click on it)... and you'd find yourself needing to zoom in all the time. Not an ideal situation.
With the first version of our email editor we implemented the most common responsive design best practices, which allowed us to optimize the messages for popular email clients as iOS Mail, Android Mail, and Windows Outlook.
Here is the same message, built with editor v1 and displayed on an iPhone:
Now our message is not only beautiful but easy to read on many mobile devices.
But not when we use Gmail on our phone:
Gmail does some things somewhat differently, driving email designers nuts along the way. The most common techniques - using what are called "media queries" - don't work.
Since Gmail is extremely popular, however, we needed to find a solution.
Editor v2 - Beautiful and responsive on Gmail too!
With the new version of the email editor, we completely reworked the HTML code created by the editor so that email messages would be fully responsive on Gmail too.
Here is the same message, rebuilt with editor v2 and sent to Gmail:
The result is a readable email, with buttons and links that are easy to click on and no horizontal scrollbars.
As you can see, there are some differences between this version and the one shown in other mobile clients: images don’t use 100% of the screen width, and sometimes on larger devices, some of the design elements are rendered a bit differently.
This is caused because we need to use 2 different approaches, one for Gmail and another one for all the others.
Still, the message provides a good user experience for both readers.
For those of you that are more technical: editor v2 uses the fluid hybrid design technique, enhanced by media queries.
- Hybrid fluid design allows responsiveness across email clients, including the Gmail app.
- Media queries allow us to add additional design optimization on those email clients that support them.
For more information on these topics, see for example:
Note that in the email design world, the term "responsive design" is often strictly associated with the use of media queries.
On this website, however, we talk about "responsiveness" in a more general way, referring to the ability to the email message to adapt to the device in which it is displayed, regardless of the technique used to do so.