10K Apart: The Responsive Edition

This year at Microsoft’s SXSW IE9 release party, I finally got the chance to meet Nishant Kothary. I was happy to have the opportunity to convey how appreciative I was of his role in making Lost World’s Fairs happen in person. He really turned the Operation Condor team loose and fully supported our vision from start to finish. Little did I know, he had Paravel in mind for an upcoming gig: Designing the follow-up to last year’s 10K Apart site, beautifully done by Things That Are Brown. But this year’s edition had to be different—the site and all of the app submissions had to be responsive!

After confirming that we’d be thrilled to provide design and front-end code in person, and again in numerous “OMG is this really happening?” emails, The Mix Online / Sunder Media / Paravel team rallied on Basecamp with lots of exciting work ahead of us. We’d already cut our responsivizing teeth on The Do Lectures site as well as this blog, so we were eager to put our ever-evolving responsive design process to work, building a site that looks great at any width.

We started by having Reagan guide us through selecting a direction for the design. True to Paravel form, a bunch of automotive user manual scans wound up in our mood boards, so we settled on a throwback “Responsive Toolbox” vibe. From there Reagan designed some fantastic full-width desktop views with that level of sensibility & restraint we lean on heavily for all our Paravel projects. You can read and see more on Reagan’s design process here.

reagan

Once our desktop views were approved we teamed up to build the alternate media-queried layouts in the browser, though this wasn’t by any means all improv. We designed elements at full-with with an understanding of how they would relocate as viewports narrowed without breaking the site hierarchy. My recent post, Content Choreography, summarizes a lot of the opinions & tricks we put into practice on this site.

10K Apart Responsive Edition

Dave and I had a blast coding this site. The design is covered in subtle textures, and it’s got features like image rotators, functional hover states and forms. We were eager to prove to ourselves that each of these items could be made responsive easily, and I’m happy to report that they were. It further reinforced that responsive web design doesn’t have to break your brain, or the bank for that matter.

The day our front-end portion of the site was completed, Dave “cannot be stopped” Rupert decided to build a responsive app himself. Check out Colorrrs! Read about Dave’s role & the Colorrrs app here.

Colorrrs

Gosh, I hope this isn’t the last project post I’ll write for a collaboration with the Mix Online team. The honest truth is that we couldn’t be happier with the work we get to do here at Paravel. A Texas-sized thank you to Nishant & Joshua for brining us on board and to Ian for his fantastic dev work.

Check out our work on this year’s 10K Apart: The Responsive Edition. Also, Check out project posts from the Mix Online team, Nishant, Reagan, and Dave.

7 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Shane

    Love the 10K Apart site. Some very clever positioning when the width goes down to 320.

  • Sean McCabe

    You guys are awesome. This really has the perfect touch. Well done!

  • Brian Enriquez

    I’m plowing through the Book Apart series right now. @beep’s book is SICK. Hugely useful. I scaled my company’s corporate site before launch down to mobile and back in 2 days. It looks awesome on all levels functioning as it should. I loved revealing new “touch” elements on the mobile version. I love what ya’ll are doing to the web and to web designers. Thank you.

  • Espen Brunborg

    No doubt, the website looks beautiful and behaves elegantly responsive – hats off to you for pulling it off again! – but I have one question. Why did you go for the “Vintage automobile vibe” just like that? For the other decisions; layout, colour scheme etc. you went through different options, but not for the style...

    Not that I don’t like it, but from Reagan’s post it sounds like you were “all over” that style before the project had even begun. Im curious, did you guys agree on it just because you like it aesthetically or is there a connection to the subject matter that I’m not aware of?

  • Trent

    @Espen Brunborg: That’s a great question and something we all somehow forgot to hit on in our posts. Initially, we made sure it’d be fair play to deviate from the traditional AEA brand, which we thought was appropriate for a contest site. After reading up on the contest history and last year’s 10k, we were all inspired by the practical, roll-up-your-sleeves mentality behind it all. Last year’s site was obviously inspired by an era of innovation, which we thought jived with what 10k is all about. The idea of automobiles becoming available to a mass market that could then get their hands dirty—digging into manuals & toolboxes to maintain and further modify their cars—seemed to pair well with a contest that seeks to inspire practical innovation.

  • Andrew Berrel

    Being responsive means a lot in today’s web design. A good technique coming into the web world is Page Visibility which causes less resource usage, thus more efficiency during browsing.

  • Espen Brunborg

    @Trent Very well explained, thanks. Knowing you’ve got a well-founded reason for the design makes me like it even more. Cheers

Leave a Reply