Archive for ‘dribbble’ category

There’s no doubt that employing a mobile first, responsive design approach to a new project is a wonderful way forward for many sites. I think the most exciting thing about seeing these best practices develop over the last few years is that it finally feels like web design. Finally. That we’re not designing sheets of paper that happen to be on screen.

So yes, for new projects under the right circumstances a responsive plan is often the ideal. But what about existing sites? The ones that were designed before browsers supported media queries and before smart people started stitching things together into cohesive battle plans for building flexible websites? Ideally, the move to responsive design with device-agnostic-layout-hotness is one that starts from scratch. That is, it’s likely best to rethink it all.

For existing sites (particularly ones that are also businesses) teams don’t always have the luxury of tossing everything aside and building anew. We found ourselves in this position with Dribbble, a bootstrapped operation still run by 1.5 people (Rich Thornett and half of myself, plus wonderkid intern Bruce Spang).

Up until now we haven’t had an official offering that made the experience of using Dribbble bearable on small screens. If time was plentiful, we’d have a few options:

• We could’ve created a separate mobile version of the site. This would’ve been a lot of work up front, and even more work to maintain. Not to mention loss of full functionality. There are times when I welcome a stripped-down UI for quick tasks, but more often than not, I’m missing the features found in the “full” versions of sites when I’m browsing on the phone.
• We could’ve tossed everything aside and redesigned the entire app with responsive design in mind. Fun! But with a growing to-do list, the day-to-day work of managing a large, thriving community, and the business of generating enough money so that everything can keep humming along, it wasn’t an option for us right now.

That left a third option, and it was after a few (decaf) lattes and advice from Ethan, that I decided the best thing to do was compromise for now. Let’s keep the same content and code that’s been powering the large-screened version that Dribbble has always been, and then let’s do something adaptive to it—using media queries to effectively make the site fluid and as vertical as possible when rendered at 480px wide and smaller. In other words, let’s take a step towards a responsive design by crafting an adaptive stylesheet that overrides the master to make things usable and readable on phones and small-screened things. Our tiny team can continue to maintain just one codebase.

And so that’s what we did. Baby steps.

The process in making this a reality turned out to be very interesting. Much is written and talked about in terms of ideals when it comes to designing for any-and-all screen sizes, but not a lot is talked about in regards to the decisions one has to make when retro-fitting existing fixed-width sites. Sites with loads of interaction elements that need to adapt when it’s squeezed down skinny.

What happens to wide, horizontal navigation? Does search have to take up all that room? What about our form patterns? Where does advertising fit? How can we avoid modifying the markup for this section? I did my best to avoid using display: none; to simply hide things that didn’t quite fit. And not much is hidden, thankfully. But you do need to get creative in terms of how certain UI patterns are handled. Items that were previously rendered horizontally may possibly be stacked vertically. Items that were stacked vertically in tight spaces (short tag names) may be set side-by-side in columns to save vertical space (CSS3′s mutli-column layout proves very useful for spreading out lists of short links). We’re all still figuring this stuff out of course, and there’s so much more I want to write and talk about regarding these (sometimes) ad-hoc solutions. More soon, hopefully.

For now, I’m happy with this initial stab at a small screen experience for Dribbble. When time, resources and funds are more abundant, I’d love us to rethink things in a more holistic manner, but for now incremental improvements will keep us moving. And that’s the priority.

Yesterday was the biggest launch I’ve yet to be a part of. Not big as in size, but big as in importance, being a major milestone, etc. We launched Dribbble Pro after months of hard work: a suite of extra features for just $19 bucks a year. I couldn’t be prouder of our little team. Rich and our fearless intern, Bruce, have worked their butts off to get this working.

The response over the last 20 hours has been overwhelmingly positive. Dribbble members seem excited by the new features, but even more so happy to help support the community. The paid Pro accounts will hopefully help us to continue to bootstrap the business, grow the community gracefully, and spend more time doing so.

Those that have already purchased Pro accounts, I can’t thank you all enough.

The buzzer sounds. And the victorious have been chosen.

Congratulations to the winners of last week’s rebound contest announced on Dribbble and Ethan’s blog.

The entries were incredibly creative—thanks to all who entered. And we look forward to seeing you in Nashville next month. Just a reminder: early bird pricing ends in a little over a week from now, so book a ticket soon!

With early bird pricing for Handcrafted CSS Nashville (a full-day workshop presented by myself and Mr. Ethan Marcotte) winding down, we thought we’d run a little contest to giveaway two free tickets to the event on June 21st and other prizes.

Ethan has all the details on how to enter: a Dribbble playoff of the beloved Baskerville italic ampersand. You don’t need to be a Dribbble member to enter! In fact, we’ll be giving away two Dribbble invitations as part of the contest.

Hit us with your best shot, and hope to see you in Nashville next month!