homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Brilliant Layout Examples
TheRookie

5+ Year Member



 
Msg#: 10309 posted 1:01 am on May 31, 2005 (gmt 0)

A couple months ago, tedster made a thread calling for examples of brilliant domain names [webmasterworld.com].

Continuing with that theme, let's show some examples of layouts you think are excellent. Obviously, no self-promotion.

When you post the site, also say what about the layout strikes you as so good. Hopefully we will all learn a bit.

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 10309 posted 5:01 pm on May 31, 2005 (gmt 0)

Since no one has come up with anything in a day, I think I'll make a comment.

It's easy to appreciate brilliant visual design, but a brilliant layout is a whole different creature. Layout should be a servant for the visitor. And as with all good servants, the better it is the more unobtrusive it is. Brilliant layout is so highly functional that you never focus on it, because you are just getting on with the task that brings you to the site.

Good layout would also be strongly intertwined with good Information Architecture, because that's where you determine what needs to be "laid out" in the first place. With lousy IA, no layout can ever be brilliant enough to redeem the site.

Because of all this, layouts are tending toward certain expected standards -- layout is one area of site development where you innovate at great risk. For instance, I have some high performing sites with right hand navigation and content on the left.

In each case, I knew I was breaking with the expected layout customs and I chose right side for the principal navigation only after solid consideration. But there were other factors in these cases that made right hand nav seem a better choice. And still, I wonder if a more conventional layout would perform better, but the sites are successful, so why mess with them?

What could I point to as brilliant layout? Possible Amazon, because they have one of the most heavily tested layouts online today. Over time the Amazon pages have evolved to the point where I just know where to look for the elements I need and I rarely if ever feel lost on the page.

I also note that over the years Getty Images has struggled to find the right layout. Their current setup makes effective use of frames to keep my overall task right in front of me (the lightbox) even as I scour their inventory searching for just a few more images to complete my job. Still, it's better but I do have moments of "now where is that?" when using their site.

MatthewHSE

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 10309 posted 5:52 pm on May 31, 2005 (gmt 0)

I think the most brilliant layout I've ever seen is over at techpatterns.com (no personal connection). It's a CSS layout, with three columns and footer with all columns full-height regardless of actual content amount. (In other words, you can get full-height background colors without using Faux Columns.) In point of beauty, the design leaves something to be desired in my opinion, but from a strictly technical viewpoint I've never seen its equal. The design is incredibly complex to figure out, but pretty stable and effective.

Of course, my own site is also pretty good, but I won't go self-promoting! ;)

encyclo

WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 10309 posted 6:08 pm on May 31, 2005 (gmt 0)

From a technical (web standards) as well as a user perspective, I'm a big fan of the Mozilla Organization website:

[mozilla.org...]

It's beautifully laid-out, with clear categories, sharp graphics and a sense of simplicty which does the designer credit. From the technical viewpoint, it uses an elastic, fluid layout, minimalist markup and friendly URLs, all generated from a CMS. It validates as HTML 4.01 Strict on most pages.

Sadly, it contrasts with Mozilla's own Bugzilla pages, which are so complex as to be verging on the unusable. Well, you can't have everything!

zulufox

10+ Year Member



 
Msg#: 10309 posted 6:25 pm on May 31, 2005 (gmt 0)

[spreadfirefox.com...]

Standard 3 column layout, excellent use of color to classify the blocks.

oddsod

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 10309 posted 6:40 pm on May 31, 2005 (gmt 0)

msn.com

<running to hide :)>

TheRookie

5+ Year Member



 
Msg#: 10309 posted 11:34 pm on May 31, 2005 (gmt 0)

Good post, ted, and thanks for the examlpes, guys.

Keep 'em coming. :-)

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 10309 posted 11:36 pm on May 31, 2005 (gmt 0)

I'm a big fan of the Mozilla Organization website

Now that you point it out, I wholly agree - the layout itself was far from my attention because it only ever supported me and never got in the way.

thebeancounter

10+ Year Member



 
Msg#: 10309 posted 3:41 pm on Jun 6, 2005 (gmt 0)

Hi,
I've two links for you. The second one is useful in that it gives you a full tutorial on how to get the page elements you specify where you want using CSS; (although I've not read all of the stuff on this site yet.

BlueRobot Layout Reservoir- Need I say more)
--------------------------------------------
[bluerobot.com...]

BigBear
--------
Cornucopia of CSS hints and accessibility tips;
[bigbaer.com...]

nanotopia

5+ Year Member



 
Msg#: 10309 posted 3:52 pm on Jun 6, 2005 (gmt 0)

I've always thought that Wired.com has always made good use of HTML and CSS. For years they have pushed the limits of standards, and have been able to make a well designed online magazine that's built with thoughtful and elegent code.

My only criticism of their site is that it's too much for me. I prefer thin, thin, thin. And there's a point where you can have too much code and content on one page. Unfortunately, most big business sites don't really have a choice.

fiu88

5+ Year Member



 
Msg#: 10309 posted 4:59 am on Jun 7, 2005 (gmt 0)

The best tweaked OSC ( at least I think it is) I've come across..very clean
www.sportsaccessories.com
wish I could find a designer to provide me with something this clean looking

ltboy

10+ Year Member



 
Msg#: 10309 posted 7:15 pm on Jun 8, 2005 (gmt 0)

I gotta say htmldog.com. It's clean and makes good use of color.

zRonin

5+ Year Member



 
Msg#: 10309 posted 8:46 pm on Jun 8, 2005 (gmt 0)

While were at it, I would say wikipedia (http://en.wikipedia.org/wiki/Main_Page) and google/gmail.

Simple > all. I think the more different types of content that appear on one page, the uglier and less effective it is. Google does a great job of only giving you what you need, yet it doesnt take more than 10 seconds to find any service they offer by clicking the "more" tag and being brought to another beautiful page with neat lines and great images.

TheRookie

5+ Year Member



 
Msg#: 10309 posted 9:41 pm on Jul 7, 2005 (gmt 0)

I agree with htmldog.com. Just checked it out and I'm very impressed.

dauction

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 10309 posted 9:55 pm on Jul 7, 2005 (gmt 0)

htmldog.com ? you guys are joking right?

BORING

TheRookie

5+ Year Member



 
Msg#: 10309 posted 10:08 pm on Jul 7, 2005 (gmt 0)

I'm a big fan of the link effect on the left column..."cell hilighting", I guess. Microsoft uses it on their website. I think it's very attractive.

TheRookie

5+ Year Member



 
Msg#: 10309 posted 10:32 pm on Jul 7, 2005 (gmt 0)

^ Speaking of that effect, any good places with instructions on how to achieve it?

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 10309 posted 11:58 pm on Jul 7, 2005 (gmt 0)

That's a css hover effect (changing the background-color and border rules), combined with making the anchor tags display:block. Also note that the links are in an unordered list, which is very correct from a semantic viewpoint.

It's pretty straightforward - just play around with it a bit and if you hit a roadblock ask over in our CSS FOrum [webmasterworld.com].

maccas

10+ Year Member



 
Msg#: 10309 posted 12:43 am on Jul 8, 2005 (gmt 0)

Is it just me or are the links on the right side of spreadfirefox.com not clickable in IE but are in firefox?

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 10309 posted 1:00 am on Jul 8, 2005 (gmt 0)

Yes, I see the same unclickable links in IE - the code is a bare query string like this: <href="?q=forum/23">

This thread was inactive for nearly a month, but it's revival is now straying off-topic. So I'm locking it down.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved