10 Ways to Win Web Awards

It was close, but no cigar… one of our sites was nominated for the Clynol Best Salon Website of 2007 award.  Sadly we didn’t win it, but we looked at the competition and then at which site won.  We realised that with many of these awards the depth of analysis isn’t that deep.

Here’s how to get nominated:

1. Impressive landing page – the first page people land on should be visually striking.  Pretty girls do seem to help on this, sadly, but it’s not the only way.
2. Simple design – keep it simple and clean, at least on that front page, because that’s the one that will be looked at the most.
3. Don’t worry too much about usability, at least at this stage, because the testing won’t be deep.
4. Don’t worry about standards either, most of these folk won’t check.  Shame, but true.
5. Keep the word-count down – too many words distract from ‘impressive’.

And then, of course, comes actually winning it:

1. You won’t have any idea of the criteria against which your website is being judged.  It could be that the judging panel is looking at print-outs, has a passion for flowers, or anything – so don’t worry about it.  Also consider that the judges don’t necessarily know a thing about web design.  Just keep doing cool websites and the awards will come soon enough.
2. Make sure the site is usable, at least on a superficial level.  If they want to find the location, make it easy to find.
3. Trendy is good – but it does depend – web design and paper design trends are increasingly divergent, although they’re definitely influencing one another.  Also remember, if you’re being judged by designers (paper or otherwise) then what they consider to be leading edge is quite different to that of the average person.
4. Flash sites win a disproportionate amount of awards, given their poor compatibility and search engine performance.  But there you go – if you want visually striking you can save a bomb by using Flash instead of html and css.
5. Performance is paramount – any judge will be looking at a lot of sites.  If they’re viewing through browser windows they’ll be quickly bored – your site has to load quickly and respond rapidly.

To be honest, we were surprised we were nominated – it came entirely out of the blue as the site had never been submitted by us to any competition.  It wasn’t even a site we could feel was a particularly wonderful piece of work.  It was fine, and the client is delighted.  But what this nomination did do was to make the client feel justified in using us.  That alone is worth a fortune, and he’ll have told everyone who’d listen.

Coming Problems with Web Design

I just read an interesting article in A List Apart about how browsers that are forgiving of bad markup and css are bad for the web.

And I totally get it.

In fact, a failure of how standards apply to web pages is one of the reasons why, until really quite recently, I’d avoided having anything to do with Web Design. I hated it. I hated that even if you structured your code correctly it would look right only in half the browsers you tested in.

Well, this is going to change over the coming five years. Standards will become far more important, and odd hacks will slowly fade into the background. Browsers, my friends, are going to have to become a whole lot less forgiving.

And there lies the rub – with tougher browsers, building websites will become a lot harder for non-technical types. In fact, it could become near impossible. On the upside, tools like WordPress will be able to offer more choices to the user because the code will know that what it outputs to the browser will work.

So the internet’s going to get a lot better in the coming years… but if you’re not prepared to work hard at it then becoming a web developer or designer is going to become far tougher.

Go from three inches to, erm, 40 inches!

No, not spam, for a change, but the problem of designing for a world where your website could be viewed on anything from an iPhone or Nokia N95 (tiny screens, no Flash) through to a Playstation 3 or Wii connected to 40″ or larger TV screens.

They all have different resolutions, colour rendering (view the pictures below), interfaces, and so on.

Let’s take a look at this picture:

In the picture, you have three things connected to the internet, all wirelessly, running three different browsers and on different resolutions.

I’m now going to be quite geeky and go through the different displays and browsers involved…

LG 26″ LCD TV, Opera Browser on a Nintendo Wii

Now, sadly the Wii isn’t known for its high res capabilities. It runs at This means that the best it can do with most websites can be described as ‘passable’. The browsing experience isn’t actually too bad once you’ve got your favourites in. Funnily enough, the requirements for good design on this setup are remarkably similar to the little iPhone hiding beneath it – because of both the low resolution (a Wii, I believe, outputs at 854×480) and the clumsy control systems on both. You need big, easy to click links, clear design, and no Flash.

The screen is 56.5cm by 34cm giving an area of 1921 cm2 and 409920 viewable pixels.

Laptop 14″ Widescreen, Running XP and Firefox

Now this is a more conventional screen resolution. 1280×768. The dpi is conventional (I’m guessing about 96dpi off the top of my head) and the OS, browser and CPU all are up to the job. Most people should get it right for this sort of system, but it’s worth bearing in mind a few things… you can see that it’s nothing like as bright or white as the other two displays in the image. Yep, you got it – all screens render colours differently. That means you have to pick your colours carefully. We had a burnt orange on a website that a client insisted on once. It looked like an insipid green/orange on a cheap old Dell screen.

So not only do we have to think about all the different sizes, we have colours to worry about too! For our own designs we check on a number of screens to make sure colours don’t go weird. Some will, some won’t, and it’s hard to predict.

The screen is 30.5cm by 18.5cm giving an area of 564 cm2 and 983040 viewable pixels.

iPhone, Running Safari

The iPhone is the current geek status symbol mobile phone. I got mine as a Xmas present and in terms of web browsing it’s really moved the game forward. As a phone it’s a bit sucky compared to more phone like mobiles (if you see what I mean) – no voice dialing and ropey bluetooth support means that making phone calls as I drive is no longer a safe game – I can’t simply prod the bluetooth button on the dashboard, say the name of the person I wish to speak to, and continue. But I’m going off on a tangent.

By bringing us a very neat and portable web solution, the iPhone and iPod Touch have made surfing the net while waiting at a train station, or sitting in the garden a far easier proposition. And they’ve sold millions of them so far. And you can be anything that people owning them are visiting your website. And if your site is hard for them to use, they’ll get their kicks elsewhere and maybe, just maybe, be drawn to a rival’s website. You wouldn’t want that would you?

The screen is 7.5cm by 5cm giving an area of 37.5 cm2 and 153600 viewable pixels.

Right, So They’re Different…Tell Me Something New!

Now ok, that’s shown they’re different – quite markedly so. And what does that mean? Well it means that if you want your website to work with all browsers, you’re going to have to take a good, long hard look at what you’re offering to those different users.

An iPhone user is possibly on the move, trying to poke links on a moving bus. A Wii user is shakily pointing their remote at a screen that may well be larger than the owner. A laptop owner has a nice, precise mouse. A desktop PC of course could be a different proposition. A friend of mine uses a simply vast 30″ monitor for doing artwork – his browsing experience is vastly different.

And consider this: the screen area of a 26″ TV is 51 times larger than an iPhone, and the resolution of a laptop screen is way higher than most other things. I saw one laptop with a 1920×1200 screen recently and the dpi was ridiculously dense (if slightly gorgeous for picture viewing!) – that means they may have larger fonts. What’s your design going to do with that?

Ten years ago screens ranged, mostly, from around 640×480 to 1280×1024. Anything outside of that scope was rare or had a very limited browser.

My point then is that if we’re going to service the needs of the now widely varied viewers, we have to make some hard decisions. Fluid design isn’t the answer – reading a 20″ long line of text on a big monitor is horrible. Perhaps larger sites, with more money, could serve up different versions of their content, designed for different screens. BBC does that, with designs for tiny WAP mobile phones, PDAs and full browsers. Our sites have a mobile css for small screen mobile phones, though it doesn’t detect all of them. It just serves a cut down text only version of the site.

The web industry is starting to get hard, both businesses and designers need to know this. I believe that their current practices could leave them only servicing 40% of potential visitors in the near future. And that simply won’t do.

The Wicked Problem

I was reading through some project management methodology just now (yay! My life is full of joy at last!) and came across the phrase “The Wicked Problem” in this line on Wikipedia:

Steve McConnell in Code Complete (a book which criticizes the widespread use of the waterfall model) refers to design as a “wicked problem” – a problem whose requirements and limitations cannot be entirely known before completion. The implication is that it is impossible to get one phase of software development “perfected” before time is spent in “reconnaissance” working out exactly where and what the big problems are.

It’s worth following the link.

I think software and design processes often end up trapped within this circle where nothing’s ever perfect. The iPhone isn’t perfect, for example – it may be ever so pretty, but it’s quite rubbish at Bluetooth connectivity, for example, or sending texts. In fact, it’s rubbish at a lot of things. One of its smartphone rivals, the N95, has a habit of crashing in certain situations, and flattening its battery in two hours because it’s furiously running an application in the background.

Same with websites. Our company site, Interconnect IT, will never ever, in my opinion, be perfect. Unless we simply devoted all our energies to that site – but then we’d have no time to working on client projects. We’re still a three man company, so we can’t have a £200k site. But we can be clever and cover 95% of the requirements.

With client sites it’s even trickier – we have to interpret a clients’ requirements, write them down, and send them back in a proposal with a rough mock-up, pricing and structure. They’ll read it quickly and usually accept. But once started they’ll look at the design, try it out, and realise that actually, the front page should have a simpler message. That may mean a restructuring. A week later, someone may point out that the colours they preferred have negative connotations in certain cultures.

All these require changes, sometimes at a late stage, and sometimes involving a lot of work. At some point, someone has to simply say – “OK, that’s good enough!”

Other clients, however, quite like the waterfall method. We have forms for certain business sectors, with consistent requirements, where they simply tick off what they want and like, choose an off-the-shelf design, and a couple of weeks later we deliver the website – all loaded up and everything. They then sign-off, or they ask for some revisions – images changed, copy edited and so on. It’s particularly suited where a small and busy firm needs a website, but it’s not really crucial to their business – it simply provides a service to people who already know them. Dentists, for example.

Spotting the iStockphoto effect

iStockphoto.com is one of those little secrets that people outside the web, design and photography worlds rarely hear about. Yet once you’re involved in this industry you learn to quickly spot pictures because frankly, they’re all over the place.

But we don’t mind – it’s a cheap source of images and graphic art for clients who are working to a tight budget, and it gives many artists and photographers access to new markets. Everybody’s a winner.

Well not quiet – while we cheerfully admit to where we get some of our images and graphics from, many rivals don’t. Most recently we saw one rival offering ‘custom’ Xmas e-cards for about £350 a piece. They would (we hope) have been bought on a less restrictive license than usual, but you’re still looking at a low cost item.

To show you, here’s one we did ourselves, in just five minutes. Not £350 worth of work. At all:

We could do about fifty in a day, at a cost of no more than about £100 plus our time. It’s even done in our in-house web-design style, which means there’s a pre-masked layout to work to. Easy-peasy.

Clearly, the road to success in business is more to do with marketing than fair pricing! Then again, I remember the realisation came that even if you could make a Coke rival product for 5p a can which tastes just as good, it probably wouldn’t outsell Coca-Cola, because people aren’t rational creatures when it comes to pricing. In fact, they’d be suspicious as to why it was so cheap.

I guess the same thing would apply to solicitors and the like, albeit in a slightly different way.  You go round to a few and they all offer to do the work for around the £150-£180 per hour level.  If one came up with a price of £20 an hour you’d immediately be worried as to whether they were professional or not, qualified, and so on.  Of course, the £150 an hour rate is going to exclude many people, so lawyers, rather than doing anything cheap, tend to get involved in pro-bono work instead.

Make My Logo Bigger!

You know, they say the customer is always right. Sometimes we may feel like this, but ultimately if a customer wants it, they should have it.

And these products let them have it:

Make My Logo Bigger