Coding Pixel Perfect Emails [Part 4 – Responsive Emails]

By now I don’t need to tell you about the pervasiveness of smart phones, or how differently users interact with them verses desktop computers.

So I won’t.

Most mobile email clients will scale a static email to fit the viewer (everything’s tiny) or crop the email (scroll-ville). To get optimal results we need to have our email respond to the device it’s being viewed on.

There are a number of ways to do this, we’ll quickly look at how to properly code a simple responsive template with a single break point.

Table widths

Static emails typically have the width hard coded within the table as a whole or a specific cell. With responsive emails you’ll need to replace that with a CSS class with the width in the style.So <table width="600"> or <td width="600"> would become <table class="fullwidth"> or <td class="fullwidth"> and you’ll simply add the class attribute in the header with whatever width you want:

.fullwidth {width:600px;}

This will create a static table, now to make it responsive we’ll add this to our css in the header:

@media only screen and (max-width: 480px) {
.fullwidth {width:300px !important;}
}


This overwrites the 600px width with a 300px width when the device screen is less than 480px wide (note: you can change the break point to whatever you like, 480px is typically a good default). The !important tag make it take precedence over the inline style, make sure any command within the @media only section has this and any commands that need to be overwritten do not.

Images

There a few different ways to handle wide images that need to be resized. You can have a portion of the image disappear when the email is scaled down (basically acting like a crop) or you can have the image scale (evenly or unevenly).

To scale an image evenly, delete its height and width attributes and have the width set just like the tables above. So <img src="https://imagepath.com/image.jpg" width="600" height="250" /> would become <img src="https://imagepath.com/image.jpg" class"fleximage"/> and you’d simply add .fleximage {width:280px !important;} within the media only section of your css. You don’t need to set a height, it’ll scale as evenly as possible.

To make this a bit more robust, rather than placing the sizing class directly on the image, you can place it on the surrounding table cell. This is so you don’t have to remember to put the class on any image that may be swapped in at a later date. It’s look like this:  <td><img src="https://imagepath.com/image.jpg"></td> and place this within the media only section of your css .flexImage img {width:300px !important;}.

To “crop” an image, have your wide image saved in parts, one image for the part you want to show, and one image for the part that will be hidden. Rather than placing the entire whole image in a single cell, place each portion of it in its own cell and add class="hide" to the cell you want cropped out with td[class="hide"] {display:none !important;} in the media only section of your css.

A combination of these two can also be very handy as well, cropping out unnecessary portions of an image so it doesn’t have to scale down quite as much.

Font Styling

Any body copy that you want to be readable should be around 16px.  Headlines should be around 22px and up. Setting your body css would look something like this:

.h1, .h1 a:link, .h1 a:visited {
color:#393c3d;
font-family:Helvetica, Arial, sans-serif;
line-height:100%;
font-size:32px;
font-weight:normal;
text-decoration:none;
}

.body{
color:#393c3d;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
line-height:150%;
}

.body a:link, .body a:visited{
color:#00b0ff;
text-decoration:none;
font-weight:normal;
}

@media only screen and (max-width: 480px) {
.h1, .h1 a:link, .h1 a:visited {font-size:22px !important;}
.body{font-size:16px !important;}
}

Spacing

With mobile emails you may also want to reduce how much space you have above and below certain items so the user doesn’t have to scroll so much to get through the email.

We like to use spacing tables with the css controlling the height set just like we did in the previous examples:

.spacer {line-height:30px;}

@media only screen and (max-width: 480px) {
.spacer {line-height:10px;}
}

Inlining CSS

Some Email Service Providers (like Mailchimp) will inline your css for you prior to mailing (most don’t). If they do you can skip this step, otherwise make sure your css inlining tool doesn’t strip out the header when inlining (some do this by default without giving you the option to turn it off). We recommend this inlining tool, just make sure you uncheck the “Strip Out Original CSS <Style> Tags?” box.

That’s it for today, next up fancier responsive emails!

—–

Read previous “Pixel Perfect” posts:

• Part 3: Reset Styles and Client Bugs
• Part 2: Images
• Part 1: Making it Modular