Home Resources Blog

Action Rocket on the iPhone
Just last week, our blog post on ‘Improving the usability of email subscribe forms on mobile devices‘ gained quite a bit of interest. But what was particularly gratifying to us was seeing some of its lessons being put into action – by an upcoming Campaign Monitor rebrand, no less!

Cool customer Elliot Ross (of Email Design Review fame) recently took a responsive approach to designing the pre-launch page for Action Rocket, a new email design studio. What makes the page unique is how gracefully it adapts for use on mobile devices (pictured), courtesy of our little form template.

Email form validation with CSS3

Scaling for the small screen aside, this email subscribe form has two features that considerably improve its usability, both of which were achieved by using input type="email" on the Email: field. First of all, using the attribute, type="email" results in the special, email address-specific keyboard being displayed on iOS devices. But secondly, it means that the :invalid CSS3 pseudo-class can be used to highlight the field if it doesn’t validate properly. Here’s a sample of the CSS code used:

input:invalid, textarea:invalid { background-color: #f0dddd; }

In times past, developers have long had to roll-their-own client-side validation using JavaScript, but with CSS3, all it takes is a snippet of code. Find out more about form validation on A List Apart’s ‘Forward Thinking Form Validation‘.

Taking pre-launch pages to the next level

We’ve previously covered how to build basic pre-launch pages and add social sharing to them. With smart phones becoming increasingly ubiquitous, it makes a lot of sense to go the next step and make the email subscribe forms therein as mobile-friendly as they can be – we’ve even provided the code to help you get started.

Besides, what’s a better way to show clients that you understand responsive design, than to create a responsive site?

Many thanks to Elliot and Action Rocket for sharing this great example with us. If you have a great tip or hack for improving the usability of your forms, be sure to let us know.

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.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free