Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    New York
    Posts
    152
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Netscape Best Site Layout

    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.

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    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

  • Users who have thanked NancyJ for this post:

    Ricky158 (02-17-2008)

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

  • Users who have thanked bazz for this post:

    Ricky158 (02-17-2008)

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by hemebond View Post
    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

  • #6
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.
    Last edited by croatiankid; 02-17-2008 at 07:32 PM.

  • Users who have thanked croatiankid for this post:

    Ricky158 (02-17-2008)

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    New York
    Posts
    152
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

  • #9
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by NancyJ View Post
    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.
    Last edited by hemebond; 02-18-2008 at 06:17 AM.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    New York
    Posts
    152
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Ricky158 View Post
    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
    Code:
    <!-- 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]-->
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Ricky158 View Post
    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

  • #13
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by hemebond View Post
    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.

  • #14
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    A fluid layout is one that scales proportionally to the browser window size.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •