Blog: Tips & Resources

Recently, we were asked for advice on how to make our email subscribe forms more mobile-friendly. The good news is that mobile devices like iPhone and Android handsets generally do a good job of making forms at least remotely usable these days, however there are a couple of things us designers and coders can do to make them as easy-to-use as possible. The obvious benefit to optimizing your forms is that they require less time and effort to fill in on a mobile device. To you, this means higher completion rates and more subscribers.

In this post, we'll cover a couple of pointers, plus feature a simple example you can use as a starting point for your own subscribe forms.

Top-align those labels

A common boo when it comes to using forms on a mobile device are having labels that reside out of sight when a form field is selected in a mobile browser. At the initial zoom-level, a left-aligned label like 'Enter your email address:' may be visible, but as soon as you start entering text, the viewport zooms-in and the label is flung out of sight.

The solution is to either use a top-aligned label, or add the form label as a text-field value. The latter requires less vertical real estate, but can be a little annoying if the field you've just started filling in was initially hidden by the phone's "Form Assistant" or keyboard.

Our subscribe forms come with top-aligned labels by default - which is a good thing.

Use input type="email"

Talking about form assistants, Kevin in the comments made a great suggestion - if you use input type="email" on the email address form field, a special keyboard will display in iOS devices, featuring commonly used characters like @. David Walsh features a couple of added advantages to this method in his post on HTML5′s “email” and “url” Input Types. Thanks, Kevin!

Narrow down your forms (if not the entire site)

We've spent a lot of posts talking about designing responsive layouts for email using CSS, but now we're talking about the web, it's possible to do away with the usual caveats on poor CSS support on Android devices and all that. A grand vista has opened up. We are free.

I'm sure I'm not the only one that takes great pleasure visiting Colly-style responsive sites on a mobile device. The good news is that the same techniques that are applied to sites can be used on individual forms, too. Adding mobile-specific CSS using @media queries to go narrow-gauge and remove visual clutter can really improve the usability of forms. After all, there's nothing more clunky than having half a text-input field disappear off the screen.

Personally, I favor using fluid layouts for mobile devices, simply because you can't predict the viewport's dimensions or orientation. Simply making a text field's width say, 80% of the viewport width can massively improve the appearance and usability of our subscribe forms.

No love for lightboxes

I'm sure there are tasteful email subscribe form lightboxes that have been optimized for use on mobile devices. But 99% of the time, they make sites almost impossible to use on smaller screens. Make sure you test your lightboxes on a mobile device before you use them in this manner.

Be mindful of multi-option fields

While we're talking about narrow layouts, it's prudent to force all content to flow in a single column - particularly checkboxes. When inline form options wrap, things can get all kinds of hairy. Often drop-down lists are a better option over radio buttons and reduce the amount of scrolling required to navigate the form.

Take a stand on scale

Finally, a lot of these tips here haven't been specific to forms - more like web design in general. Included is the idea of setting the initial scale/zoom on a mobile device using a viewport meta tag, especially when building stand-alone forms. When applied, they can prevent the user accidentally zooming in unnecessarily and losing sight of most of the form. Here's what a typical viewport meta tag looks like in the head of an HTML page:

For a couple of variants on this, check out Mozilla's docs.

Check out our sample form

We decided to collect a couple of these tips and quickly mock up a simple CSS template that you can plonk our 'Basic formatting' subscribe form code into. You can view it in your browser and on your mobile device using this short link: bit.ly/cm-mob-form.

Feel free to repurpose the CSS, play with the @media queries and use it either as a stand-alone form, or on your pages. Thanks to Buzz for providing a starting-point for this form.

Now, I'm a lazy coder and this is far from an exhaustive list of form usability tips.
Can you suggest some more ways to optimize subscribe forms for mobile devices? Share them with us below.

Recently, one of our customers sent in a ream of despair, which essentially amounted to: "If I send a campaign to my entire list at once, my inbox is instantly swamped with bounce notifications and out-of-office replies. What do I do?"

Given that using a no-reply address is an email marketing no-no, it's essential that replies to your campaigns end up in a monitored mailbox. This means pointing the From: and Reply-to: email addresses in your campaigns to a real email address, read by real people. After all, even the most humble announcement can attract important emails, like sales leads, customer feedback and regularly, unsubscribe requests.

Dedicate an email address to replies

Of course, receiving a squillion replies and bounce-backs to your regular work address can be immensely frustrating, especially if they trickle in over a period of hours, or days. So setting up a new, From/Reply-to email address to handle replies (like info@yourdomain.com) is always a good idea. If you're already using Google Apps, this is dead-easy to do yourself - otherwise, ask your tech team for a hand.

Once you've set up an email account, you can set it up in your regular email client and sift away. Note that replies can go to either the From: or Reply-to: address (depending on the recipient's email client), so you can count on bounces, out-of-office replies and more going to either specified address.

Rules rule

