How wide should your website be?
A question asked by many people new to designing websites is "How wide should I make my website?" It's important to figure out the perfect width for your website so that you can display your content nicely without requiring horizontal scrolling.
Your website's audience
When deciding on a width for your website, it's important to think about who will be seeing your website. For example, if you plan on having a website targeted at people who would probably have older computers with smaller monitors, you should stick with a narrower design. If you think that most of your target audience would have widescreen monitors, you can try making your website wider.
According to Google Analytics, the most common screen resolution of visitors to FWebDe.com is 1440x900, at about 36%. The narrowest resolution is 1024x768, at about 9%. The main content box is 872px wide, so there shouldn't be any problems with horizontal scrolling. However, some people may not have their browser window always maximized. My monitor resolution is 1440x900, but I've set my Firefox window to 1250x770.
With more and more people using netbooks with smaller screens, It's becoming more important to have a narrower website. It's important to consider whether your visitors would be using desktops or laptops.
Also, with more people using mobile devices for internet surfing, it's important for your website to scale down nicely for viewing on tiny screens. Just don't make your website the smallest size possible just for mobile devices.
Don't set a specific width at all
Probably the best way to set the width for a website is to not set one at all. At least not a fixed width. Instead, specify widths in your stylesheet in percents so that when a person resizes their browser window, the box resizes with it. However, someone with a very large widescreen monitor may maximize their browser window and cause your website to look too wide. Though a person with a large monitor probably would not occupy the entire space with one window for this reason. Therefore, you can use the css
max-width property to set the maximum width of the box. Unfortunately, this doesn't work in everybody's favourite browser, IE6.
To get around this problem, add
!important to your width in percent, and a width in pixels under it. IE6 will use the second value, and all modern browsers will use the value with