When I joined Twitter last year, my team was tasked with building a Facebook application. Yeah that’s right, I joined Twitter and instantly started working on Facebook stuff!
This application was to have two main features: allowing you to connect your Twitter and Facebook accounts, and discovering which of your Facebook friends had done the same. Linking accounts enabled automagic posting of your Tweets to your Facebook profile and/or page.
Signup is another visible part of Twitter.com that I have been blessed to get to work on. This is the step where new users have to share their email address, choose a password, and commit to a username, so this page is crucial to growth efforts.
The Twitter.com Signup page being filled-out
Interesting features on this page include:
The HTML5 placeholder attribute is nice, but does not work reliably on all browsers. Even on modern browsers, it can behave strangely on password fields. To achieve the in-field label effect, we position a span.holder element over the form field, and hook some events on .holder click(), input focus(), and input blur().
The twitter @namespace is crowded. Finding a nice username is hard. To help the signupee along, we send the contents of the name and email fields up to the server, where we splice and recombine the text to find fitting and available usernames. These suggestions are ready when the user focuses the username field, so they can be chosen with a single click.
After clicking the button, the signupee may be prompted to complete a CAPTCHA, and is then sent to a Welcome flow where he can start following other Twitter users.
The implementation of this signup page took a couple months and the combined efforts of many brave souls. The project was instrumental to a dramatic increase in the number of signups on Twitter in 2011.
I’m only 3 months behind in deploying the update to WordPress 3.2.1!
JSON, the admin
A little bit tidier
Edge cases covered
Also switched to the TwentyEleven theme, removing both the header image and sidebar. Simple and clean.
The redesigned twitter.com logged-out homepage was progressively launched last month! Along with the new signup page, it is among the user-visible things I’ve been working on at Twitter. And it contains a few cool JavaScript & CSS tricks. I thought I’d write some of them up for posterity.
First of all, the homepage acts as a loader for #newTwitter logged-out. This means that after the page shows up in your browser, we continue loading data and cache it for further use. You can tell the background loading is complete when the Languages links appear at the bottom of the page. At that time the webapp is active, and all #newTwitter functionality is enabled. For example, you can use the “g u” keyboard shortcut to open a navigation modal.
With a fast connection, one may see the page loads almost instantly. On slower connections, users can still view and use the page (clicking on links, filling out forms) before loading is complete. This is achieved by embedding a micro-framework in the page, just enough to enable the cross-browser placeholders over the input fields and hook up some analytics.
Once the app is loaded, the initial 30 accounts in the avatar strip will be repeated as needed to fill up any window width, up to 2600px. The selection of accounts featured and their rotation is random, but designed to keep repeated avatars as far from each other as possible. CSS goodies: The placeholder use transitions. The background pattern is in a data URI, with a fallback for IE<8. The halo around the signup area is a gradient. The avatar strip uses webkit-box-reflect.
Lots of people had a role in this project, but essentially the page was designed by Vitor Lourenço and developed by yours truly. It leverages the #newTwitter work by @k, @stop, @bcherry, @ded and many others. The async javascript dependency manager is actively being developed by @danwrong.
Thanks for reading!
The page was initially released to the general public on April 5th, 2011. Sadly an unrelated bug surfaced, causing all #newTwitter features (including this homepage) to be turned off. The new homepage had to be taken down after only a few hours, but was up long enough for us to collect valuable performance data, and to observe the overwhelmingly positive initial reactions from users and the press. On the 20th, after a couple bugfixes and optimizations, the page was re-enabled for all users. It’s interesting to see the spikes in tweets mentioning twitter home page for the month of April, they logically match up with the releases.