Proto Mobile

I'm mostly a web designer at Foursquare, but sometimes I get to do design work for our iOS and Android apps too. We pride ourselves on paying attention to the details of interaction and animation, so often I want to prototype some sequence of taps or animated events to see how it feels before the client engineers put the work into building it.

I found myself in such a situation recently, and decided to give Quartz Composer a try. I'd used it for a couple things before, and there had recently been some interesting blog posts about how the Facebook Home team used it as a prototyping tool. I watched this great set of tutorial videos, and then gave it a shot for my project.

While QC is a powerful tool and makes a lot of complex effects very simple, it was too clunky for sequencing interactions. Making effects respond to click events or cursor location, for example, required far too complex a series of nested patches, making prototyping much too slow a process for my purposes.

I found myself thinking how quickly I could achieve the same effects using HTML, CSS and JavaScript. With jQuery, binding an animation to a click event is one line of code, as is tracking the cursor position or hiding an image. Given how many people are creating full-featured apps that consist mainly of web views, it seems obvious to use web languages as a prototyping tool.

I put together a small framework that makes this kind of prototyping easy. I needed my prototypes to work on both desktop and mobile, so I could easily send them around to the whole team for feedback, but also give people a quick demo on my phone to see how the interactions were feeling.

Proto Mobile is a slightly polished up version of what I came up with. The main thing it does is use a media query to give you a container that will render as a preview of an iPhone when viewed on a desktop browser, but will render full-screen with no chrome when viewed on a mobile browser. It also includes a little timeline class for creating time-based series of JS events, as well Animate.css for easy CSS-based animation, and jQuery for event binding and such.

More info and a working example can be found on the GitHub page below. I definitely welcome feedback; this was a quick and dirty project, and I'd love to iterate it into something even more useful.

Proto Mobile on GitHub

Baby's first time in San Francisco

1/14/13 — 1/20/13

The Red Ball

“When the theater is empty I like to go out on stage. It’s lonely and beautiful. I look at your empty seat and think about you being in it. … Then I practice. I often practice stuff you’ll never see. For the past few weeks I’ve been working on a hundred-year-old trick called the David P. Abbott Ball. It is a very, very hard trick, almost like juggling. I put in an hour almost every day. I try to get the tricky moves so deeply into my muscles and brain that I can forget I’m doing a trick. Soon I’ll know whether the ideas I have for this trick are possible. But I won’t know that till I learn all the moves and invent my own. If the trick doesn’t work out, you’ll never see it, and I won’t be sad. I had fun every second I was working. I love the stuff you never see.”

That's Teller, from this 2008 profile in Las Vegas Weekly.

Great magic is like great craftsmanship of any kind. It means doing an incredible amount of work, while hiding the fact that you've done any work at all. The practice and effort is invisible in the final product, and that's what makes it magical. It takes a rare combination of diligence and humility, because frankly, most of us want some credit for working hard.

I see things all the time that make me think about this quote. Here are a recent few:

Dark Sky
Dark Sky is a 4 dollar iPhone app that does one thing exceptionally well: predict whether it's going to rain in the next hour. It doesn't try to do much else. I was wooed into purchasing by its clean UI, and then amazed by the accuracy of its results. The single-mindedness of the app conceals the huge amount of engineering complexity behind that simple histogram. Take a quick read through this article about their methods.

Make it Real: Greg Petchkovsky
We haven't begun to scratch the surface of what's possible with 3D printing, so when someone pushes way past what anyone has done thus far, it really does seem like magic. The meticulous care with which Greg Petchkovsky creates these subtle public art pieces is amazing.

I haven't spent much time with Paper, the iPad drawing app, but I loved reading about their trials and tribulations coming up with a realistic-feeling color mixer. The trouble is that mixing colors in a way that seems realistic has more to do with human perception than it does with math and science. There isn't a single model that will account for all the eccentricities in how we perceive color, so it takes a lot of work to create a color mixer that feels simple and natural.

Read It Now


There are a handful of "read later" services out there that let you quickly grab an article you've found on the web and save it for later. They strip out the site layout and ads, and just give you the text and important images, and allow you to sync it with your phone, iPad, Kindle, etc. Instapaper, Readability, and Pocket are the big ones.

For actually reading things later, I use Instapaper. It's straightforward, and doesn't suffer from the feature bloat that some of the competitors do. There's one thing I use Readability for though, which is the "Read It Now" feature. All it does is the first step: it strips out all the cruft from the page, and presents you with just the text and images, in a large, high-contrast, readable format. I probably hit the keyboard shortcut to strip a page five or six times a day.

This was really the main inspiration for me to change the design of my blog recently. If this is how I want to read long-form content, why not just present it that way in the first place?