Lack of cross-resolution compatibility

Internet users use a range of browser resolutions, ranging from 800×600 to 1280×1024. It is crucial to make sure that your website caters for all these potential visitors, because if your layout doesn’t look similar in every resolution, you will have lost a large number of potential visitors. Too often have we seen websites that neglect to cater for those with smaller, or larger resolutions.

Error Number 1

Image and layout size is usually the main problem here. Keep in mind that non-fluid layouts (layouts that don’t automatically resize themselves to fit any resolution) should be between 750px-770px in width, in order to fit into a 800×600 screen resolution without being too narrow in 1280×1024. The header image itself should never exceed 350px in height, otherwise it will overwhelm the screen in a 800×600, and result in vertical scrolling just to see the whole image.

Error Number 2

Left-aligning a layout is also a major issue. Usually, the web designer will left-align a layout, making sure that it looks fine and fits into a 800×600 screen resolution without horizontal scrolling. However, by doing so, she forgets that she’s leaving a good 700px of the right hand side of the screen blank for 1280×1024 users. This creates a great imbalance in the page’s structure, and throws visitors out of their comfort zone. One way to combat this is to center your layouts by using the ‘container div’ method. For example - your coding would look something like this:

<!DOCTYPE><HTML><head>STUFF HERE</head>
<body><div id="container">
<div id="content">STUFF HERE</div>
<div id="navigation">STUFF HERE</div>
</div></body></html>

and your external CSS would look like this:

body {
text-align: center
}

#container {
position: relative;
margin: 0 auto;
width: WHATEVERpx;
text-align: left;
}

#nav {
float:left;
width:WHATEVERpx;
}

#content {
float:right;
width:WHATEVERpx;
}

The important thing to remember, if you code like this, is that the combined width of your navigation and content divs must be less than or equal to the width of the container div, otherwise, your layout won’t centre itself properly. For more information, feel free to have a look at this short tutorial from Tutorialtastic.

Error Number 3

Creating a background that doesn’t fit all resolutions is another major factor in cross-resolution incompatibility. For instance, while a screen resolution may be 1024×768, the actual browser viewing window won’t be much more than 1000×600. Too often have we seen sites that use huge backgrounds that are sized exactly at 1024×768. These web designers forget to cater for any user. Not only are these backgrounds large in file size, but they also tile unattractively in todays largers resolutions.

The best way to combat this, is to either have a plain coloured background, or to use a tiled/pixelled background, similar to the ones offered at Squidfingers, then to specify a repeating background using CSS. For example, your CSS might look like this:

body {
background: #HEXCODE URL(/path/to/your/images/folder/background.gif) repeat;
}