400 pixels or less

One of the fundamental decisions for a web designer to make when working on a new site, or updating an existing one, is what canvas size to allow themselves.

At the risk of showing my age, when I first started working on the web one of the key questions was how the site would look for those using a monitor with a resolution of 640×480 (for the younger readers: this wasn’t THAT long ago!)

Thankfully, time and screen sizes moved on.

When we updated the design of Trade Me late last year we increased the standard resolution that we supported up to 1024×768, although with code in place to ensure that the site still works well at 800×600.

If you’re interested load up the home page and try re-sizing your browser window – you’ll notice that, thanks to the magic of JavaScript, at 800×600 the logo and advertisment in the top-right corner jump up above the tabs and the font size on the category links in the body of the page is smaller.

By comparison, Xero, which has slightly more modern browser requirements, uses a fixed-width design which more-or-less fills the screen at 1024×768.

Why is this stuff important?

Well, as it turns out, people are not so quick to increase their screen size or resolution as web designers like to think.

Whenever I speak to a tech crowd I normally ask for a show of hands from anybody who is using a low-res screen (lately that has been 1024×768 or less). It’s unusual for anybody to raise their hand. But, out in the real world there are still plenty of people browsing at that resolution.

In fact many thousands of them…

Using the Neilsen Online stats for September ’07 of the ~3.5 million unique visitors to Trade Me during the month around 15% of them were using a resolution of 1024×768 (that’s 515,000 visitors) and even more incredibly just over 4% were using a resolution of 800×600 (that’s 145,000 visitors). Many of these people will be using a monitor that is capable of a higher resolution, I’m sure, if only they could work out how to increase it!

At the other end of the spectrum there are a number of different very large resolutions now in use. I’m typing this on a screen that is bigger than could have even been conceived of in the late 1990s, which of course makes life difficult for sites like Trade Me that use a liquid design.

Where it really gets interesting is when you look a little further down the list of browser resolutions. For example, the fifth most common resolution, with 1.82% market share is 214×138. That’s pretty small!

After I mentioned these numbers at the WDANZ conference I spoke at in Auckland a few months back Harvey Kane from RagePank picked up the analysis and came up with some even more interesting findings.

He made the observation that what really matters is the number of horizontal pixels available.

He looked at the Trade Me data and found:

Horizontal pixels Market share
400 or less 14%
800 or less 22%
1024 or less 45%
1280 or less 77%

That is a lot of people using little screens! Presumably many of them handheld/mobile devices?

So, there might be a role moving forward for those of us who remember designing for tiny resolutions after all! :-)

The lesson from this…

Design for your audience, not just for yourself, and always remember that they are probably nothing like you.

Right column navigation

It’s a brave person who challenges design conventions…

“Traditionally navigation on the web either appears on the left or at the top. Right hand navigation has somewhat been frowned upon. However, more recently this trend seems to have been changing with more websites adopting it. I think this is partly due to blogs, which seem to have right hand navigation by default. However, it has always struck me as strange that the convention is towards left. If you think about it there are a lot of good reasons for right hand navigation…

  • It puts the content first visually
  • Your cursor naturally hovers near the scrollbars on the right
  • We are familiar with right hand navigation from tabs in books
  • We know from usability research that whether navigation is on the left or right, it makes no difference in the time it takes to complete a task

Overall I am hugely in favor of right hand navigation and I am glad to see it becoming more popular.”

From: Emerging Design Trends

What do you think? Agree or disagree?

Consumer Unfriendly

Sometimes people don’t know what is good for them.

Here’s an example:

You cannot replace the battery in the iPhone. Because of this Apple have been able to make the iPhone much lighter and thinner than it would be if the design needed to incorporate a removable battery cover and place the battery in a position where it could be easily removed. As Steven Johnson points out, Apple are betting that a smaller phone with fewer moving parts is worth the trade off.

Another one:

You cannot use HTML formatting when describing stuff you are selling on Trade Me. Everybody wants their listing to stand out, so this is commonly requested. However, when everybody can make their listing stand out no one actually stands out – it’s just an arms race. Trade Me prefers a consistent layout where information always appears in the same location. The alternative is eBay, where every listing looks different and typically looks like a bomb just went off with different fonts, multi-coloured text and animated graphics everywhere.

Can you think of others?

Colour Blender

Here is a nice tool to use to create a simple colour palette for a website (courtesy of Rob Howard):

http://colorblender.com/

Simply enter the details of one colour that you like and the tool will suggest a palette of other complimentary colours to use.

Here is another tip: if you have a photograph or logo as part of your site design you can pick out one of the colours from the image to use as the starting colour.

For example, the palette I use on this site is based on RGB 239/227/181, which is one of the colours in the photo in the header.

