Optimize your forms for Mobile


Do you enjoy filling out forms on a mobile browser? If you answered yes- you’re lying. Our fingers are way too big and clumsy to complete this process quickly and efficiently. Also, your submission and validation speeds are at the mercy of your carrier’s network. We’re likely browsing on our phones to kill some boredom or for a quick web fix. More often than not, if I’m browsing on my mobile phone and I am asked to fill out a lengthy form, I politely say “no thank you” and trek on.

We as developers do not want people to “trek on” without filling out our precious forms. Our conversion rates are very important to us because higher conversion rates mean more sales, newsletter subscribers, sales leads, or job candidates.

It’s becoming a well-known fact that more and more smart phone adopters are browsing the web on the go (check out mobiThinking for excellent statistics and analysis). We don’t ever want to assume that people will be visiting our sites and filling out our forms on a desktop/laptop with a keyboard at the comforts of their desk (like we are when developing & designing these forms). We want to consider people riding on a cramped subway or killing time during a commercial break.

So the question remains – how can we get more people to fill out forms? The answer is to make it easier to do!

1. Take advantage of new HTML5 input types.

If you have a form field; say Number of ice cream scoops, you don’t want the users of your form to have to tap the number button to bring up yet another set of keys. This is an extraneous step that is not necessary.


You can do one of two things. You can either use an input type of number:

[sourcecode language=”html”]
<input type="number" />


Or an input type of tel:

[sourcecode language=”html”]
<input type="tel" />


Whichever you decide to use- you just saved your form user an extra tap. Here are a couple more examples of input types to take advantage of (take note how the keyboard changes):

[sourcecode language=”html”]
<input type="url" />


[sourcecode language=”html”]
<input type="email" />


2. Abbreviate your form by excluding certain fields.

Ideally, mobile forms should be easily viewed in their entirety on one screen. It’s less intimidating this way and ultimately easier and quicker to fill out. Check out Apple Rubber’s mobile contact form for a great example:

Great mobile form

There are a modest five form fields (only four are required) and it can be viewed in-full on one screen. There are also some key deletions we are accustomed to seeing on contact forms: Address, City, State, Zip, Country. If you need these form fields, you can retrieve [most of] them in the following ways:

  • Independant research from the Company entry
  • An IP-based Geolocation service like Maxmind
  • Rely on details given in the Comments entry
  • Take advantage of HTML5 Geolocation

When developing and designing your forms, ask yourself (or the client) “Do I really need to collect this much data?”.

3. Mask your inputs.

Have you ever had a form field prompting you to enter your phone number? (Me, too!). Have you been told that your phone number is not valid when you know it is? Don’t make your form user guess – provide a mask using one of these two methods:

Use the placeholder attribute:

[sourcecode language=”html”]
<input type="tel" />


Or use the placeholder attribute plus some JavaScript to automatically format your phone number for you. This option requires some time and patience, but you’ll prevent a headache for your form user.

Take a look at my live example here: jsFiddle (I use jQuery to get the job done).

If you’ve got forms that don’t follow all of these guidelines- fix them! You could be missing out on that next big sale!

If you have ideas or arguments, engage with us in the comments below, or chat with me on Twitter @mike_petruniak.

Is After Effects CC Worth The Upgrade?


Like many of my video production peers, I had been waiting for the morning of June 17th for quite some time. Ever since the announcement at the National Association of Broadcasters (NAB) Show in April, I couldn’t wait to click “Update” on the new version of Adobe’s flagship video production software, After Effects (AE).

Editor’s Note: The updates weren’t technically released until yesterday (June 18th), but that’s a whole different story.

One year ago, we took the leap from CS5 to CS6 and the improvements throughout After Effects were astounding. Our render times were cut in half, and tools like the Warp Stabilizer and 3D Camera Tracker made our lives a whole lot easier. Now we embark on yet another upgrade with hopes that the jump will feel just as rewarding as it did last year.

Before my full review, here are two features I’m most excited about in the new After Effects Creative Cloud (CC):

Live 3D Pipeline
For awhile, my team and I had trouble committing to a 3D modeling program. After extensive research, we chose Maxon Cinema 4D mainly because of its smooth interaction with After Effects and large user community. Now, with After Effects CC, the bond between my two favorite pieces of software is even tighter.

Adobe has successfully unleashed a seamless pipeline between your Cinema 4D scenes and AE Comps and renders those scenes without leaving After Effects. The ability to see what your Cinema render will look like once you’ve color corrected, composited, and added your effects before spending 8 hours to render is a stroke of genius.

For those without Cinema, AE CC comes with Cinema 4D Lite – for free! Cinema 4D Lite works flawlessly with AE and gives users the ability to create true 3D scenes without breaking the bank on the full version.

To learn more, I highly recommend checking out the Cineware and Cinema 4D Lite Tutorial Series on Greyscalegorilla

Refine Edge Tool
On March 26, 2013, Adobe released The History (and Future) of Rotoscoping in After Effects to give us a sneak peek of how AE CC was going to improve the arduous task of rotoscoping.

Life is easy when you have a beautifully lit green screen, but rotoscoping less desirable scenes has always been time-consuming and frustrating. With the Refine Edge Tool, Adobe is claiming that users can separate “complicated foreground elements like frizzy hair or motion-blurred edges from complex backgrounds.”

Bad rotoscoping and lazy chroma keying is an enduring Visual FX issue and a pet peeve of mine. At first glance, this tool looks like it will significantly cut down roto time and hopefully improve the roto and keying work of the careless workers in the VFX industry.

The Full List
The official list of updated features includes updates to some of CS6’s most powerful tools. The Warp Stabilizer and 3D Camera Tracker have been optimized and a new feature, Pixel Motion Blur, has been created to add motion blur effects to “live footage and rendered scenes.” For a complete breakdown of everything new, head over to the official After Effects info page.

So is After Effects CC worth the upgrade? I’m extremely hopeful, but at the moment, it’s too soon to tell. Please check back for my complete review next week!

Join the conversation below or tweet me @fdc245.

Website Conversion Attribution – Part 2


Offline Conversion Attribution

You work hard to promote your brand through your online marketing strategies. Rightfully so, you expect your visitors to find your website, come to it, stay a while and convert a goal. If you’re a retail business with a storefront, how do you determine conversions? More importantly, how can you attribute online marketing efforts to in-store purchases? After all, not everyone who wants to buy will necessarily do so on-line.

Define the Problem, Then Solve It

Why is it so hard to track offline conversions and attribute it to online marketing initiatives? Essentially, you have two different sets of sales data and no real way to connect them. For example, you know about an online visitor by means of a tracking cookie. How do you associate those cookies to in-store shoppers or conversions that happen on the phone?

Offline and Online Data Sets

The above data represents some sample data about 3 online visitors and 2 in-store purchasers. So what can we reasonably interpret from the data?

  • You know two of your three online visitors viewed (and likely printed) a coupon during their visit to your site.
  • You know that one of those who printed the coupon was logged into their online account. You have a name and an online customer ID.
  • For those that completed the goal – in this case the coupon – you can also determine the number of visits and all the touch points leading up to the final visit that registered the goal conversion.
  • You know that both in-store purchasers swiped their loyalty card.
  • You know one of the two in-store purchasers used a coupon.
  • You know which products were purchased and at which store location.

The only problem we have is that the two sets of data are discretely separate from each other. So how do we join these data sets together? If the logged in visitor’s name matches the name associated with the loyalty card that was swiped, you win. If not, you have to find common data points.

3 Tactics to Attribute Offline Sales to Online Initiatives

Loyalty Programs / Cards

First and foremost, it truly is imperative to have the same unique identifier for both data sets. If your unique identifier in your online database is not the same as the loyalty card number or if it doesn’t include the loyalty card as a field, you need to do so. You’ve gone through the trouble of setting up a loyalty program, use it to the fullest. Find some way to tie it in – or print it out – online.

Unique Phone Numbers

Similarly, if you have conversions that occur via telephone, you need to somehow tie that conversation to an online ID. This becomes trickier because you can’t exactly have your phone rep play a technical game of 20 questions about what they did online before calling.

Luckily, there are many phone tracking services that tie into Google Analytics and other popular Web analytics packages. These services provide a code snippet for your site that generates a unique phone number for each visitor. That phone number forwards to your regular business line, but is tracked and able to be tied back into your online analytics.

Unique Coupons

Everyone loves to save. Coupons are not only able to be tracked, they also make great calls to action if you purchase display or other paid ads.  Have your development team generate a unique ID for each coupon generated. That ID can be printed on the coupon to be entered into your point of sales data and also entered as a custom variable in your Web analytics. The event of printing a coupon can be tied in as a goal, using the custom variable data. When you merge your point of sales data, the unique coupon ID can be the unique identifier that ties the two sets of data together.

Putting It All Together

Unique coupons and phone numbers are both able to be measured as goals. As I discussed last week, you may still have multiple touch points from various online channels. Even though you have offline conversions, they may still have been affected by search, social media or any of your paid campaigns. Merging offline data with analytics data is simply your first step. Applying your multi-channel attribution model is the next step. But once you’ve done the legwork, the collection of visitor behavior data will be invaluable.