Browse by...
Home Resources Blog

Like a lot of you here, I’m a huge fan of pretty much everything that Andy Clarke applies his hardboiled head to. So when he mentioned contributing to a post on navigation in narrow viewports the other day, I thought, “well, navigating emails on mobile devices could be a heck of a lot better, too”.

Well, this post isn’t all Andy’s fault. Recently, I’ve been having a lot of trouble unsubscribing from newsletters received on my mobile – largely because these sort of links in the footer of emails are usually hair-tearingly tiny.

Ok, so most email footers aren’t usually that bad on mobile devices. For the most part, we use inline lists of links, like the one pictured here. However, if you have fat fingers, less-than-reliable coordination skills or poor eyesight, these little target areas really aren’t a joy to use.

After simplifying the 456 Berea St / Andy Clarke demo (including stripping back the non-email friendly code), we came up with a [url=//]responsive email footer[/url] that’s well, a bit iOS-like. Aesthetics aside, it’s a neat technique for making lists of links both more usable and readable.

Let’s start with a simple list…

The first ingredient is the code for the above stock-standard inline list, which is what email subscribers using webmail and desktop clients will see. Nothing exciting here, just good ‘ol HTML. Note that we’re using Campaign Monitor template tags for three of the links, which automatically convert to links on import into the app.

<ul class="nav">
   <li class="sel"><a href="#">Visit our site</a></li>
   <li><forwardtoafriend>Forward to a friend</forwardtoafriend></li>
   <li><preferences>Newsletter preferences</preferences></li>

And a little simplified CSS to make list items sit inline…

.nav li {
	border-right: 1px solid #eee;
.nav li:last-child {
	border-right: none;
.nav a, unsubscribe, forwardtoafriend, preferences {

If these code snippets haven’t lifted your heart rate too much, let’s roll on.

… then style it for mobile devices

Now we’ve got something to work with, let’s look at adding a media query to style up the list:

@media only screen and (max-width:480px) {
	ul[class=nav] li {
	 width:100% !important;
	 border-left: 5px solid #F7BA6A;
	ul[class=nav] li.sel {
	 border-left: 5px solid #F3A01E;

	/* Add a symbol to the links to clarify their purpose */
	span[class=mobile-nav-play] {
	display: inline !important;
	float: right;

Before everyone jumps up and down about the use of unsupported CSS in email clients, remember that only mobile email clients will be using the above stylesheet and these are usually pretty good as far as email rendering goes. Second, we’re using attribute selectors to avoid a longstanding Yahoo! Mail bug.

NoteSean Vieira has suggested using the :after selector instead of .mobile-nav-play for brevity – check out the comments. Thanks, Sean!

Now, the final thing to do is to add a little symbol to our HTML code, as to make the navigation a little more obvious. This is hidden from webmail and desktop clients:

<ul class="nav">
	<li class="sel"><a href="#">Visit our site<span class="mobile-nav-play">»</span></a></li>

Once we’ve put these pieces in place, it’s time to admire our handiwork.

New vs Old navigation

As you can see, each link now enjoys a larger, more distinct target area, which means less chance of accidentally tapping ‘Unsubscribe’ instead of ‘Newsletter preferences’. Secondly, it just lends the campaign a look that’s visually consistent with other mobile interfaces.

It’s the little things…

I hope you enjoyed this express tutorial on styling up footers and lists in email. So you can give this technique a shot in your own campaigns, we’ve bundled up the complete HTML email and images for you to tinker with:

Designing footers may not seem like a big deal, but when it comes to email, little improvements can make a lot of difference to your subscribers… Especially those on mobile devices. If you had fun with this and would like to try your hand at a similar technique, we recommend checking out our progressive disclosure demo, too. Of course, if you have any questions (or likely, corrections), pop them in the comments below.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free