Responsive Email
Responsive Email
In this hub you will learn what a responsive email is and what methods you can use.
The methods used are: media queries and fluid layout to ensure maximum compatibility with all email clients.
What is it and why it matters?
The Responsive design concept was introduced for the first time by Ethan Marcotte in 2010, in his article “Responsive Web Design”, published on A list Apart.
This refers to the email capacity to adapt to the resolution of different devices in order to eliminate the horizontal scroll, making use only of the vertical scroll.
When creating a responsive email, in 80% of the cases we will have 2 grids which at a given resolution switch from a horizontal (side by side) arrangement to a vertical one. The grids fall one under the other so when you read them on a less than 320x480 resolution you will get a clear image and text without the need to zoom in. To obtain this, we will need: media queries, fluid tables and flexible images.
Media Queries: Just half of the solution
They are used to load different CSS styles for different resolutions which will offer the users a perfect visualization on their device.
There was a time when we could only use the media queries to have a responsive email which worked on iOS and Android (both support media queries).
Since then the number of email apps developed for iOS and Android greatly increased, using different methods and support for emails. Because media queries can’t be read by some email clients like Gmail we can use fluid tables.
Fluid Tables
A while ago we used fixed dimensions when creating a template for an email, like 780px, 680px or 600px. Now relative and percentages units are used more often which helps the template dimension to adapt to the device screen used to read the email.
Although when creating a responsive template I use percentages, for the contained text I use a table with a fixed dimension of 640px and then 2 tables of 320px each, which I will use to keep the responsiveness. Here is where the media queries come to play.
Fluid Images
The last used elements are the fluid images. Just like fluid tables, we will use percentages which will help our images to modify their width based on the device resolution. If we use a big image we will also add a max-width which will be in percentage to make sure it won’t ruin our template when viewed on the desktop.