...

View Full Version : Best Site Layout



Ricky158
02-17-2008, 06:52 AM
Hi, I have a pretty basic question. Is there a particular layout type that cannot fail? I mean in terms of navigation and text layout. For example, is a horizontal navigation bar better than vertical? This is expected to be opinion-based, so feel free to give your thoughts on suggested layouts. If you have an URL to a site that has the layout you describe, it'd be much appreciated to have a visual aid.

I'm developing a web site and I want to have a streamline layout that won't turn people off. Thanks.

EDIT: To avoid any questions, I guess the layout really depends on the amount of information you need to display per page (look at google.com for example, it's very plain and simple). Just imagine a medium-sized page worth of content. More than google.com but less than yahoo.com. Hope this helps.

NancyJ
02-17-2008, 10:28 AM
As you say, the 'best' layout depends on your site and your target audience. But as to the horizontal vs vertical nav - vertical is better because its more flexible. You have a fixed width horizontally, once you run out of room you have to re-organise your nav to add any new links.
Vertical you have infinate room and you can fit more items 'above the fold' than you generally can horizontally.

I have a site at the moment that has a horizontal nav but thats because I needed the width for my content (data tables). I had to re-organise my nav a little and it limits what I can put there (I am using drop-down nav to give me more menu items) but the site couldn't afford to give up the width to navigation

hemebond
02-17-2008, 12:09 PM
The best layout is a liquid layout; one that fills the space available and is fluid enough to adjust to the users settings (e.g., font-size) without breaking.

bazz
02-17-2008, 12:43 PM
I guess the question relates to to building of template sites, where one layout would be useful for most sites.

I agree with NancyJ. I have had similar difficulties with insufficient space. My suggestion is:

top, header containg logo and perhaps a strapline.
bbelow that, a horizontal menu (a secondary menu for less important stuff or stuff which is not part of the main site's content),
below that, the main vertical nav menu - ideally on the left
beside (to the right of), that, the first section of page content.
if necessary - to the right of that a second area of content
below those, a footer contain perhaps address info, company info or whatever.

Basically, a page with a header and footer which, in between, has two three or four columns.

bazz

NancyJ
02-17-2008, 07:27 PM
The best layout is a liquid layout; one that fills the space available and is fluid enough to adjust to the users settings (e.g., font-size) without breaking.

Completely liquid layouts are pretty useless, with the number of screen resolutions available becoming even more divergent, using a completely liquid layout gives you almost no control over the display of your site (not to mention any graphics wont scale well). Some people have ludicrously wide screens - making a site that fits in 800x600 and still looks good in 1600x1200 is near impossible.
Text that fits nicely in 800x600 would be close to unreadable for most people at 1600x1200, the lines would just run on way too wide.

What you really want is a site that's fluid within min and max fixed widths, so that you can control how the site displays and make sure that its never too wide or too narrow for your content

croatiankid
02-17-2008, 07:29 PM
My latest site uses ems to specify certain text sizes, widths and heights, along with a min and max width, so it's easy for someone to adjust it (if it even needs adjustment): control + scroll.

About navigation: it depends on what NancyJ said, how many links you want. However, you can also use a combination if you don't have too many links and/or that's what you want.

Ricky158
02-17-2008, 09:18 PM
Thanks for the quick replies!

Just a few questions for clarification... What exactly is a "fluid" design? How can I code the site so it adjusts to a visitor's settings -- or at least optimizes it? What is a strapline? Should the navigation layout for the main page be consistent throughout the entire site (on the content pages as well) - or can it be different but maintain the same feel? At the footer of each page, is it customary to have text riding the very bottom or leave some blank space? What sort of color schemes are popular? Are black backgrounds faux pas?

Does any of this change if one embeds a large Flash application?

bazz
02-17-2008, 11:57 PM
fludi design - think of a glass of water. it changes shape to suit the containing item, which, in the case of a web page is the the browser. You can use max-width and min-width to make the page layout adjust, within your set parameters.

strapline: a phrase that usually accompanies a logo and is almost as distinguishable as the logo itself. Mmm, oh yeh the one that springs to mind is 'probably the best lager in the world'. I don't recall right now any US one's.

Navigation: should be consistent across all pages so your visitors build confidence and so they don't get lost. If moving away from that then, it is important to keep the main nav links consistent and the others probably in a separate (secondary), nav menu.

The rest of your questions seem either to be subjective or else they can be answered by looking around numerous different sites to see what is popular. I would suggest that black is a no-no as a background unless in very specific circumstances, though I can't think of any.

bazz

hemebond
02-18-2008, 06:14 AM
Text that fits nicely in 800x600 would be close to unreadable for most people at 1600x1200, the lines would just run on way too wide.As someone with a screen resolution of 1920x1200 pixels, I can tell you now I don't browse with the window maximised. Rather I browse with whatever window size is comfortable for me. Assuming the web designer isn't trying to control the size of the website, it works just fine.

Ricky158
02-18-2008, 06:27 AM
Is there a certain browser that is best to view your developing web site in to make sure everything looks ok? I use Firefox and I feel like that's pretty popular but I don't want to ignore IE people. Would it be bad to only look at my website through Firefox and assume IE people see it the same or at least similarly? Any major glitches that might incur?

abduraooft
02-18-2008, 06:46 AM
Just a few questions for clarification... What exactly is a "fluid" design?

Have a look at http://bonrouge.com/3c-hf-fluid-lc.php and see the other links also. Resize your browser's width and feel the difference.

How can I code the site so it adjusts to a visitor's settings -- or at least optimizes it?
Most browsers like FF,Opera,Safar support min-width, max-width properties.
For IE have a look at the source of http://bonrouge.com/2c-hf-fullyfluid.php to see

<!-- These here are IE conditional comments. They control the minimum width and height -->
<!--[if gte IE 5]>
<style type="text/css">
body {
width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );
}
#rightbg {
height:expression(document.body.offsetHeight + "px");
}
</style>
<![endif]-->

oesxyl
02-18-2008, 06:48 AM
Is there a certain browser that is best to view your developing web site in to make sure everything looks ok? I use Firefox and I feel like that's pretty popular but I don't want to ignore IE people. Would it be bad to only look at my website through Firefox and assume IE people see it the same or at least similarly? Any major glitches that might incur?

About layout:
I agree that this kind of layout, described above, fit many situation, but in my opinion only the content could guide you to make the proper layout and navigation system, there is no recipe. My example, wikipedia, :)

About browser:
firefox - I'm not fanatic, more than that I hate it :), but is the best tool until now for a developer.
ignoring other browser is stupid in my opinion.
I have a real estate site, 97% of visitors use IE, 1% use diferent mobile devices, PDA mainly. The probablity as a visitor from that 1% to be a client is bigger then from 97% of IE, :)
On another site, a artist gallery, 67% of visitors use safari, can't ignore, :)

best regards

NancyJ
02-18-2008, 10:40 AM
As someone with a screen resolution of 1920x1200 pixels, I can tell you now I don't browse with the window maximised. Rather I browse with whatever window size is comfortable for me. Assuming the web designer isn't trying to control the size of the website, it works just fine.
Some people never browse full screen, regardless of their actual resolution (like my boyfriend). Some people (like me) always browse full screen, no matter how big the resolution.
Some people have lots of toolbars, some have none - these days you can't make any assumptions about the screen area of your user. You just have to do your best to make your site adaptive to that without it ever getting too big or too small.

croatiankid
02-18-2008, 01:26 PM
A fluid layout is one that scales proportionally to the browser window size.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum