Incorporating Gravatar into the Signin (or Registration) Process

Posted 26th February 2014

I signed up for an online ser­vice the other day (Com​mando​.io), and they had a really nice lit­tle inter­ac­tion dur­ing the signup and signin processes. As soon as you enter your email address, it auto­mat­i­cally dis­plays your Gra­vatar. Nice lit­tle touch.

So, I thought I’d write a quick tuto­r­ial on how to repli­cate the effect.

There is a demo here.

Get­ting Started

For sim­plic­ity, I based the form on one of the exam­ple tem­plates for the Boot­strap frame­work.

It’s pretty straight­for­ward to down­load the Boot­strap frame­work using Bower: