Defining Width: How to Make Your Site Cross-Browser Friendly

A million and one (or two) things go into the planning of a good website design. By good, we’re talking about something more than a list of links all bulleted down the page … which isn’t going to get you very far in the search engines anyways. We’re talking about a web design that will keep you happy for at least a year. Most professional web designers have one goal in mind as they begin a new website design: make it look as good in Internet Explorer as it does in Opera, Netscape, Firefox, and every other browser currently in use. What it amounts to is deciding how wide your website pages need to be. Start with how wide your pages need to be in order to be viewed by the widest range of monitors and browsers before you draw a single block or code a single line, and your website design will stand the test of time. Websites and Resolution Only a few years ago – ten at most – the average household had a standard 640×480 resolution monitor. Anything beyond this was unreasonable. It would break the bank to go for anything more than a 14-inch monitor, so web designers had to focus on designing for this small-monitor-audience. By 2004, studies showed that less than 2% of all website traffic had a monitor that little. These are the numbers you need to start with. If you already have a website up and running, you can quickly check your server logs (easy if you have CPanel installed – just hit “Statistics” and read away) to find out what resolution most of your visitors use. Today, the common resolutions are 800×600 (which is quickly going the way of the dinosaur), 1024×768, and 1280×1024. If you can’t access your server logs, or you don’t have a website running to reference, you should be fine designing for the median – 1024×768. Websites and Browser Width You didn’t think you were going to have it that easy, did you? Sure – you’ve got a good starting point … aim to make your website pages around 1000 pixels wide. There is an element you can’t see by resolution alone, though: the width of a browser. When browsing the Internet, most people keep their window smaller than full screen so that they can quickly access other programs that are open or to hit a shortcut on their desktop. What this means for a website design is that your estimate of 1000 pixels might not be very accurate – someone on a 1024 wide screen might only be using 800 pixels of that space for the Internet browser they’ve got open. If your website design is wider than the resolution viewers are using, they will have to scroll horizontally (from left to right) … and will often not do so. So let’s say that your visitors are on a 1024 pixel resolution, and they minimize their browser window. This makes it easy to round the number off to 1000. Now, get ready to knock a few more pixels off – you have to account for browser borders. Every Internet browser (Internet Explorer, Firefox, etc.) has a series of elements that make the viewable portion of a website even smaller. There are scrollbars, program window borders, and user-elements like bookmark panels and page-search boxes. To make it easy on yourself, knock the number you originally started out with down by about 50 pixels. On an 800×600 resolution design, you’ll want to aim for a width of 740 pixels. 1024×768 would become a 980 pixel-wide design, and a 1280×1024 resolution design shouldn’t be more than about 1200 pixels wide. Websites and Fixed or Flexible Width Pages To a certain extent, you can solve your page-size debate by making the width flexible. The difference between a fixed width page and a flexible one is just like it sounds – fixed width pages will not change no matter how big or small it’s viewed at. Flexible width pages will. There are good reasons for both options. A website that has to look exactly the same no matter what – e-magazines, for example, and other sites with lots of “sections” – are often created in a fixed width page for no other reason than that it will always be the same size and the layout won’t change from viewer to viewer. Websites that place most of their content in one section of the page can be made flexible width without any layout issues. The way to design your widths – at least as far as the html is concerned – couldn’t be more simple. To make a fixed width layout, all your page divisions need to be measured in pixels. Flexible width pages should use percentages in page divisions. Easy-peasy. Take some time when you consider how your website design will appear on different browsers. This alone will affect your design options, and help lead you through the design creation. To be pretty easy on the widest variety of users, stick with the median width – 980 pixels after all is said and done – and play around with mixing fixed width and flexible width elements in your design to appeal to larger-resolution users.