Footers and lists made fabulous in mobile email clients

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 responsive email footer that's well, a bit iOS-like. Aesthetics aside, it's a neat technique for making lists of links both more usable and readable.

Lets 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>
   <li><unsubscribe>Unsubscribe</unsubscribe></li>
</ul>

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

.nav li {
	float:left;
	border-right: 1px solid #eee;
}
.nav li:last-child {
	border-right: none;
}
.nav a, unsubscribe, forwardtoafriend, preferences {
	display:block;
	text-decoration:none;
}

If these code snippets haven't lifted your heart rate too much, lets roll on.

... then style it for mobile devices

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

@media only screen and (max-width:480px) {
	ul[class=nav] li {
	 display:block;
	 width:100% !important;
	 float:none;
	 background-image:url(bg-grey-inactive.jpg);
	 background-repeat:repeat-x;
	 border-left: 5px solid #F7BA6A;
	}
	
	ul[class=nav] li.sel {
	 background-image:url(bg-grey-active.jpg);
	 background-repeat:repeat-x;
	 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.

Posted by Ros Hodgekiss

3 Comments

  • Sean Vieira
    14th July

    Excellent article Ros! 

    You can actually avoid the mobile-only span too if you choose to use the :after selector and the content CSS attribute.

    Try:

    ul[class=nav] li.sel:after {
    /* snip other attributes */
    content: ” \u00BB”;
    }

    Thanks for all you guys do helping make email a little bit better for all of us!

  • Ros Hodgekiss
    14th July

    @Sean, that’s wicked - you’re correct. I’ve updated the post with a note, so readers have two options here. Massive thanks to you for helping us improve!

  • oyun
    17th July

    I am looking for this one .. i am really thank you :)

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

Create an account