Improved user interface for ccInvoices 2.x

Did you expect the only new thing in ccInvoices 2.x to be the addition of recurring invoices? 

Well, it’s not! I just completed the revamp of the site “Invoices overview”, among other things. Have a look at these screenshots. These improvements are in ccInvoices 2.0.5, which is a beta and available for both Joomla! 2.5 and Joomla! 3.

I make sure you can use the Bootstrap UI library in Joomla! 2.5 by bundling our own flavour of Bootstrap “ccBootstrap” (Chill Creations Bootstrap) with ccInvoices. It only loads on pages where ccInvoices is used, so you don’t get an unnecessary extra load on your site. It loads jQuery, Bootstrap and Icomoon icons, and is almost identical to the JUI package in Joomla! 3. 

As you can see in the release notes in the downloads section, I have been pretty busy with ccInvoices over the last month, making many minor and some larger improvements. You will notice some of them now, and others just allow me to make ccInvoices a more solid and reliable extension in the future. 

Get these updates faster, follow me on twitter!

I post updates like these to Twitter almost as soon as I’m done coding them. So if you want to know what’s new, follow me now!

More layout improvements for ccInvoices in the next update! Bootstrap baby! pic.twitter.com/yWktumFv5t

— Chill Creations (@chill_creations) March 30, 2015

And now, let’s have a look at the old layout

When I designed this in 2008, Twitter Bootstrap (the UI library designed by Twitter and used in Joomla! 3) did not even exist. So this was pretty good for those years, and I actually got many compliments about the User Interface (UI). How times have changed 🙂 Joomla! moved to support Bootstrap starting with Joomla! 3 and Chill Creations has slowly been updating it’s extensions to have UI’s based on Bootstrap. I do this when it’s needed, and when it’s logical for the extension (or requested by customers), because I do not believe in “change for changes sake”. Don’t fix it if it’s not broken.

Well, after multiple years with the below UI, I can tell you one thing, in 2015 it is broken. Not “broken” in the “it’s not working sense” but broken in the “40% of web visitors now browse on their mobile devices, and the old layout does not scale at all”. More about that later, scroll down for a look at the refreshed UI.

Tip: need to know how your customers get to this page? Have a look at our manual “Showing invoices to customers on your Joomla! site“. A link to the invoices overview is also included by default in the invoice e-mails you send from ccInvoices. And… customers can view and pay individual invoices without logging into the website. 

And then… Boom!

Refreshed overview of Invoices for your customers

 Nice, right!? Completely revamped to support Bootstrap UI elements. The most obvious changes are:

• Invoice status labels in Bootstrap labels
• Action toolbar uses a button group and icomoon icons (instead of old famfamfam icons)
• A nice and attention-grabbing pay now button, shown automatically only when it’s needed (not for draft or paid invoices, and only when payment plugins are enabled)

When customers click on the “Pay” button, they are sent to the “Select payment method” page (second screenshot). You will notice that the Offline plugin now has it’s own image “BANK”. If you use the Offline plugin for other offline payments (like check or pin), you will be happy to know that you can override all payment method images. Just add images with the same name to the folder templates/your_template/images/com_ccinvoices/ and they will be shown automatically! This works for all payment plugins. 

Good news: it’s fully responsive!

I mentioned this before… because the UI is now Bootstrap based, it’s fully responsive! I also made sure the invoices table only shows the absolute minimum information needed to pay an invoice on a smaller screen, so people will actually find the overview on their phone or tablet useful. So, it’s now easy for your customers to pay your invoices on the go! When checking your invoice email (sent from ccInvoices) on their phone, they can follow the payment link straight to your website and make a payment. This makes sure you can put bread on the table even faster.

On the left: invoices overview 1/2

On the right: select a payment method 2/2

New action toolbar also in the administrator!

It’s not just the site invoices overview that received a little attention. The action toolbar in the Joomla! administrator now also has a revamped UI, and new tooltips that give you information about what each individual button does. We used to have a little pop-up, but it was not that fast in, uhm, popping up. These new tooltips are a lot user friendlier in the sense that they pop-up immediately. As you probably know, the first icon has different states (e-mail invoice, resend invoice, send reminder), and with different texts for each button, you will never doubt what exactly is the goal of the button again.