I have had my mind set to create a nice layout for my blog for quite some time now, as I really hate the default WordPress layout. Creating a nice layout has proved to be very hard, especially as I am not artistically gifted.

What's a nice layout then? For me a nice layout should first and foremost be easy to read, which means that the main font shouldn't be smaller than 1em. Other qualities of a good blog layout are utilizing the power of whitespace, keeping it simple and having a color scheme which is easy on the eye.

Some examples of designs I really like:

• http://orderedlist.com/portfolio/

• http://www.skippy.net/blog/

• http://lostgarden.com/index.html

Write a paragraph or two about which features you feel are important in a nice layout. Focus on what can be seen as we all like our designs to be valid and error free. Also do not forget to include links to sites you feel have a really good design who can serve as state of the art examples.

Of course discussing a bit is all right as well, what do you think about my examples of good layout? Perhaps we can see what people like in a design on a more general level by looking at the result of this thread later on.

Go!

You do realize 1em is a relative font size, so saying "not smaller than 1em" is like saying "not smaller than itself."

I had a couple sites with lots of references that I liked.

http://themes.wordpress.net/?view_type=thumbnails&item_type=latest&page_number=10&count_per_page=12
(ironic, eh? most of them suck, but a good reference point)
http://www.stylegala.com/
(not just blogs)

Marcello

My belief is that 1em is the standard default font size for paragraphs, and that it is relative to the resolution used. It's set in the browser, but I don't think that it's "to small" in any browser by default. Correct me if I'm wrong, and if I am wrong you can still see sizes I like in my examples above.

And did I miss something in your "examples" or do you like all 12 sites shown in your first link and all sites shown on stylegala.com? It doesn't seem like you gave a hint whatsoever about what you liked in terms of web design, or did I miss something?

No, I mean they're good galleries to browse through and find stuff you like. Not all of it is great, though stylegala stuff is rated (and anything over 5~6 isn't too shabby).

If you want to use the default size, then you don't need to set any size...

If you want it to be based on the resolution, use pt, then on a 72dpi screen it'll be one size, and on 96, it'll be bigger (in pixels). You can also use % for relative sizes, like 50% will be half the size of whatever the current size is (so if you have 50% defined in a <ul>, each sublist will be half the size of the parent---as far as I know the same holds true for writing something like 0.5em).

What I'm forgetting now is if it's the width or height of M, or based on context.

Whatever.

Marcello

With the mass volume of websites available, I prefer to have the least amount of crap upfront as possible. And sometimes the content itself is crap. If my eyes have to hunt around the screen for more than 5 seconds, I typically leave the site.

I like Lost Garden's site a lot, but I do think the name is somewhat mis-leading. The title of a website is typically the first thing you read and gives you the quicks summation of what the site is about. I don't get "about games" from Lost Garden alone. Of course, you can go the abstract way, but this is typically for more of an abstract theme. Lost Garden is very concise and analytical, not very abstract IMHO.

But Lost Garden does mostly everything else right. Having a "Why people read this blog" like section is good to have. Or a "first time here" on the homestarrunner site is a good idea as well. Actually, I think I like homestar's site layout better, simply because you're given a list of options that will bring you to whatever you really want to go. It's all condensed to fit the screen, so you don't have to spend any time searching. And the title is zany enough to point-out the zany-ness of the site's theme (even though it is just homestar's name).

Blogs, or as I call them, Blowing Lot's Of Gas typically get to much content upfront. Large blogs become hard to manage and find your way through. I think a new, unconventional design should be attempted, if not to just stray from the consistent crap that is currently out there.

Homestar's site is awful if you're trying to find something though, I end up going through the unofficial wiki thing to find whatever I want.

Good point.

Thanks for the tip about using pt, I don't know the correlation between actual screen resolution and the dpi settings in for example FireFox. I use 1024*768 and the default FireFox setting is 96dpi, would it have been different under some condition?

Basically you are saying that you agree with me and that the examples I provided are examples of great design? And if not, do you have any examples of what you like?

To look at ratings on OSWD or a WordPress theme gallery can only tell you a bit, I'm more interested in your opinions and what motivation you have for liking a site.

Sure things as name setting, content, using valid HTML/XHTML/CSS and downgrading gracefully are important. But the focus on this thread is how it should look when all other things are done nicely.

