Picking a width for your website
Wednesday, January 29th, 2003 | Programming, Tech
So you’ve designed your perfect homepage. The only problem is that it doesn’t fit on anyone’s screen but yours. Suddenly you are finding you have to redesign your site so it is more accessable to everyone and your amazing designs and idea’s are laid to waste.
When first building your website you need to decide how wide your going to make it. If its just formatted text going across the screen then you are ok, but for most of us, we need to set a width for our tables and layers which is bound to cause problems somewhere along the line.
100% width
The easier way to make a site fit is to set the width to 100%. It will stretch across any screen so no problems you say. However its not as simple. Designing a site with 100% width is not always that easy as you have to make sure everything will squash down – no point using 100% width if your images won’t let it go down futher than 900 pixels.
You still really need to pick a width as any images and menu’s that make your site wide will set the width for you. People on 640 X 480 screens with browsers in shrunk mode would probably like your site to squash down to about 400 pixels. Test if your site will do that (though don’t worry if it won’t).
100% width works good for sites such as Microsoft.com and Worfolk.biz who have a lot of product information and so use text with can go across the screen and still squash down easily.
700 pixels width
This is the site I use for most of my sites. I use it because I can fit a banner into it and still have room for a 200 pixels wide logo next to it. The only problem with doing this is that its slightly too big for people with 640 X 480 screens and slightly too small for 800 X 600 screens. I consider it a nice balance though.
A lot of sites go for a 800 pixels wide screen so that it wil fit on a 800 X 600 screen now as people using 640 X 480 are become rarer quickly – I’ve been using 1024 X 780 for years now. Ever Yahoo is now to big to fix on a 640 X 480 and has been for a while too.
A fixed width site works well for sites which have content in the right place, all neat and correctly laid out in sections such as Msn.com or Mworld.us.
Other options
MSN use javascript to show hide layers. If you read Java Junky (MXL Magazine column) then you will know what this is about. Bascially if the browsers screen is big enough, they add extra information dowen the left column – Full screen your browser on one of the channels and then shrink it to a fairly small size. Some content should disappear (probably the channels menu) from the right hand side.
They also have a script on their homepage so that it rearrages the content for people with 640 X 480 screens so it fits on them while using up the space nicely on a 800 X 640 screen.
Conclusion
If you site isn’t almost all text then go for a set width such as 700 or 800. If you don’t have any menu bars or extra content down the side then you might even want to go for 600 pixels like Worfolk Online uses (or used to use depending on whether it has changed since I wrote this). Test it out on different screen sizes and see what looks good. Check out what the competition does. When you’ve found something you like – stick with it.
So you’ve designed your perfect homepage. The only problem is that it doesn’t fit on anyone’s screen but yours. Suddenly you are finding you have to redesign your site so it is more accessable to everyone and your amazing designs and idea’s are laid to waste.
When first building your website you need to decide how wide your going to make it. If its just formatted text going across the screen then you are ok, but for most of us, we need to set a width for our tables and layers which is bound to cause problems somewhere along the line.
100% width
The easier way to make a site fit is to set the width to 100%. It will stretch across any screen so no problems you say. However its not as simple. Designing a site with 100% width is not always that easy as you have to make sure everything will squash down – no point using 100% width if your images won’t let it go down futher than 900 pixels.
You still really need to pick a width as any images and menu’s that make your site wide will set the width for you. People on 640 X 480 screens with browsers in shrunk mode would probably like your site to squash down to about 400 pixels. Test if your site will do that (though don’t worry if it won’t).
100% width works good for sites such as Microsoft.com and Worfolk.biz who have a lot of product information and so use text with can go across the screen and still squash down easily.
700 pixels width
This is the site I use for most of my sites. I use it because I can fit a banner into it and still have room for a 200 pixels wide logo next to it. The only problem with doing this is that its slightly too big for people with 640 X 480 screens and slightly too small for 800 X 600 screens. I consider it a nice balance though.
A lot of sites go for a 800 pixels wide screen so that it wil fit on a 800 X 600 screen now as people using 640 X 480 are become rarer quickly – I’ve been using 1024 X 780 for years now. Ever Yahoo is now to big to fix on a 640 X 480 and has been for a while too.
A fixed width site works well for sites which have content in the right place, all neat and correctly laid out in sections such as Msn.com or Mworld.us.
Other options
MSN use javascript to show hide layers. If you read Java Junky (MXL Magazine column) then you will know what this is about. Bascially if the browsers screen is big enough, they add extra information dowen the left column – Full screen your browser on one of the channels and then shrink it to a fairly small size. Some content should disappear (probably the channels menu) from the right hand side.
They also have a script on their homepage so that it rearrages the content for people with 640 X 480 screens so it fits on them while using up the space nicely on a 800 X 640 screen.
Conclusion
If you site isn’t almost all text then go for a set width such as 700 or 800. If you don’t have any menu bars or extra content down the side then you might even want to go for 600 pixels like Worfolk Online uses (or used to use depending on whether it has changed since I wrote this). Test it out on different screen sizes and see what looks good. Check out what the competition does. When you’ve found something you like – stick with it.