I wanted to make a dribbble browser for my phone, so I convinced some of my Relevance teammates to help me in this endeavor. The result: hooppps! hooppps is an open-source Rails 3 app hosted on Heroku. Under the covers it uses the swish gem, a Ruby wrapper for the dribbble API.
A screenshot of hooppps (from a desktop web browser):
(On the screenshot above, the images inside hooppps are shots on dribbble by: David Lanham and Dan Cassaro)
"Dribbble is show and tell for designers, developers and other creatives. Share sneak peeks of your work as 'shots' — small screenshots of the designs and applications you’re working on" - Quoted from the dribbble blog.
I love dribbble. People ask me, "What is dribbble?" and I always reply, "It's like Twitter, but for designers." The truth is, although there are similarities, it's very different from Twitter. dribbble is a community of some of the most talented designers and artists in the world! A dribbble user (AKA "player") is asked the question, "What are you working on?" You respond by uploading an image (AKA "shot") no larger than 400px x 300px. This community is invite-only (AKA "draft"), and you can only post a limited number of "shots" per month. "Players" can follow each other, "like" shots, and leave comments. There is a lot of feedback shared amongst players, and keeping in the spirit of the application's basketball theme, players can "rebound" shots. A "rebound" posts a shot that is inspired by another shot. If you like looking at beautiful art and design, you should definitely check out dribbble.
While dribbble is amazing in a desktop browser, they have not yet created a mobile interface. So when dribbble came out with an API, it made me think of how cool it would be to browse dribbble on my phone via a lovingly-crafted mobile interface.
Not just for iPhones
Even though I personally use an iPhone, I didn't want to limit the functionality to just that segment. Others have released native iPhone clients for dribble that you can buy in the App Store. And they are great apps. What I wanted though, was a simple and lightweight browser that anybody could access via their smartphone browser. So, if you are on Android or iOS, you can experience dribbble on your phone in a mobile-friendly format via hooppps.
hooppps is not a complete implementation of dribbble, nor does it attempt to cover every feature of the dribbble API. It is a simple experiment meant to improve the dribbble mobile experience. So far, that initial goal has been accomplished. However, this is just the first release. We want to make hooppps better. As the API provides more functionality, we'll add that functionality to hooppps as we see fit.
With the first release of hooppps, we hoped to get initial responses and feedback from people.
The first release features include:
Views
Extras
In addition to the features in hooppps today, the dribbble API also provides access to "shots by everyone" and "debut shots." We did not implement these extra views…yet.
When I created the first view on hooppps, I thought, "Let's implement the popular shots thread, because it's popular." Well, it turns out that it may be full of popular shots, but it's not the most popular view in dribbble. Since we first mentioned hooppps on Twitter, people have noted that the "everyone" thread is more interesting, and that is what people view the most. So that was our first feature request. We are implementing that, and we will include the "debut" thread as well.
What would you like to see in hooppps?
I originally designed hooppps to just be experienced on a phone. But as I got to thinking about how people would be introduced to hooppps, I realized that a lot of people would end up on hooppps via their laptop or desktop computer. Simply showing them the mobile layout in their desktop browser would result in a subpar introduction to hooppps. But I didn't want to focus on a layout for desktop browsers, because dribbble already has a wonderful desktop interface. Nevertheless, I wanted people to have an awesome first impression of hooppps, which meant that hooppps needed a special layout for the desktop browser: a preview of sorts.
So then I got to thinking, "Why not make hooppps functional in its desktop preview?" I created a position:absolute div over an iPhone image with overflow: hidden. Then, using the jQuery [mousewheel plugin](http://plugins.jquery.com/project/mousewheel "Mouse Wheel Extension |
jQuery Plugins"), I enabled scrolling of the content inside of that div, simulating the mobile experience. (Thanks to Larry for solving that problem!) In short, hooppps has a fully functional mobile interface visible in a desktop browser! |
hooppps has been a really fun project for me. I have learned more about Rails and designing for the mobile experience. It has also been really fun to get other developers here at Relevance involved. (For a list of contributors, see the README.)
From the very beginning, the idea was to open this up for others to contribute or fork to make their own dribbble browser. So, all of the code is public on GitHub. I would love to help other designers get involved (or even get started with their own implementation), so @reply me on Twitter with any questions.
I want to say thanks to everyone here at Relevance for helping me get hooppps out the door. Thank also to Jeremy Weiskotten for the swish gem. Without that, I probably would have not been ramped up so quickly. I also want to say thanks to Dan Cederholm and Rich Thornett for doing such an awesome job with dribbble. And thanks to everyone out there that contributes to open-source software. It is really awesome to have so many tools and a wonderful community to work with!