How we use mobile JavaScript in Freckle

Earlier this year we launched a stylish mobile interface for Freckle Time Tracking specifically for iPhones, as these are very popular with our user base.

Instead of opting to make “small versions” of everything, we decided to optimize specifically for mobile use cases, and have the option to always switch back to the full version of the app in case you need more (the full version works great on the iPhone, too).

Here’s what we did:

Touch-optimization of in-page buttons

We use the touchstart event to make some interactions faster. For example, on our login screen, there’s a lost password? link. If you use just click events, there’s a noticeable delay when tapping, using touchstart instead makes it react immediately (in this case, there’s just an other form shown on the page, with no server roundtrip).

We also prefill the “username or email” field on the lost password form with whatever the user entered on the login screen, so you don’t have to type in stuff twice.

Fit forms into available space

The login form is just the right height to fit neatly on the screen in full when the password field is focused. Mobile Safari centers the page vertically on the screen, around the currently focused field. This way, the user can tap the “Sign in” button without having to scroll.

Always allow to use the desktop version

I hate nothing more than a “mobile theme” that breaks stuff and doesn’t allow you to use the real app or site. After all, Mobile Safari is a full-featured web browser. That’s why there’s a “desktop version” link on top of every page in Freckle. Freckle will permanently switch to the desktop version if you tap it—but fear not, in the desktop version there’s a “mobile version” link if you’re on the iPhone, so you can always go back.

Restrict to most common use cases

Mobile users of a time tracking application do two things most often: quickly log time on the go, and get an overview of what is going on. The dashboard (or “Recent”) gives you last 10 or so entries at a glance, and also allows you to log time immediately.

It’s important to optimize the experience for mobile devices, and that’s not just a reskinning. We completely rewrote our data entry code for mobile devices. Here’s how the form works:

It’s based around the idea of avoiding unnecessary taps, and really fast and efficient entering of time. For the time/minutes field, we’ve added big friendly buttons that allow you to increase to time by 1 hour, 30 minutes, 15 minutes or 5 minutes, with just one tap. They react fast (again, by using the touchstart
event), and you can just keep adding minutes or hours by tapping multiple times.

When you’re read to move on, you need to tap the iPhone built-in “Next” button. (Not being able to have your own big “next” button is actually a big gripe of mine, as you currently can’t focus fields programmatically on the iPhone, a big, big problem for designing effective user interfaces. There’s no known work-around for this, sadly).

The description text field will be focused, and you can type away! To remind you of the time you’ve entered in the previous text field, it’s shown on the bottom of the field. Tap the “Client or project” button to select a project. We show a list of projects that is made scrollable (with momentum!) by using Matteo Spinelli’s iScroll, a great addition to your mobile arsenal!

Once you’ve selected a project, hit “LOG IT” and, behold, it’s logged (without causing a page reload, we use Ajax calls for this).

Use SVG for charts

CANVAS is great, but SVG is really, really neat in some situations, and for charts, SVG just works better. Why? Because SVG scales. It’s vectors, not just pixels. The same drawing code, when used on hi-res displays, just automatically produces better quality output.

Plus, SVG is easy to do, with the great Raphaël library. Heck, the same drawing code even works on IE6 *gulp*. Plus, you get beautiful, beautiful DOM nodes that you can attach events and everything.

Don’t get me wrong, I love CANVAS, but SVG is super-awesome too.

Final thoughts

Don’t treat mobile sites or apps as just a miniature version of your website. It’s very different from what you do with a desktop app. Besides the obvious like a smaller screen and touch input instead of a mouse, the use cases tend to be very different and you’ll find some technical restrictions apply too (like no text field focusing with JavaScript).

However, if you put in enough work, you can make pretty awesome mobile apps with just HTML/CSS & JavaScript, and really give your users a great experience.

Note that the Freckle mobile site is still in beta, and we’re not yet 100% satisfied with the results yet—but it’s certainly getting there!

If you like to try out Freckle Time Tracking, all our accounts come with a 30-day free trial! Next to time tracking with no setup hassles we also have a Timer function for desktop browsers, complete invoicing with expense tracking, extensive reporting, a colorful and friendly interface, and some developer goodies like an API and easy-to-use GitHub integration!