I am confused on how wide the layout should be

I am creating a mock-up of my site and I used the 960 grid to organize the homepage. Now I am moving on a typical webpage, which will have two columns - the sidebar and main content.

Is it common practice to include the sidebar and main content within the 960 grid or do most web developers use the grid for main content only? When I take screenshots of various websites I find that the width
of the layout is more than just 960 pixels.

Ideally you want the web page to fit within the browser viewport without a horizontal scrollbar. That’s why many sites have moved away from fixed width and now have responsive layouts where the width of the main content adjusts and where the sidebar may move under the main content for narrower widths. Almost no hand held devices will display a 906 width without a horizontal scrollbar and the most common screen resolution for computer monitirs will only fit 950 width if the browser is open using half of the screen with something else optn in the other half.

Hi SwiftorNY. This question is somewhat redundant these days, as there are many screen sizes that a site ideally should account for, meaning that a fluid/flexible layout is more appropriate. You might want to set a maximum width (say, for large screens) while letting he layout expand and contract to fit smaller devices.

Have a read up on Responsive Design to get up to speed with modern web layouts. It’s sometimes hard to move from fixed-width print layouts to the flexible, ever-changing and fluid medium of the browser, but that’s what web design is all about. :slight_smile:

Hello SwiftorNY,

I prefer to make my mockups in 1024 pixels document and 900 pixels wide for main block. That’s my minimum. I don’t like very much responsive (in percentage) sizes. I use responsive only for mobile devices. This layout would support most of the screens (right now, I don’t talk about mobile), only old computers would have dimension less than good old 1024x768 or 1024x600.

Usually it’s yes, sidebar and main content. However, there’s exceptions of course. Some websites have 3 columns, some only for main content, but it’s all depends on the structure of the website.

Good luck with your mockup! :wink: