Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

What dimensions should I use when designing my layout?

H

h0kie99

macrumors member
Original poster
Jul 31, 2004
82
0
VA
What I need is to create a home page for a client that just fits on one page (in general... obviously not for ALL visitors, but hopefully for most) with no scrolling. I have been advised (in general) to design for 1024, but if I create my Photoshop layout (which is where I start) to be 1024x768, then obviously there will need to be some scrolling because of the browser's menu bar, scroll bar, etc.

So, my question is, what are the best dimensions? I'm really only concerned about the home page for this site... all other pages will require up/down scrolling. Although, for the other pages, I definitely don't want to have to scroll right/left, so I'll use the same width as the home page.

Thanks in advance for any suggestions.
 
h0kie99 said:
What I need is to create a home page for a client that just fits on one page (in general... obviously not for ALL visitors, but hopefully for most) with no scrolling. I have been advised (in general) to design for 1024, but if I create my Photoshop layout (which is where I start) to be 1024x768, then obviously there will need to be some scrolling because of the browser's menu bar, scroll bar, etc.

So, my question is, what are the best dimensions? I'm really only concerned about the home page for this site... all other pages will require up/down scrolling. Although, for the other pages, I definitely don't want to have to scroll right/left, so I'll use the same width as the home page.

Thanks in advance for any suggestions.
Click to expand...

From what I've been told by various people is to design for 800 x 600 px. Some people if not most to have their res at 1024 x 768 px, but like you said you have to keep in mind that the browser's buttons, menus, scrollbars and what not take away from that res. To be safe I would go 800 x 600 px; course that is the standard ratio, you could go 800 x 500 to give it a more horizonatl look or something like that.
 
880 x 660 seems to fit on most browsers when the user's screen size is 1024 x 768 and their browser window is maximized. This gives you a bit more space than 800 x 600 (10% in each direction). I'm developing a site right now that is based on an 880 x 660 template.
 
Just don't build the page like the MP3tunes.com home page, where the width is so restricted, even if your browser window could handle more, that they were forced to "truncate" too much text ("Cape Wi...", "The Dou...", "Blac Smi...")
 
I'm still building for 800 X 600 just cuz it's the habit I'm in but when I'm designing in photoshop I use 780 X 450 and it seems to compinsate well for the browser.
 
Lz0 said:
Here's a question for the mp3tunes.com heads.

Where have I seen many/all of the design elements you use on your site before???
Click to expand...

At least the iTunes folks don't chop off so much text that it's practically illegible...
 
if you are designing for 800*600 monitor sizes, your site should be no wider than 780 pixels to account for the vertical scroll bar.

It does seem to be getting okay to design for 1024*768 monitor sizes now, though if your site really needs that much space, maybe you are putting too much information on a page.

Then again, in the end, it all depends on how content is laid out. How the site is designed. How content should flow, etc. Make your design complement your content, don't mold your content for a design.
 
There hasn't been any mention of flexible layouts that resize to fit the screen. They generally suit larger sites where you have a central content column and two smaller sidebars. I've done a couple using only CSS - they looked good in the end but the workload was a lot greater :(. Set your sidebars around 140-150 px and then the central column expands depending on available space.

I agree that around 760-780 px wide is about right for fixed layouts. I wouldn't get too hung up on the height, a bit of scrolling doesn't matter even if it is the home page.

I would center your layout too, nothing looks worse on a big screen than a huge gap on the right hand side of a web site.
 
No question in my mind you should be designing for 800x600. It is still the standard and if you design for anything bigger 35% of your viewers will have to scroll left and right which is a big no no.

I've always designed my layouts at 750px wide because when you start throwing all your browsers into the mix, really it is the safest. 780 will work on most browsers, but not all, 760 is pushing it on all, but I use 750 and tell my students to use 750px because it is safe.

Moral of the story, 750px wide.
 
I agreed with most of the poster here and for me, I normally starts off at about 760. But I was thinking when I should upgrade to 1024 resolution, since I am getting more and more questions about wasting screen estate from my clients. Sometimes for informative site, I would do the expandable width but those are tough to design for.
 
angelneo said:
But I was thinking when I should upgrade to 1024 resolution, since I am getting more and more questions about wasting screen estate from my clients.
Click to expand...
It is a tricky area for sure. I'd put the responsibility back on your clients if they are asking questions about wasted area - ask them to provide you with more content to utilise the extra area :p.

I think you need at least 50 pages of content to justify a larger, 3 column style. Without the extra content there is less need to have the sidebars where you can have recent articles, quick links, random product links etc.

Unfortunately there is a significant proportion of (usually older) internet users that still prefer to surf at 800x600 resolution, even on a 17" monitor. Very frustrating for web designers!
 
Ahh yes but sometimes the client simply won't listen to reason. Hence:
http://www.thewedgewoods.ca/

I tried a dozen times to try to take the client/boss out of this. I tried explaining different screen sizes/resolution...I tried explaining aspect ratio.. I tried begging...but they demanded it fill the entire screen...barf. So I was finnally forced to close my eyes and set the .swf to 100% hight and width.

It's so frustrating when the client won't let you do your job and refuses to listen to you even though you know what your talking about.
 
dornoforpyros said:
Ahh yes but sometimes the client simply won't listen to reason. Hence:
http://www.thewedgewoods.ca/

I tried a dozen times to try to take the client/boss out of this. I tried explaining different screen sizes/resolution...I tried explaining aspect ratio.. I tried begging...but they demanded it fill the entire screen...barf. So I was finnally forced to close my eyes and set the .swf to 100% hight and width.

It's so frustrating when the client won't let you do your job and refuses to listen to you even though you know what your talking about.
Click to expand...

You do what you gotta do :) $ometime$ there are other factor$ driving your rea$oning ;)
 
Whatever you do, PLEASE don't make large blocks of text that extend all the way across 1024 pixels of screen width. Even if my monitor is that big, it's still not comfortable reading such long lines of text. I'd say 700 pixels is the absolute maximum for a text line; 500 or so is better. Give your readers a margin of white space or other visual elements if Web page is that wide.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back