Web Design and Build

Whizzy features vs usability Last updated:27 February 2013

I was contacted a week or so ago by a client who was trying to develop a page which allowed coaches to assign members of their sports teams to athleti/track and field events. The client wanted to do this via a drag and drop interface (something like this).

Now the thing with drag and drop is it looks very nice, and when the order of dragged items is important, it’s a good way of approaching it. My guess is that a solution to the problem with drag and drop would have got some ‘wow’ comments first time around, but the next time things would have become, well, a drag…

What we built was a pretty non-whizzy grid of athletes against events, with a checkbox for each combination:

Screenshot of page showing athletes and events in a grid

This is so much easier to use and allows the coach to either work through each event and assign all the required athletes, or work through each athlete and assign events. The client’s response: “I’m dancing around the office Gangnam style! This is absolutely awesome! Beyond expectations.”

A good example of where consideration of usability delivers the best result.

Google PageRank Last updated:31 January 2013

I’ve never really bothered about Google PageRank, but in an idle moment this morning I thought I’d see how this site is rated. The homepage scores 1, the blog and my most popular page score 2, and my website build page 3. None of these seem very high. This compares with a current Alexa ranking of 124,575, and over 1000 hits one day this week.

Further, my simple crossfade page – my second most popular – scores 0 on Google PageRank (which according to some sources means Google doesn’t know it exists!). But if I search for jquery crossfade, it’s the number one result on Google and has had 3920 hits in the last month.

Google PR remains a bit of a mystery to me….

CSS3PIE/PIE.htc and https and IE6 Last updated:21 November 2012

Came across an interesting one last week using https on an Opencart installation. After implementing https I discovered that all the secure pages generated a warning in IE6: “This page contains both secure and insecure items”. I couldn’t work out why this was happening at all and ended up with a test page with virtually nothing on it still generating the error.

After some more messing about it became apparent that the error was being caused by the CSS3PIE code – specifically the use of a reference to url(about:blank) in the script. There’s more info here. The suggested solution is to replace a.backgroundImage="url(about:blank)" with a.backgroundImage="none" which seems to have done the trick for me. I was a little nervous about that replacement so have created a separate version of PIE.htc just for IE6, with no problems so far.

Posted here in case anyone else has the issue as it took me a while to find the solution.

Opencart Paypal failures/INVALID with foreign characters Last updated:17 September 2012

We’ve had occasional oddities with Paypal (Standard) payments showing as ‘Pending Paypal’ on Opencart, with the Error Log showing an “INVALID” response from the Paypal IPN transaction. However, when we check on Paypal, the transaction has completed without a problem.

Opencart error log

The (seemingly) common factor with the payments that show like this is that originated in a foreign currency, so I’d assumed that was the problem, but in fact some orders from (the same) currencies went through OK. On Saturday I spotted that those that failed all included a ‘non-standard’ character in the customer’s names: é, ø etc. And this suggested an issue with character sets.

So, after a bit of digging, I discovered that Paypal, as a default, sends all IPN responses encoded as win-1252, whereas my website is in utf-8. You can change this, although it isn’t easy to find, via My Profile > My Selling Preferences > Paypal Button Language Encoding (link right at the bottom) and then the ‘More options’ button. Set the encoding used on your website to utf-8 (or whatever you use, obviously…).

Paypal screenshot showing encoding settings

Testing this after making the change means no more failures with non-standard characters.

Opencart 1.5 Mobile Theme – 2 Last updated:29 June 2012

I’ve now pretty much finished developing a mobile theme for Opencart. I’d value any constructive feedback – you can find the test site here (best viewed on a mobile or via a mobile emulator I think). Here’s a few screenshots just to get you interested:

Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme

Feel free to create test accounts, buy products etc etc (although don’t expect your orders to be fulfilled…). At the moment I’ve got a couple of payment options enabled, just so you can see the checkout screens, plus the Featured module on the home page. If there’s anything else particular you’d like to see then let me know via a comment.

A little more detail on what changes have been made is here.