September 10th, 2007 - by Golgotha

I’m talking about screen resolutions people!

widescreen monitor

Today widescreen monitors are becoming more the norm than the exception. You’d be hard-pressed to find anything other than a widescreen monitor at your local Best Buy store.

In addition, laptops are also increasing their display sizes — that new MacBook has a display that is bigger than my first TV!

You might also recall that in 2003 the New York Times reported that laptops now outsell desktop computers: “Laptops accounted for more than 54 percent of the nearly $500 million in [US] retail computer sales.” This trend continues today. And we know that laptops have always used higher screen resolutions than desktop computers.

So I think we can safely say that widescreen displays and thus higher screen-resolutions will only continue to grow in popularity.

So are we, as developers, taking this into account when we build websites?

When I look around the web my thought is no, we aren’t!

I use a screen-resolution of 1280×1024 at work — this creates a lot of unused or empty space on many, if not most, websites. The higher the screen-resolution, the more empty space. Let’s look at some popular websites at the 1280×1024 screen resolution and notice all the empty space:

No, I’m not trying to insinuate that Search-This is somehow better than these other websites because we have zero unused space. Rather, I’m just showing the difference between a website that has been designed with a fluid or liquid design in comparison to that of a fixed design. In a fixed design you have a specific width and it does not change to accommodate the size of the monitor or screen-resolution. In contrast, a fluid (or sometimes called liquid) design will have a width that stretches to fill the screen.

It’s not to say that a fluid design is better than a fixed design, but with the increasing monitor sizes and screen-resolutions it’s certainly something to be aware of. This post was conceived while playing poker at a friend’s place. On his wall he mounted his 50″ HDTV, which also doubled as his monitor for his computer. So in between Texas Hold’em hands I would surf the web and it looked strangely weird to see almost the entire display wasted. I was very pleased to see the fluid display of Search-This fill the screen. It really was quite the contrast. I couldn’t help but think to myself as I surfed the web from his HDTV that in the future more and more people will probably be doing the same thing — surfing the web from their TVs during commercials. Yet most websites are not ready for that.

Below is a weeks worth of visitors to Search-This and their screen-resolutions. From it we can see that at least 70% percent of the visitors have a resolution higher than 1024×768. Search-This visitors are extremely geeky so they are probably not a good sample size, but what the geeks use today the mainstream uses tomorrow. 🙂

Is your website’s design ready for widescreen monitors?

13 Responses to “You Could Use An Extra 2 Inches!”

1 Patrick Burt

One counter-point to include is that Fluid Website layouts + widescreen monitors makes for long line lengths and difficult readability.

2 Golgotha

Good point Patrick – designers certainly have more to think about now.

3 Frenzie

I do not have a widescreen, but on my 1280*1024 monitor I find it pleasurable to browse with a sidebar enabled in which I can manage my mail, newfeeds and other panels. I know that my mother, who uses IE7, also likes to browse with a sidebar, except she likes to have her browsing history in there (since a little more than a month she also has a 19 inch 1280*1024 monitor).

Of course the beforementioned fluid design would thus work exactly the same as if it were on a slightly lower resolution (think minus 150 to 300 pixels depending on personal preferences and resolution), but I don’t think it’s at all uncommon from what I see around me. The example of my mother is just because she isn’t what I’d call in any way a “poweruser” like you could probably say most of the people I know are, many of whom also use sidebars… if their resolution reasonably permits it. It’s probably more common among Opera and Seamonkey users than among others though.

Aside from that, I quite like the look where not all of the screen is used, also seen on this site when you scroll down from the in-page sidebars. This is actually the main reason that I did it like that on my personal weblog. On the examples given I’d say also looks like it was consciously intended to be like that as well, rather than an oversight. The copyblogger and zengarden layouts do have a tad of an oversight feeling over them however. Maybe it’s an added feeling of luxury that you can afford to simply not use an inch or two of your screen? Just saying it’s not neccesarily a bad thing to let some inches go unused. 😉

4 Golgotha

@Frenzie – Oh, I’m certainly not saying that a fixed design isn’t good. Nor am I saying, just because there is zero unused space that it’s a better design.

What I am saying is that with HDTV’s and widescreen monitors becoming much more prevalent you might want to think about that in your next design layout.

I will go out on a limb and say that I think many designers use a fixed width though because it’s significantly easier to design.

5 Frenzie

I was thinking more of appliance of max-width (and possibly min-width) than fixed design. =)

6 cpradio

Frenzie, I think that is a good point to make, as more browser take proper use of max-width and min-width or make use of them at all, designs will change to help use those.

I have also been wondering what type of affect the iPhone is going to play on development in the near future too. With smart phones becoming more and more popular due to good design and a ton of features that everyone wants and doesn’t feel overwhelm by, we may see max-width and min-width put in a lot more different ways and probably stylesheets loaded dynamically based on the technology/device being used versus the browser being used.

In either situation, I look forward to better CSS, better JavaScript, and the technological advances that drive HD and smart phones into the price ranges of the Average Joe.

7 Rob O.

I was just pondering a related point with the guys at work today – will widescreen become the de facto standard for PCs?

Already, you might be hard-pressed to find a consumer-grade notebook released in the past 3 months that’s not widescreen. And I’ve noticed that the major PC vendors are pushing widescreen monitors with their desktops more & more.

So, will the “normal” aspect ratio monitor most of currently have in the near future become as outdated as CRT monitors?

8 John

Not only do you need to think about bigger screens and higher screen resolutions, but also smaller screens too. There are already more mobile phones in existence than desktop PCs and trends indicate that an increasing large number of those users are now accessing the Internet from their handheld devices.

So if anything, I’d be more concerned about sites that fall apart on smaller screens than those that leave empty space on bigger screens.

9 Golgotha

@cpradio and John – good call, smaller screens are certainly something to consider too. There is that CSS media type ‘handheld’ that I would think you could use? I haven’t used the ‘handheld’ type yet, but I imagine it would be similar to the ‘print’ type that I do use. Something to play with. I still get hacked off when sites don’t use the ‘print’ type.

@Rob – I still use an older CRT at home, because they are supposed to be better for gaming (refresh rate). At least that used to be true? Not sure if it still is? I’m sure we will all be using the flat widescreens before too long.

10 Paul Bradish

When I design websites I usually go with a fluid design. In most niches I’ve found that the average visitor is still on 1024×768 and IE :).

My technical blog however is a very different story… I would say the average resolution is higher and an overwhelming majority of Mozilla Firefox users!

11 rAm

You made a very pertinent point.

following the above conversation, i am wonder if there is any way to find have a fluid layout until a resoultion and have it behave fixed after that.
eg: until 1280* resolution, it behaves fluid and after that it behaves fixed?

any thoughts!

12 John

@Golgotha – the handheld media type isn’t very widely supported unfortunately (e.g. the iPhone doesn’t support it).
@rAM – you use max-width.

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Other Sites