Adapted

Adapted

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.

css

design

dribbble