So do you have any personal examples of sites which you consider to use especially good layout? And a line or two about why you like that site.

No, basically I'm saying I'm too lazy and don't feel like doing in-depth analyses. To me I can generally just tell off the bat what I like and what I don't without knowing or explaining why. Sure I can do the latter, but only when I feel the need.

I like the layout on my site, which is pretty unusual over a year later: http://marcello.cellosoft.com/

Marcello

Someone else then? In-depth analyses is what this thread is about.

No comments to my post?

Sorry, the reason being that you talked quite a bit about content and not that much about site layout which is my real concern. Still I think that you have some good pointers. I tried to condense your advices to this list, correct me if I missed something or missinterpreted you:

• As little on the front page as possible with some clear links, it shouldn't take more than 5 seconds to find what you are searching for.

• Name your site in a good way (not really a layout issue).

• It's good to have a "Why people read this blog" or a "First time here" section for new readers.

• A new, unconventional design should be attempted, if not to just stray from the consistent crap that is currently out there.

Your example:

• http://www.homestarrunner.com/

While this works nicely for a cartoon site like Homestarrunner I think that it will not be that suitable for a site containing (to start with) this stuff. Apart from that I can only agree with what you said, but what this "unconventional design" actually should look like is a mystery for me.

Questions I'm just "throwing out there":

• Which general layout one do you prefer? light on dark / dark on light

• Color schemes in general, which ones do you like?

• Which font size do you prefer?

• Is Flash an annoyance?

• Is using images for headers to make them prettier evil?

• Which resolution is the lowest you should support?

• Do you prefer excerpts or the whole blog entries on a front page?

• How many columns should one use and what should be in them?

And if you can accompany the answers to all/some of the above with examples of good or bad design (as links) it will be even better.

Depends on the topic. Programming? Dark on light. Gaming? Light on dark. It sets a 'mood'.

I would prefer the setting that I have it set to before I visit your homepage. I hate it when sites change the default font size and I need to change my font size to accomodate their changes and then change it back when the change is no longer necessary to change.

Yes. It doesn't allow me to use my back/forward buttons, and reduces the functionality of the site considerably. Flash is not good for displaying content, unless that content is cartoons.

No, but you need to do it right. Don't make an 800x600 full-color png image with you hugging your cat and not put any content on it. That would be the wrong way. Integrating your heading into the rest of your page is the most elegant way. I dislike the waste of space here, but this is very nice and this is incredibly good design. By the way, if you haven't checked out csszengarden.com then do so now.

800x600

It depends how long they are. 2 paragraphs, 2 pages, or 2 sentances? I wouldn't like to go to a website and find a massive post like this one.

Depends on the content. Navigation and blog entries are the only two I would use.

Only had a second to look at post, I'll read the rest later. This just caught my eye..

I agree. Flash has to be used very carefully. There is content other than just cartoons that its good for. For example, a photographers site. That way browsers can't copy regular picture files. See here for an example. This also makes the site look more photo-y.

Also, keep in mind that sometimes viewers selected text only. Having the option to view either Flash or Html is good idea. For example, biteycastle. I first tried the Flash part of the site and had a hard time finding my way around. However, the Flash part is cool and interesting, but when I want to find something, I just go straight to the Html section.

I know neither of these sites are blogs, but they were the best examples I could come up with.

[EDIT]
Actually, I just checked the first link (blairweddings) and he's changed it immensly from the last time I looked at it. I liked the old version a whole lot better.

That site is horrible, the text is in an IMAGE on each page

hey Steven. Just wanted to say I'm sorry you didn't like the new layout. The other one was getting tired.

Oh well. This place has some great information.

jb

So long for being anonymous...:-[

No hard feelings.

Dude, no hard feelings at all. AT ALL.

so don't worry about it.

Just funny that I ran across it. Trying to find info to better my web skills.

jb

Indeed! It's kind of like bumping into someone you know on your vacation trip to Alaska. Never would I had expected you here.

By the way, I'll have Britt kick my ass for saying anything negative about your site.

Seriously, don't worry about it... and don't even have her harm you. She's pretty tough.

Hopefully I can figure out what some of the information that is here means and figure out how to utilize it to my benefit.

jb