Today we announced the new Basecamp mobile, a special version of Basecamp fine-tuned for speed, easy reading and easy tapping on mobile phones and tablets. It works automatically in your mobile device’s web browser – no app needed.

Basecamp mobile devices

This has been a top request in the new Basecamp since launch and we’re really thrilled to finally deliver. It’s live for every Basecamp account today.

How it all came together

The project started from a simple need. Up until now the mobile experience on Basecamp has really meant one thing: email. Email notifications from Basecamp work great on the phone – you can even reply to them and your comment will show up in your project. But clicking a link to Basecamp on your phone was miserable. Tiny, slow and really tough to read. So we thought, What if you clicked to read a discussion on mobile and we served a nicely formatted mobile-optimized view? No navigation, no interaction, just a clean, readable page. So we set off to prove the concept. The result was an instant hit (read the discussion in our Basecamp project). The new mobile pages were even nicer to read than the email itself and, because they were plain HTML and CSS, they were wicked-fast.

So we kept proving and kept asking questions. If you’re reading the comments about a to-do you might want to see the entire to-do list, let’s see what that looks like. What if you want to see the all the Text Documents in a project – or even the project, itself? Can we try that? So we started to connect the dots, linking pages and optimizing views every time we missed something else. Pretty soon we had a fairly complete mobile version of Basecamp. It doesn’t do everything but it does a lot of what you want to do most on-the-go, without a bunch of stuff you don’t need.

Designed for the job to be done

We didn’t set out to build a feature-for-feature version of Basecamp that magically fits on a mobile phone screen. We built it for the job to be done on mobile. What you hire Basecamp to do when you’re using your computer at your desk isn’t is the same when you’re on your phone at the airport. In the evenings, I use Basecamp on my phone to see what I’ve missed. Checking the Progress timeline, adding my comments, searching for and viewing attachments – Basecamp for mobile is ideal for these tasks. By having the focus of a clear job to be done it was easy to make decisions about what to include in this mobile experience and what could be left out.

Be responsible with responsive

Instead of slimming down the full version, or using responsive design techniques, we started over. The mobile version has its own Rails templates, CSS, and JS assets. So we didn’t leave things out of the full version, we started at zero and only added what made sense in the mobile context. Even where we could have re-used a desktop template for mobile we chose not to. That keeps the mobile experience separate in code and ensures that there is absolutely no extra mark-up, styles, or code that isn’t being rendered on the screen.

That doesn’t mean we didn’t take advantage of CSS @media queries to adapt our design where it makes sense. Our designs were made for phones, but for larger devices with more pixels we can give things more room to breathe:

Phone vs. Tablet
The same screen on a phone and tablet

Less javascript, no frameworks

Basecamp is all about speed. But what constitutes speed is different depending on the context. On the desktop it’s about real-time and interacting without page loads. On mobile it’s about fast page loads on slow data connections. The powerful javascript and leading tech that makes Basecamp so snappy on the desktop is crippling on mobile. Mobile browsers just can’t keep up when in comes to rendering javascript.

By sticking with plain HTML, CSS, and almost no javascript the mobile views are insanely fast. And it turns out the trade-off is worth it. On the desktop you might leave your browser open all day long as new stuff appears instantly in your projects. But on mobile you’re more likely to take a quick dip into Basecamp here and there. You take a 2 minute peek at the Progress timeline while in line at the bank. Or perhaps catch-up on a discussion thread while riding the train. Real-time doesn’t matter. Getting in fast and getting the info you need is far more important on mobile.

HTML5? But uh… Zuckerberg! Native! What are you thinking?

There has been a ton of reaction this week to Mark Zuckerberg’s statement that, “the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native.”, but the more interesting part of that quote was left out in most of the tech press:

And it’s not that HTML5 is bad. I’m actually, on long-term, really excited about it. One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.

Mark Zuckerberg, Disrupt SF, September 2012.

Today we’re announcing mobile web because it’s the right thing to do. Devices and platforms will come and go, but the web browser is here to stay. Does this mean there will never be native apps? Of course not, this isn’t our final word on mobile.

See the entire project

If you’re interested in reading more about how we designed Basecamp for mobile, we’ve made the whole project public. You’ll see how we used Basecamp to bring this to life from start to finish. It’s yours to enjoy.