David Emery Online

Recently A List Apart, one of the top css/web site design sites, went through a major redesign. First off, the site does indeed look brilliant, with a sophisticated look that fits in well with the vast amount of content contained within.

However, they made a design choice that I think is so fundamentally wrong that I felt I needed to weigh in on as the issue is so important (even though it’s been discussed at length elsewhere):

The site is designed to fit on a screen 1024 pixels wide.

Now, why is this a problem, I hear you ask?

Currently, most people design their sites for screen sizes of 800 pixels wide (which equates to 771px after you take into account for scrollbars and other window furniture) and this was because 800px x 600px used to be the most popular screen resolution.

These days, less and less people are using screens of 800×600 with most people using 1024×768 or greater, so I’m sure the guys behind the A List Apart redesign looked at their stats (you can tell what size screen people who browse your site use) and decided that the amount of people using 800×600 was so small that they weren’t worth worrying about.

Wrong, wrong, wrong!

The problem comes really very quickly: If, for whatever reason, you don’t have the browser window maximised to full screen, you will almost certainly have to scroll left and right – which is unacceptable to me as both a user and a website designer.

There are many different reasons for not having the window fully maximised – As you can read below I use SafariStand with Safari on a mac which gives me a sidebar with graphical tabs, and hence I have to scroll horizontally on A List Apart. Sidebars are pretty common; IE on the PC uses them for favourites, Firefox for history and they are a feature of pretty much every browser out there.

Also worth remembering is that the user may not have their browser maximised anyway – I’m pretty sure that IE on the PC doesn’t come up maximised by default, and Safari on the mac certainly doesn’t (and don’t forget, most people to change the defaults).

The reason for standardising on 1024 wide is simple, however: design. Designing so that your site works well on both a small 800×600 screen all the way up to a 2560×1600 30” Cinema behemoth is, however, a big challenge (easily the hardest thing to do in web design).

But, what can we do about it?

Obviously, using a fluid css based layout is the first place to start (please ignore the fixedness of this site – it’s overdue a markup re-vamp), with at least a elastic content column so that you utilise all the available space. Next, though, to the magic:

We’re onto Web 2.0 now, right?

(If you haven’t heard of Web 2.0, it’s the latest buzzword going round at the moment, but refers to the latest set of web techniques such as advanced javascript, css and a host of other things).

So how about using javascript for flexible layouts?

It’s easy to get the width of the browser window in javascript, which enables you (with a bit of light scripting) to feed the user different layouts and graphics depending on the window size. For example, as standard (for people either without javascript or with small windows) you could use small graphics that fit onto a 800px wide screen. Then, you could resize the image up depending on the window size, dynamically loading in higher res versions depending on the size used.

Or instead of resizing the images, move them about to fit the space better (changing them from being a 2×2 square arrangement to 4 in a row, for example), or maybe increase the font size of certain pieces of text.

There’s an almost unlimited amount of variation you can do using javascript – making it easy to take you design, decide what you’d like it to look like at various sizes and implement the optimal solution for each one.

Then everyone can look at your website and have the best experience possible, and surely that’s a good thing?