A Little Example of Web Design

I've more of less given up trying to sell my services developing web sites as it seems to me it's turned from a product created by scientists into one created by artists. From what I've seen that means more pretty, less content, often harder to navigate with little thought for the future. And despite all the talk about the importance of usability I'm depressed how often I see poor usability been put in the field.

These guys are also charging companies serious money sometimes too. I find it all pretty depressing. And here's an example I came across today by chance while shopping online. It's a company called Heck. They make sausages.

I've no idea who developed their web site but a glance at the source reveals that they were keen to ensure it would work with IE. Speaking as someone who spends many hours poring over hit stats that's only a small part of the picture now - for example on our main web site WalkLakes IE now accounts for only 13.6% of visitors¹.

I'd love to know how it renders on Mobile Safari, I suspect it does OK, so the developers are happy as is the customer, but² But try it on an Android phone and this what you see when you look at the how we do things page. As you can see the text is bleeding off the edge of the page and, no, you can't scroll the page right to view it!

It's not just on Android phones either. I saw it first on my netbook which was running Chrome. Now that's only got a small screen, 1280x800, so screen real estate is at a premium, but a well designed web site should be able to cope with this. No, total fail, no scroll bars, so the text simply bled off the bottom of the page with no way of scrolling down to view it.

It's fine rendered in a big enough viewport³. Having said that because the "proudly independent" board appears to be a background image the browser isn't doing collision detection for the text so you do need quite a big viewport. And, as I've said, I suspect they've coded it to render correctly on mobile Safari, on iPad at least, (perhaps one of my regular readers would like to check) but for small screens in general it's just broken.

This isn't the only page that's broken on their site. If it wasn't such a pain persuading KitKat to give me a screen shot I'd show you how the "Our Story" page renders on my phone but essentially it fails. Badly.

Anyway, moving on. The other aspect that appalled me was the choice of colour and font sizes on that how we do things page in particular, which is the page in the screen shot above from my phone. A small font, in white, on a light background? Even on my big monitor I'm squinting to read it even with my best glasses on. Whatever happened to usability?

Now I'm not saying I'm the perfect web site developer, far from it, but at the very least I do try to ensure sites I create render on all the platforms I can. I'm not convinced these guys did. What slightly surprises me is that the customer hasn't picked them up on it.

1. It's now in third place behind Mobile Safari (so that's iPads and iPhones) and Chrome (on PC).
2. I'd originally suspected the site would render on Mobile Safari but, as Simon's comment below revealed, it doesn't so I've revised this article a little.
3. Curiously it doesn't re-render when you re-size the window, not sure why and I can't be bothered to look at the code to check but that's another annoyance.