Now more than ever the question of screen resolution pops up on Web Design forums all across the Internet. With the majority of web users using 1024×768 screen resolutions on their desktops many a designer has considered ditching the popular 800×600 fixed-width layout in favour of fitting more information before the fold (before the user has to scroll to view more).

To be honest I’m slightly surprised that this argument has decided to rear its ugly head already! It’s true that the majority have shifted upwards in terms of resolution, mostly through the eventual shift to new hardware, but there is one factor many people still seem to be missing when designing their web pages.

Screen Resolution is POINTLESS!

Should we be ditching 800×600? Absolutely not! Firstly, there are still a sizeable amount of people still using 800×600 resolutions on their computers, most likely around the 5% marker. Whilst that doesn’t seem like a lot that is still one in twenty of your users that will leave your website after needing to scroll to view your page as it is intended. Secondly, mobile internet technology is starting to kick off now, what with the iPhone and its competitors looking to improve mobile browsing’s ugly reputation. You’ll often find now that some mobiles run in 800×600, a size big enough to be considered a ‘normal’ browser size by industry leaders. Whilst my own opinions on mobile browsing lead me to think that an extremely small number of users will access the average website on a mobile device (I’ll leave that for another article) it’s still discriminating against a key section of your users.

My final point is the knock-out reason as to why completely ditching 800×600 support is a very bad idea, and that is Browser Resolution.

A users’ screen resolution is a useless variable to keep because it only shows the highest resolution their browser can reach. If you design a web page to fit perfectly on a 1024×768 web page then you’ve not only ruined the page for those on lower screen resolutions, but those who do not choose to maximise their browser screens.

So what are your choices when it comes to choosing a width for your design?

Fixed Width Layout

A fixed width layout means that the width of a defined area on your web page is set to a static value. It will not change depending on the size of images, text or browser size. Today it remains the most popular method of serving up a web page, due to factors like heavy image use and strict design rules imposed on the layout.

Whilst this is ideal for many people due to its ease of design and acceptance amongst many it has become an increased problem for those who use high resolutions on their desktops.

When defined in the CSS style-sheet of a web page the width property will most often use a static method of defining the width, the most popular being by pixels. It is defined as follows:

body
{
        width: 760px;
}

Fluid Width Layout

A fluid width layout changes according to the size of the browser window. Again this sounds great in theory as it can accommodate everyone no matter what resolution they use, but the problem lies again with those who use large resolutions. A lot of people find it extremely difficulty to read text on an average web page, but if they were to use a large resolution on a web page stretching across their entire screen what would take up five lines in 800×600 could take up half a line on their page. It’d be the equivalent of reading a metre-long newspaper, something that I’m sure many of us would hate to do.

This time the method of defining the width properties of select elements changes. Before when we looked at the fixed width layout width was define in pixels, a static length on one persons computer. With the fluid layout we want the layout to fill the entire page, so the ideal method is to use percentages. This way the length is dynamic based on the width of the users’ browser screen.

body
{
        width: 95%;
}

Elastic Width Layout

The previous forms of layout have been fairly self-explanatory. Fixed defines a fixed width on an element of a web page, whilst fluid allows these elements to move into what space they require. Elastic is where a layout is stretched based on a variable, and that variable is text size. As the user (or designer) alters the text size defined elements of the web page change width.

This has solved the previous problem of a line of text being too long, but not without its own drawbacks. This time, depending on the size of the text the width may become too big for the browser window, resulting in a horizontal scroll-bar, and there are very few people that would want to scroll their pages left and right to read every line of text.

The width property is now altered using em’s. Em’s are a relative size (e.g. 1em, 0.5em, 2.5em, etc), based on either an elements pre-defined size elsewhere in the code (default is 16px), so if a user were to define a piece of text as 0.5em, the actual size of the text would be 8px (0.5 x 16 = 8), or what the user defines as the size of the text in the browser.

body
{
        width: 65em;
}

Hybrid Layout

Now we’re left with the hybrid layout, which as the name suggests is a mixture of all styles. This method aims to take what the designer believes to be the perceived best qualities (depending on your layout’s needs) of each style to create a layout that works well for the website’s demographics.

body
{
        max-width: 65em;
        width: 95%;
}

Max Widths

The max-width property in CSS has both its upsides and downsides, so firstly I’ll begin with the positive.

When using a fluid layout style it is possible to use images in your layout without their static size breaking your layout. This is done by, you guessed it, defining the max-width property for your images. This is done like so:

img
{
        max-width: 100%;
}

The problem is that the max-width property does not work with Internet Explorer 6, a browser that I’m sure many of your users will use. There are workarounds for it, but in general it’s not worth the trouble when there are plenty of other means. Perhaps soon there will be a time when it can be used safely without discriminating against certain users,

Change style-sheets with JavaScript

It’s possible to change the style-sheet when a user loads a page, but it is a method that is frowned upon. Firstly, it relies on JavaScript, a scripting language that many people choose to disable. Secondly, it means that maintenance on your CSS will be extremely difficult, almost like altering the design for two websites in one. Whilst in theory a JavaScript changer would be an ideal approach the issues it faces are too great for it to be a viable solution for either user or designer.

So, what do I use then?

That’s the joy of CSS! By looking through what each type of layout can offer you/your clients you are able to come up with a nice-looking layout that will suit your website and mainly your users. For example, if you were creating an informational website a fluid or elastic style may work best on the encapsulating element, whilst a menu will require a fixed-width.