Cliniko on mobile & tablet: Fitter, happier, more responsive.

If you logged-in on your mobile to check your schedule this morning and were pleasantly surprised to find Cliniko looking particularly spiffing, that’s because we just released a big update. One that’s going to make your day-to-day Cliniko experience much lovelier, but one that also also has the potential to unshackle you from your desk and change the way you and your clinic works forever.

That is to say, Cliniko is now responsive.

What does “responsive” mean in this case? Glad you asked. Grab a cup of tea and read on — we’ll walk you through the changes.

But first a little context…

Cliniko yesterday.

When Cliniko was born way back in 2011, it was made on a desktop computer and that’s where it worked best. It loosely worked on mobile and tablet, but everything appeared ‘zoomed-out’ and text was unreadably tiny. Using Cliniko on mobile wasn’t much fun.

The increasing use of mobile devices within healthcare businesses inspired us to quickly build separate web apps for mobile and tablet that gave you access to some limited features like your schedule and your treatment notes.

Cliniko evolved and grew, but the mobile and tablet web apps were neglected. While we made thousands of updates to Cliniko, the mobile and tablet apps remained frozen in 2012.

And that’s because, even as we were developing those separate mobile and tablet apps, a new approach to designing websites that work across all devices was emerging — responsive design. And so, behind the scenes, we began the lengthy process of retro-fitting Cliniko to be responsive.

What isresponsive design?

In a nutshell, ‘responsive design’ is a design approach with the goal of making a website that adapts to whatever device it is viewed on.

In practice today, this means that Cliniko will work and look much better on tablet and mobile, while it will look much the same as before on desktop. It also means that Cliniko will be better prepared for devices that haven’t even been invented yet — future you will be able to enjoy all the same features on the on-board screen of your driverless car not long from now.

The layout of responsive websites adapt to the size of the device they are viewed on, as shown here on the Cliniko settings page.

This is the fruition of a couple of years work behind the scenes. It’s taken this long because, to put it simply, Cliniko is a pretty a big application with lots of features that are a bit tricky to fit in smaller screens!

Speaking of features

The Cliniko veterans among you who have used the old mobile or tablet sites site will remember that there was only so much you could do before you had to get yourself back to a desktop computer or laptop to use a feature that was missing on mobile.

New responsive Cliniko is a single application, the same code under the hood that tells the design of the page to adapt to whatever device you are using to look at it. This means that all the features you use on desktop will be there when you log-in on mobile and tablet too. So whether you are working on your laptop in your clinic, out visiting a client with your tablet, or doing some admin on your mobile whilst on the loo, you’ll be able to access every current and future feature of Cliniko.

Notable design changes

If you log-in today on a tablet or mobile, Cliniko will look and feel a lot better. However, if you log in on your desktop, you may wonder what all the fuss is about. I say ‘may’ because it depends somewhat on the size of your screen, or the size of the browser window you are using.

You’ll get a very similar Cliniko in a full screen window on desktop as you would have before today’s release, but, if you use a smaller browser window, you’ll probably notice some layout changes. Being responsive means that the layout now fluidly adapts to the width of your browser window (just as it fluidly adapts to any size mobile or an orientation change on a tablet).

Example section: patients

Some sections required more change to layout than others when making Cliniko responsive. None more so than the patients section and New treatment notes.

New treatment notes is a page with 4 vertical columns: the main menu, the menu for this patient, the new note form, and previous treatment notes. That’s a lot to fit in on desktop, so we had to get creative with the layout when there’s less room:

On screens that are large enough for four columns, you won’t notice a lot of difference between today’s changes and how things were before.

On a screen that won’t fit all 4 columns, we toggle the ‘previous notes’ column with a button in the top right.

When there’s not enough room in the top right to show the save buttons, we collapse them into a drop down.

On screens too small to fit three columns, the menu is whisked out of the way (under the menu button in the top left).

This is a good illustration of the kind of differences in page layout that you can generally expect to find when viewing other sections of Cliniko on different screen or window sizes.

Footnote: font size change

You may notice that text is bigger in Cliniko with today’s changes. We’ve bumped the main font size up from 14px to 16px to meet web accessibility standards.

Those of us working on the responsive update have been using the bigger font for weeks when developing Cliniko and find it’s much easier on the eyes (in fact was a little a shock for us each time we had to switch back to old Cliniko with the smaller font which felt super-small in comparison). We recommend you stick with it a few days and your eyes will thank you for it. However, if you really yearn for a smaller font, you can zoom out a notch in your browser (Command + minus key on Mac, Control + minus key on Windows).