Robbie Mann Showcase

Creating the Robbie Mann website

Client: Robbie Mann
Website URL: robbiemann.com.au
Built by: Simply Computing
Your website URL: simplycomputing.com.au

What is the purpose of the site? Did the client come to you with a particular problem that needed to be solved?

The site is designed as a showcase for early jazz pianist, Robbie Mann. It aims to give a quick overview of his playing style, some background information, and list upcoming performances. Robbie has recently released his first CD, so the primary purpose of the site was to provide a small e-commerce facility to handle sales of physical CDs and downloads.

Was this site built in ClassicPress, or is it a conversion from WordPress?

The site was built in ClassicPress.

What led you to choose ClassicPress for this build?

ClassicPress is always my first option, unless there is a good reason not to use it. This one was marginal because it had an e-commerce component, but since it was a very simple shop I decided to build it with the newly forked Classic Commerce (see plugin discussion below).

Were there any special challenges that you encountered while building the site? How did you resolve those challenges?

Robbie had an idea for a slide-in menu from the side that would look like a piano keyboard. This presented some challenges, and the keyboard graphic is still more stylised than accurate. But fortunately this is not as obvious when it’s viewed vertically (and a non-pianist probably wouldn’t even notice anyway).

I had the menu mechanics all working but it somehow didn’t look quite right. It took some experimenting until I finally hit upon adding a simple box shadow to the right edge. That did the trick of visually lifting it above the main content. One of those simple things that seems obvious in retrospect.

The hero image design took a lot of attempts to get working. Robbie had some great images, but the aspect ratio (6:4) was hard to adapt to a website. I don’t like cropping photos provided by a professional photographer, so I added dark “wings” to the sides to make it wider (6:3), and also pushed the main image off centre to give room for the site title. Once we saw this version we both loved it. I still think it is a stunning photo.

Tell us about the typography, colour palette, and any other interesting design elements.

I didn’t want the site colours to detract from the photo, which has a sombre background with a bold main image. Also pianos are typically monochromatic, so I used a chocolate brown as the primary colour with some paler browns for buttons, etc. Overall, we wanted a “ragtime” style without getting too cliched. The main title font is Tenor Sans (a Google font) that we thought would be quite at home in the early 1900s.

Theme used:

I always use my own theme framework to build sites, which is my fork of GeneratePress (pre-Gutenberg). I have numerous add-ons in a child theme that I can call on if needed. For this site I only used the custom front page with hero image, social media share buttons, and my contact form page.

Plugins used:

All my sites have four standard plugins:

SC utility – this is my own utility plugin that I use to simplify the admin area for users, add some dashboard widgets and do various other useful tweaks. I can update this across all my sites with Code Potent’s Update Manager.

SC email log – my personal fork of a simple email logging plugin that tracks all emails sent by CP. It has recently been added as a CP research project, so at some stage it may become an “official” plugin.

WP Crontrol – I use this to schedule cron jobs that I run for daily maintenance (compatible with WP v4.1 or higher, so it’s fine with CP)

Shield Security – a security plugin that supports ClassicPress. The obvious choice!

On The Robbie Mann site I am also using:

Classic Commerce – (see discussion below).

SC CC Snippets – my custom functionality plugin for Classic Commerce. All the snippets are taken from this resource.

Simple Calendar – this is a really easy and attractive way to display Google calendar events on a website (compatible with WP v4.2 or higher).

Smash Balloon Social Photo Feed – adds an instagram grid using a shortcode (WP v3.4 or higher).

Did the plugins you chose resolve a particular problem? If so, please share details.

The main choice was whether to make the Robbie Mann site a WordPress/WooCommerce site, or to go with ClassicPress and Classic Commerce. Even though CC was still in alpha, I had been helping with the development of this fork for some time and was very confident that it would be suitable for the job. I was carrying out ongoing testing of the fork anyway, so it was easy enough to test it on this site as well. Note though that I am not using any other related WooCommerce plugins or extensions – it is just the core CC installation with the included basic PayPal gateway.

Classic Commerce does a very good job of handling both physical and virtual product sales.

Did you have to make any compromises (plugin choices or elsewhere) to make this solution work?

I am always a little wary of using WP plugins that have not declared support for CP, and I try to minimise these on my sites. So, I will need to keep an eye on the Simple Calendar and Instagram Feed plugins to watch for any compatability issues. It appears that Simple Calendar is no longer actively maintained so this might even be a good candidate for a fork.

In what ways does your solution meet your goals and the client’s needs?

I like to make ongoing input as easy as possible for my clients; they usually underestimate the time and energy that is required to keep a website up to date. I prefer a Google calendar for displaying events, especially if the client is already using gmail. Robbie can now enter gig dates onto his own calendar using his mobile phone, and they flow through automatically to the website. That’s quick and easy. The list on the home page is a good display option and he has been keeping it regularly updated.

Similarly, the Instagram feed on the home page allows Robbie to quickly and easily post new content.

Classic Commerce is working perfectly. I recently had to create two different download options for the files (mp3 and flac) and it was a 5-minute job to add these in as variations.

Anything else you’d like to share about this site? Is there anything you may still change, or would do differently next time.

I tend to tweak my websites over a long period. I leave them for a while, then revisit with fresh eyes. The only thing I still might want to change on the Robbie Mann site is the hamburger icon. It seems slightly too “heavy” and doesn’t quite fit with the finer lines on the rest of the site.

Actually I may also do more modifications to that keyboard menu if it annoys me too much!

About Alan Coggins

Alan builds and maintains websites. He thinks that computing is way too complicated for most people and enjoys finding simple and elegant ways to make things happen. His clients seem to appreciate this approach.

View all posts by Alan Coggins | Website