Responsive Email Design

Chapter 3

Coding mobile emails

When web designers talk about mobile stylesheets, usually they’re talking not about a totally separate stylesheet, but the good stuff that appears within the curly brackets of a media query. Here’s what a basic one looks like:

<style type="text/css">
	@media only screen and (max-device-width: 480px) {
		/* mobile-specific CSS styles go here */
	}

	/* regular CSS styles go here */
</style>

Lets break down what the @media declaration is all about. First of all, in order to make it mobile-specific, we have some criteria that have to be met before the email client uses the styles therein. The @media only screen bit specifies that the email has to be displaying on a screen (unlike being displayed on an accessibility device, or printed via a printer). After that, the device’s viewport can have a maximum width of 480px. This is important, as many, but not all mobile devices have a viewable area of 480px wide or less. While max-device-width: 480px is commonly used (as it’s the width of an iPhone display in landscape mode), you can tweak this to accommodate larger mobile displays, such as those on tablet devices. You can even be ultra-pedantic, like so:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }

So, it's time to revisit our earlier example of an email layout thats been ‘narrowed down’ for a mobile display. Here’s the design in iPhone Mail:

In this example, we've applied the contenttable class to HTML tables containing the text and images. Here’s a snippet of the code:

<style type="text/css">
	@media only screen and (max-device-width: 480px) { 
	/* mobile-specific CSS styles go here */
		table[class=contenttable] { 
			width: 320px !important;
		}
	}

	/* regular CSS styles go here */
	table.contenttable {
		width: 640px;
	}
</style>

The contenttable class does something really interesting here - when the email is viewed on a device with a screen width of 480px or wider, it has no effect. However, when the screen width is 480px or less, it narrows down the table widths to 320px. Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail. We’ve also added !important; to the mobile-specific styles to ensure they take precedence. But otherwise, it’s run-of-the-mill CSS. Similarly, you could feature other declarations, like:

@media only screen and (max-device-width: 480px) {
	/* mobile-specific CSS styles go here */
	table[class=contenttable] { width: 325px !important; }
	img[class="headerimage"] { width: 325px !important;  }
	p[class="date"] { display: none !important; }
}

Now you’ve had a taste for how the code works, we recommend you download and tinker with our mobile email template.

Assuming that the examples in this guide have made sense so far, we’re going to start looking at a couple of more advanced techniques for adapting your email newsletter for mobile devices. Buckle up!

Building responsive layouts

Sign up for free.
Then send campaigns for as little as $9/month

Create an account