Need Help with your Website? Email or call us on 01268 442171.

Fixing Browser and Screen Resolution Problems

The number of operating system, browser and screen resolution combinations is quite staggering:

On the operating systems alone you have all the Windows variants, the Mac options, Unix, Linux and even WebTV.
The browsers range from Internet Explorer, through Firefox, Safari, AOL, Lynx, Opera, Netscape, Konqueror, PDAs and so on.
Screen resolutions begin at 640x480 all go the way to 2048x1536 on a monitors and 320x240 on a PDA.

So, because of all these variants it is worth making sure that your site works in as many of them as possible. Not an easy job though.

Validate Your site

You first port of call should be to validate your site against the international standards approved by the WWW Consortium (www.w3c.org). This will not ensure that your site will work for everybody but it does mean that you can identify anything that could cause problems for the browser. If you want to do your checking offline then you can use the HTML validator extension for Firefox.

Bear in mind however that not all browsers comply with the standards. Internet Explorer for example is one of the worst and you may need to do lots of tweaking to make sure the site does as it should. And if you design for IE then it probably won't work in the others. Ho-hum.

My advice is to download as many browser variants as you can and build your site to the web standards. Test it in all the browsers before you look at it in IE. If it still works, well done. If not you will have to introduce some hacks. But remember that your hack for IE5 probably won't work for IE7 - it's that bad a browser.

Resources:

IE Hacks from Cave Monkey.

IE Hacks from Position is Everything.

CSS and IE7 from QuirksMode.

See your site as others do: www.anybrowser.com or www.browsercam.com

Screen Resolution

There are three ways to get round the problem of screen resolution:

The first is to make your content dynamic so that is adjusts to meet the browser resolution. Try adjusting the size of of your browser window to see how the elements on this CSS Test Page 'fold up'.
The second method is to make the site 'full width' to that it will always fill the screen. Which is fine if everybody has the same screen as you. But just because it looks good on your 1024 pixel wide screen doesn't mean it will work for somebody with a 21" monitor at 2048 pixel resolution. And reading a long line of text that stretches across the whole screen isn't that easy (imagine trying to read a newspaper without columns).
The third method is simpler but not so robust. All you need to do is put your contents in a box that will fit most screen resolutions. You will have to make a decision as to what you think is the minimum resolution you visitors will be using.

Webstats are an ideal means of discovering what sort of screen resolution your visitors are using and will help with your descision as to the width of site you build.

You also need to consider how much of the browser window is lost. The browser chrome (the bits round the outside) and scroll bars alone take up a few pixels so if you want your site to fit onto a 800px wide window your site cannot be more than 760 pixels wide (like this page). But that may get lost on a user with a browser window of 1600x1200. And somebody using a PDA will only be able to see a tiny bit of the site.

And remember as well that some people like to surf with their favorites or bookmark tab open which can take up another 120 or so pixels.

Fun isn't it?

JavaScript Resize

If you are feeling adventurous, insert the following bit of code into a test page to see how your site looks in different resolutions (version 5+ browsers only):

<p><a href="javascript:resizeTo(640,460)">Resize to 640 x 480</a><br>

<a href="javascript:resizeTo(800,580)">Resize to 800 x 600</a><Br>

<a href="javascript:resizeTo(1024,700)">Resize to 1024 x 768</a></p>

There is a problem using this code snippet with IE7 (sigh). IE regards this as active content and if you have more than one tab open the resize doesn't work. Stick with Firefox - it's much nicer.

Help

But if it still won't work the way you want it to then get in contact and I'll see if I can help fix it for you.

Need Help with your Website? Email or call us on 01268 442171.

top