Effective use of browser space.
Posted by Michael Dale on Sun, 12 Sep 2004 12:55 PMWhen I develop a website, layout is one of the most thought about things. How can I effectively add navigation to a website without making it feel cluttered? Currently on this site there are very few navigation links, it wouldn't really cope with many more. The top bar could have a few extra but if I decided to add links to the side bar (which I'd like to) then it would take up too much space. Some sites have a great layout. What I'd like is that all links would be visible without the need to scroll down.
Then you have the problem of what resolution people run in. I'd like everyone to run in at least 1024x768, but I'd like everyone to use a standards compliant browser too. Not going to happen (I really don't what this site looking different in other browsers, everything should be uniform).
How do you design your navigation, and what factors do you think about? Feel free to post some links to sites that you feel have a good layout and navigation system.
I'm a huge fan of fluid/non-fixed width designs, but most of the websites I love most use FW, so maybe I'm just confused.
Stylegala ( http://www.stylegala.com/ ) , from the very cool Swedish design firm, Monc ( http://www.monc.se/ ), as well as Dave Shea's Mezzoblue ( http://www.mezzoblue.com/ ), would probably be my favorite designs at the minute, in terms of websites I actually frequent, as opposed to seeing once, thinking "hey, cool", and then never coming back/bookmarking.
For fixed-width designs, an 800 horizontal rule is nice for people-with-postage-stamps-for-screens -- this, however, actually means using LESS THAN 800 as your fixed-width value; an 800 pixel column will result in the dreaded Horizontal Scrolling factor if the users web client/browser has any kind of bezel or scrollbar in place...
I could rant all day about this one, because it's something I love to discuss, but I won't, because my maths work is glaring through the wall at me saying "STOP NEGLECTING ME, OR I'LL EAT YOU FOR BREAKFAST IN YOUR EXAM ON WEDNESDAY!!! NYAH!!!". *ahem*
Speaking of non-fixed width, I did make a style sheet that wasn't fixed. Same as this just 100% width. here:
http://blog.dalegroup.net/?setstyle=4 (personally I like the fixed width for this site although might work on it).
http://www.mezzoblue.com/ is nice, although I find the background a touch hard on the eyes, and the width is a little too thin. But it is a funky site.
I like http://www.photomatt.net as the layout feels
spacious. Speaking of that, I've been meaning to fix the wordwrap on this site. Might go play with that now.
http://www.bluism.com/ is nice, but the grey he uses on the date of post is too faint in relation to the background. Still it's a great site.
http://www.airbagindustries.com/ has a simple design. It's simple yet it's very effective. I love this site.
Finally http://www.k10k.net/ is very stylish. One criticism is that with all those different panels of things, it looks kinda crowded. Still it's a great site.
I generally go by an '800' rule. In other words 'a sites maximum size can not be more than 800 pixels in length.'
When I was in the process of developing the old 'BH' website (http://bh.auscstrike.com/), one of the members complained that the size was too big (it was originally 900px in length I think.) His reso back then was 800x600. Although nowadays most people use 1024x768 or above, I still design sites with compatibility for people who have resolutions as low as 800x600.