Speed is a core value for 37signals and it’s easily Basecamp’s most important feature. When you have the luxury of that kind of focus, decisions about the product are easier to make because you have something to measure against. Will this feature make Basecamp slower? Is it worth that trade-off? So when we designed the mobile web version of Basecamp we knew that speed would be just as important as it was in the full desktop version. What was different was how we got there.
On the desktop, Basecamp’s speed is the result of some nifty tech that minimizes network requests, reduces page rendering and aggressively caches content. Moving through a Basecamp project is nearly instant as new content appears in real-time without re-loading the page. It’s great! I typically keep Basecamp open in my browser all day long as my co-workers’ activity streams in on the Progress screen.
Only using responsive design for Basecamp mobile would have been like fitting a Prius body to a Hummer… under-the-hood it would have been all wrong.
Basecamp mobile web views
As I covered in the announcement post we took a different approach. Basecamp mobile sits right alongside the full version in our codebase. It has access to all the same models, controllers and helpers but each view template has been re-thought for the mobile context and redesigned with its own mark-up, styles and behaviors.
So what does this all mean? Let’s get to some numbers. I took a typical discussion from our Basecamp account and used Safari’s web inspector to compare the desktop and mobile versions.
Here’s the how they compare:
Another screen in the app had actually been using responsive design techniques to deliver a mobile-friendly layout. Converting it to a dedicated mobile web view showed similar results slimming from 1000.3KB to 123.49KB. That screen looks and functions identically in both versions of Basecamp.
More than just download speed
The purpose of this post is not to suggest that responsive design isn’t useful. Not only is it useful, but we’ve employed a fair amount of CSS media queries to adjust our mobile design up into tablet layouts. What responsive design isn’t is a magic bullet. A layout that looks great on mobile, may not perform well. And while it’s compelling to think that by layering some CSS on top of a web app intended for the desktop we can turn it into a great experience on mobile, that’s probably not the case for all but the most simple of apps. As designers it’s easy to forget that fast > beautiful. Applying the same care and craft to what users can’t see might be the difference between a great design and a great experience.