A mobile-optimized email subscribe form in action

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.
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'.
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.

View the original article here