3 Steps to Make Your E-mail Design Responsive
E-mail newsletters are often an afterthought for web sites. However, they can be a critical link in the relationship between you as a site owner and your customer.
At SumAll, we’ve realized e-mail is one of the most common ways users interact with us. It’s not just e-mail on the desktop – a considerable number of our customers access us via their mobile e-mail client. Only about half of our users use the big Webmail services (Gmail, Yahoo, and Hotmail/Outlook.com). The other half trails off into a long tail of e-mail clients, everything from AOL to Live.com.
As most designers know, designing for e-mail isn’t just about knowing the latest HTML and CSS. Many e-mail clients are awful at formatting, so not only does one need to be familiar with modern design techniques, one also needs to be able to downgrade effectively.
In this post, I’ll describe three aspects to pay attention to to keep your e-mail responsive, gracefully degradeable, and beautiful on all resolutions and clients.
Say you want to make a marketing newsletter that contains editorial content. At SumAll, ours have a full-width image, a headline and main body copy.
Let’s have a look how different phones treat the same e-mail. Independently from the client, without responsive design, the iPhone scales its content down to make it fit to the device width. Contrary to that, Android maintains the set e-mail width and makes the user scroll horizontally for the content to be read. Both, the left and the right side also show what the newsletter looks like if it is coded with responsive principles, which let’s us keep both benefits: the e-mail fits the phone width to make the reading flow more natural and easy to navigate and the copy stays at a bigger size and is therefore more readable.
Known constraint
Gmail strips out the header CSS which means media queries cannot be used with which one could easily take care of responsive elements like making the font size adjust on a phone versus the desktop view. For that reason, we at SumAll make our e-mail code work without media queries.
For all other browsers that do allow header CSS, consider including media queries just like you would to the stylesheet of a website, for example:
@media only screen and (max-width: 480px) { … }
What does “responsive” mean?
The idea of including responsiveness means that the output has an optimized readability for various devices, the content fits to its tool in a flexible manner, for example a side column of a website can collapse below the main content in order to leave more space width wise on a phone for the main content.
Step 1: No Fixed Width
To achieve that the different parts of the content can fold, it is necessary that tables have no fixed width, so instead of defining for example
<table style="width: 600px;">
one would write
<table style="width: 100%;">
Make sure to add these styles to each table cell that contains content:
<td style="max-width: 600px; display: block; clear: both;">
For images, it’s important to not set a width within the image tag, otherwise Android will stretch out the container of the image to that given width. It’s required to include a maximum width style to the image:
<img src="twitter-engagement.png" alt="" style="max-width:100% !important;">
Step 2: Table Setup
In order to make the collapsing of content blocks work, you can use a table within a table setup like this:
<body>
<table width: 100%;">
<tr>
<td></td>
<td style="max-width: 600px; display: block; clear: both;">
<table style="width: 100%;">
<tr>
<td>Content Block 1</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
<table width: 100%;">
<tr>
<td></td>
<td style="max-width: 600px; display: block; clear: both;">
<table style="width: 100%;">
<tr>
<td>Content Block 2</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
</body>
Step 3: Viewport
Finally, make sure your viewport is set to this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can read more about setting viewports in this detailed post.
Post a Comment
Reader Comments