Jump to content

correct width for website?


Rifts

Recommended Posts

This is debatable, but I generally try to have a fix width of anywhere from 980-1000 with a margin:0px auto; on the wrapping container to center it. I personally don't like using % because if someone happens to be running a tiny resolution it will shoot everything in the foot, where as fixed width forces  the page to be that big so the user with the small resolution would get a scroll bar.

 

A hybrid approach that you might consider is using something like jQuery to find the width of the window on page load, and then multiply that number by something like .9 (for 90% width) and apply that finished number as the fixed width of your parent wrapper.

It depends on the monitor resolution of your users. If you are targeting people in a 3rd world country, you may find that you need to target 800x600 monitors. In first world countries, generally targeting 1024 monitors is fine (so a width of 980px is ok). 960px is also a good number since it's divisible by 2, 3, 4, 5, 6 and 8. This means you can divide your page into various grids very easily.

 

Recently there is also a trend towards media queries, which re-arrange content based on monitor resolution, shifting things around as browser sizes change.

 

You can also use liquid layouts which are generally full width. To some degree these work the same as media queries, though media queries do it better.

 

I'd recommend a fixed min-width and a max-width, and a percentage value for the width property.. Then simply throw IE6 a fixed width in a conditional comment, and advice users to upgrade on a support page or something.

 

Keep in mind that resolutions change over time, and are likely to continue to do so for at least years to come.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.