Once you've got a unique email address for replies, it's time to separate the wheat from the chaff (or human from robot-generated email). Doing this manually can be a laborious (read: boring) process, so often the best thing to do is to create a folder in your newly-minted email account and siphon all automated 'robot replies' into it, leaving only the important emails in the inbox. This can be done using rules (or filters), which can be created in many of the major email clients, like Gmail, OSX Mail, Outlook and more. For example, you may create rules like...

IF email subject includes:

THEN move the email to my 'Robot Replies' folder.

This isn't a definitive list and ultimately, you'll find yourself adding and refining rule criteria as you go along. Rules can also come in handy for highlighting or flagging important messages, such as those with "unsubscribe" in the subject line.

Make it a morning ritual

The final step is of course, regularly checking your reply address. Back when I was a hand at a marketing agency, we sent multiple campaigns / large email volumes every day and had a dedicated 'reply machine' for dealing with bounces. While with smaller sends you will most probably be able to deal with replies from the comfort of your desktop email client, you may want to take a more distant approach if you're a massive sender (as we were) and simply check in once or twice a day. Make it a routine, cup of coffee in hand, even if its been days after your last send. Sometimes relevant emails get filtered out too, so remember to give your 'Robot Replies' folder a skim before you hit 'Delete All'.

We'd like to know your approach to automated responses - do you have a killer tip for dealing with replies? Let us know in the comments below.

After a few of our customers wrote in recently asking for tips on formatting both text-only campaigns and the text versions of HTML campaigns, we figured it was high time to revisit an oldie, but a goodie - how to make the humble plain-text email look something flash. Given that the app automatically generates a text version whenever you create an HTML email campaign, you can be forgiven for never giving this a second thought. For the die-hards out there that continue to send plain-text emails, formatting can be do-or-die.

But first, a little background. For those who are wondering why text versions are still relevant to HTML email campaigns, it's because we send all HTML messages as multipart. This means that if an email client doesn't know how to display an HTML message, it can conveniently fall back to displaying a provided text version of the campaign. Although most email clients can deal with HTML messages these days, there are those on older phones (notoriously the Blackberry), command-line clients and others on which image-free email is still alive and well. We'll be looking at how we can do our best to look after these subscribers. If you're sending plain-text only, this group is, well, everyone.

Text wrapping vs. adding line breaks

When it comes to formatting plain-text emails, there are two camps - those who add a line break every 60-65 characters to their message, then those who don't. Both have pros and cons, depending on which email client your message is viewed in.

Personally, I find the 60-65 character limit works best in desktop and webmail clients. You can view a few examples here. This is because there is effectively no limit to how wide paragraphs of text can run in most reading windows or preview panes. Paragraphs of text can become very much unreadable after 60 characters or so - traversing from the end of one long line to the beginning of another is just too much visual work for effective scanning.

This rule works well until emails that are formatted in this way are viewed on mobile devices. In iPhone Mail (see pictured), you can see how 65-character line breaks combined with wrapping text results in a very jagged message. It's arguably worse than reading an infinitely long line of text.

What should we use?

It's likely that if you're sending HTML email with a plain-text version containing line breaks, most mobile email clients won't ever have to fall back to viewing it. So it isn't quite time to undo the app's handiwork when it automatically creates a nicely formatted text-version of your HTML campaign. However, if you're sending plain-text campaigns only, then things are a little more complicated. Do you let email clients wrap your message text as they see fit? Or do you add your own line breaks for the benefit of desktop and web clients?

If you've sent a few HTML email campaigns in the past, it's worth having a look at your email client usage reports when deciding which way to go. If you're like us (with nearly 25% of our monthly newsletter subscribers reading it on iOS devices), then it may not be an appealing idea to add your own line breaks. Let your text run (and wrap) free! But in other instances, putting the time into formatting may be worth it. Unless sending HTML email takes your fancy instead, of course.

Do you send plain-text email campaigns? Does formatting matter to you? Let us know in the comments below.

Is it time to pimp your email campaigns? Before you go under the hood, here's a few tips from Newism, who recently relaunched
EE-Garage, an ExpressionEngine addon site.

The relaunch posed both challenges and opportunities - while there was the monumental task of creating a new site and matching email campaigns, also presented was the once-in-a-lifetime chance to seriously impress customers, both old and new.

One of the results was an attention-grabbing email design (above). To find out how this came about, we spent a moment with Wayde from Newism, who had some great pointers for designers who are planning email redesigns of their own.

Hi Wayde, a massive hat tip to your redesigned EE-Garage newsletter. First of all, what goals were you hoping to achieve?

Thanks Ros! The purpose of the campaign was to introduce our new branding to our existing customers, and to increase member numbers on the site.

Our original branding was very minimal - almost generic even - and that was due to our need to launch the site quickly. Our original name was generic, so we had nowhere to go with the branding. The main requirement of our name change was to come up with something both memorable and brandable. The new name EE-Garage gave us lots of opportunities for rebranding, and that of course flowed into our email marketing.

To achieve our secondary goal of increasing member numbers we ran a giveaway promotion as part of the member mail-out. We gave every existing member a free licence for one of our ExpressionEngine addons, then asked them to Tweet about it. We let Twitter do the rest. At last check we've given away over $20,000 worth of addons and our member numbers have increased substantially. We're running the promo for the rest of February, so anyone who is interested can grab a free addon.