Enjoy :-)

Mac-curious

I’ve been Mac-curious for a while, I guess.

All of the cool kids have one.

At Kiwi Foo Camp earlier this year there were so many Apples it was like an orchard!

What was I missing out on?

I’ve been using Windows ever since I bought my first PC in 19961994. I didn’t (and don’t) consider Windows to be broken. On top of that I was obviously at the back of the queue when they handed out the Apple kool-aid … I still don’t even own an iPod.

But, they say a change is as good as a holiday, so I took the opportunity when I moved to Xero to try switching.

A month in and I’m hooked.

I have found that most of my assumptions were wrong.

For starters, I was surprised to find that it didn’t cost much more. I priced up a Dell and sent the details to a couple of Apple fanboys. The challenge for them was to convince me to buy an Apple instead. Actually it was pretty easy for them. I’d always assumed that Macs were more expensive. While it’s true that you can buy a much cheaper PC, when you compare like with like (Apples with not-Apples?) there is not a great difference.

OS X has been a surprise too.

I didn’t expect to rave about an operating system.

And I know that there are lots of people who don’t like it. Phil for one has taken the time to document the specific things that frustrated him.

But, I love it. It took me a few weeks to get through the valley of despair – or more accurately the valley of unfamiliar keyboard shortcuts. But, now I’m there I find I’m spending much less time fighting with software and more time getting on with things. It feels like the operating system has melted into the background compared to what I’m used to.

And I haven’t had any trouble finding software to use. Like Nic I’ve been pleasantly surprised to discover a healthy industry of small application developers creating great software for OS X. My favourites so far are Yojimbo (which has replaced my hitherto dependence on OneNote), VLC, and Quicksilver. And of course Firefox (I’ve also tried Camino, but in the end went back to Firefox for the add-ons). If you’re into Getting Things Done then Actiontastic is also worth keeping an eye on (although it’s not quite there yet for me). I’m also keeping an eye out for VMWare and Pixelmator.

The switch has also highlighted to me how much of my software now resides on the net and so is independent of the operating system – Gmail, Google Reader, WordPress, Xero, etc etc.

I’ve heard a number of people say that OS X isn’t suitable for business use. Now I can understand why.

Microsoft Office for the Mac is a pale imitation of the Windows equivalent. Entourage is especially painful. I’ve failed to get our Exchange server working with OS X Mail, so for now I’m stuck with it.

I’ve started to learn Omni Graffle and Keynote, but I’m still a bit of a novice with both, so I’m not as productive.

So, until the new Mac version of Microsoft Office comes out I’m resorting to running Vista on Parallels for some of this stuff. It’s a bit of a security blanket, but I’m cool with that. It’s a feature. As Marc Andreessen points out, with a Mac you effectively get three operating systems in one (OS X, Unix under the covers, and Windows in Parallels/BootCamp). Or, for a slightly more fanboy spin on the same point: “… all computers can run Windows, but some, the special ones from Apple, also run Mac OS X.” (from John Gruber).

I haven’t tried to do any development yet – although I know plenty of great developers who are Mac users, so I don’t expect any problems and again, with Parallels and/or BootCamp the development languages and environments I am more familiar with are only a mouse click away.

Of course, the hardware itself is super sexy. As Amnon said about the Dell when I sent him the comparison: “How will you live with yourself with that monstrosity in the house?” The only downside is I have had to upgrade my laptop bag to match!

As a long time ThinkPad user I wondered how I’d go with the track pad (I always thought I was more of a nipple man!) but I haven’t had any problems adjusting. I’m now addicted to the two-finger scroll.

Downsides?

Choosing the right time to buy seems to be a secret art. I was all ready to go until a friend pointed out that there would be a new version out shortly. I realise that Apple manage to generate a lot of buzz via their rumour mill. But, I have to wonder if they don’t create a fair bit of bad-will (is that a word?) when they make sudden leaps forward in their product lines. Take, as an example, this comment from the MacRumours.com forums following the announcement of the new MacBookPro range:

“NOOOOOOOOO! I’ve just bought my new Macbook Pro! Loving it alot. But now……. a little less.”

To get around this I got a temporary machine from Rentamac for a couple of months until the new model was released. This would also be a good option if you’re not totally sure that you’ll want to stick with a Mac.

Would I recommend it?

Definitely give it a try.

I can also recommend a Mac to anybody who is looking to opt out of providing tech support to their extended family. I got an iMac to replace Mum & Dad’s old PC, and I can now honestly say I don’t know how to fix any problems they have when they call. Although, so far to be fair there haven’t been any to fix!

Now, about that iPod … :-)

Cartoon from: Hugh McLeod

[Blogged from SuperHappyDevHouse Aotearoa!]