Responsive Email Design

Chapter 7

Optimizing your subscribe forms

Optimizing your email campaigns for mobile isn’t just limited to making sure your newsletter can be read on small screens. After all, what’s the point of sending mobile-optimized campaigns, if mobile users can’t subscribe to your lists in the first place?

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.

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-aligned labels A common issue when 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.
  • Use input type="email" If you useinput type="email" on the email address form field, a special keyboard will display in iOS devices, featuring commonly used characters like @.
  • Narrow down your forms (if not the entire site) 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.
  • 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: <meta name = "viewport" content = "width = device-width, user-scalable = no" /> For a couple of variants on this, check out Apple's viewport meta tag documentation

To show you how to optimize your forms, we created 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: http://goo.gl/7xDuu.

You can repurpose the CSS, play with the media queries and use it either as a stand-alone form, or on your pages.

Creating mobile-friendly plain-text email

Not wanting to limit our advice to HTML email design, we wanted to add some pointers for optimizing plain-text campaigns. When it comes to formatting them, 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.

We have found the 60-65 character limit works best in desktop and webmail clients. 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.

However, on mobile devices, things are very different. 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.

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, it's worth having a look at your email client usage reports when deciding which way to go. If you have plenty of subscribers reading their email on a mobile device, it may not be an appealing idea to add your own line breaks. But in other instances, putting the time into formatting may be worth it.

Case study: Twitter

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

Create an account