Given the design looks so similar to the EE-Garage site, were there any particular design and code challenges you faced when designing and coding it?

"...we followed the steps in that article, based our template code on yours, and it worked perfectly, first go..."

None! The style was well defined from the outset, and we stole the code from you guys! The post, ‘Mobile Design in Practice’ helped us immensely. Seriously - we followed the steps in that article, based our template code on yours, and it worked perfectly, first go in our design tests.

How have your customers and subscribers responded to the redesign?

The feedback on Twitter has been great, both about our rebrand and the email itself. The campaign was meant to generate buzz on Twitter, but a decent amount of activity was created by the email itself. We "borrowed" Campaign Monitor's lovely Forward/Tweet/Like toolbar for our email and this generated a few new followers and likes for us. Bonus!

Finally, there are a lot of folks out there who are keen to refresh their newsletters, but lack time, know-how, or resources. Do you have any advice or encouragement?

"...check out the free templates and get someone who is up to speed on latest techniques to perform an overhaul."

We look no further than the Campaign Monitor blog and Resources section. Our team at Newism have refined our development techniques with Campaign Monitor's awesome help over the years, and the majority of that know-how is available for free as part of their downloadable templates. That would be my advice - check out the free templates and get someone who is up to speed on latest techniques to perform an overhaul. Something simple like the addition of CM's new Twitter and Facebook functionality to your existing template can boost your marketing reach right now.

Many thanks to Wayde and Newism for sharing their experiences and practical advice with us. To see their handiwork in action, check out the new EE-Garage.

Every now and then, we receive a mobile email question that goes along the lines of, "I've done everything to get my HTML email to look right on mobile devices. So why does it still fall apart on my Android handset?"

Aside from the fact that there are no guarantees that any HTML email design will adapt nicely from one email client to another, there are two distinct issues that give email design for Android a bad name. We'll look at both and how you can do your best to tackle them.

Gmail for Android doesn't heart CSS

We may have been responsible for disproportionally raising everyone's hopes about CSS support on Android devices when we said that "Android is powered by WebKit. WebKit has great CSS support!"

While Android's default email client and browser do a superior job at rendering HTML email, the Gmail app for Android is undoubtedly popular... And sadly, shares the same quirky CSS support as Gmail on the web.

If you've created a responsive design (or used our template builder) and a client pipes up, saying that they can see the 'full' or 'desktop' version of your email newsletter, chances are that they are viewing it in Gmail for Android.

We've also seen issues where columns of text will automatically get 'narrowed down' to fit the viewport, but large images (say, a header banner) will blow out to the right, creating a really awkward flow when reading the email.

What it boils down to is a combination of Gmail a) stripping out @media queries and offering shoddy CSS support. There's often very little that can be done to overcome these email client limitations from a coder's point of view, but you can alleviate the pain.

I've got 99 viewports, but 480 x 320 ain't one

When targeting mobile devices, we usually recommend using a @media query like:

That's all good for iPhones and many others, but how about handsets and tablet devices with viewports that exceed 480px in width when in either portrait, or landscape orientation?

As Stephanie Rieger points out in 'The 'trouble' with Android', she and others have identified over 500 screen sizes across the Android family of devices. The problem of designing for an abundance of sizes is compounded by unpredictable zoom levels on each device make and model. As Stephanie points out, these can potentially trigger @media queries, even when they're not desired - like when viewing an HTML email on a tablet device.

How can we optimize our email designs for Android devices?

Despite what seems like overwhelming odds against getting your design to look great in one or any Android email client, there are ways you can make your message readable, if not presentable when under the pump. Here are a couple of 'em.

Use a fluid layout to adjust to any viewport size

Although not always a silver bullet, designing with percentage-width, over fixed-width elements (ie. table cells, images) can improve readability and reduce display quirks across a range of email clients and devices. As Stephanie notes in the earlier post:

"Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices."

While fluid layouts should be applied with both caution and lots of testing, we've seen some examples where they've worked out pretty well. A good fluid layout can even potentially remove the need to add width-specific @media queries to your HTML email code.

Stick to a one-column layout

Even in worst-case situations where the text has been zoomed/resized, but not the images or surrounding table cells around it, one-column table layouts have always come out best in terms of usability and readability. When possible, keep the text large and layouts simple.

Find out which CSS properties work in Gmail for Android

Thankfully, you are not alone in your noble quest - we've found out which CSS properties are supported by Gmail for Android and documented them for you. You can say farewell to nice bulleted lists, but staples like margin and padding still work fine.

Embrace the chaos

The final word is that you'll almost never get an email newsletter to look pixel-perfect in all conditions. Given the variety of devices and email clients out there, your focus should be equally on graceful degradation and managing expectations, as it is on making a design beautiful in WebKit-powered clients. Sometimes there just isn't a code solution for every mobile quirk - in the interests of preventing potential terse calls, suffering and all-nighters, it's important that your clients understand this, too.