[web] Critique my new design please

Started by
18 comments, last by Sander 18 years, 3 months ago
I had some time to work on this during my days off so here goes version 2 [smile]

I've made the headers smaller as many people pointed out. I've reduced them to 32px height with smaller fonts and less padding. I've decided to keep the three column, content left layout though. As it's main purpose will be the contents on a single page (blog-style) and not a large site wth many internal links, I think the left-sidedness of the site will do well. Besides that, I'm utterly bored with the traditional 3 column layout. For the rest there's just a bunck of minor tweaks. Font size adjustments, color adjustments. A little less padding and marhin all round. Etcetera.

I've also prepped a second page that shows a full article which has only two columns and incldues a comments section. Just click on any of the article titles on the front page to view the article mockup.

Links:
Front page
Article

Thanks for any comments!

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Advertisement
Quote:Original post by Sander
I'm utterly bored with the traditional 3 column layout.

So am I, so I applaud your branching out in a fresh direction. However, my problem is that the page is essentially three long blocks, and to consume everything on it either requires scrolling up and down several times or interrupting the natural flow of each column.

My suggestion/question is whether you couldn't "block off" horizontal swaths of roughly page height, each divided into three columns populated by content, recent/related items and menu operations pertinent to that section?

One last thing: in IE6, your page title "Lone Wolves" is not anti-aliased, making it look rather unappealing. I didn't try the page in Firefox.
Quote:Original post by Oluseyi
Quote:Original post by Sander
I'm utterly bored with the traditional 3 column layout.

One last thing: in IE6, your page title "Lone Wolves" is not anti-aliased, making it look rather unappealing. I didn't try the page in Firefox.


Same degree with FF 1.5 and Opera 8.51, as far as I can see. But I don't mind it, it wasn't something I really noticed until Olyseyi pointed it out.
www.aidanwalsh(.net)(.info)
Nice!
Another nameless person in the virtual space...
The second link you posted doesn't seem to wrap the text correctly in firefox. Other than that, and the fact that I can't read any of it... I think it looks pretty good. The menu being on the right really throws me off (left and top are web-standards according to all of the html books i've read)... but, its navigatable. I also like the color scheme... very sharp.
Quote:Original post by Oluseyi
My suggestion/question is whether you couldn't "block off" horizontal swaths of roughly page height, each divided into three columns populated by content, recent/related items and menu operations pertinent to that section?


As yes, I see what you mean now. I'll have to think about what's possible there. Basically, this is going to be a blog-like website. The article columns are just entry points for my most recent blog posts. Blurbs are basically going to be short articles without user comments. I intent to use those if I want to post some brief comments regarding some news event or someone else's blog but when I don't feel like writing a full blown article. I expect those to get posted more often than full articles. The about us is just going to be a really short introduction that links to the main about us page.

I don't think ordering in a chronological way is going to work considering that Blurbs will be posted more often than articles, but maybe some otrher scheme will work instead.

Quote:Original post by aidan_walsh
Quote:One last thing: in IE6, your page title "Lone Wolves" is not anti-aliased, making it look rather unappealing. I didn't try the page in Firefox.

Same degree with FF 1.5 and Opera 8.51, as far as I can see. But I don't mind it, it wasn't something I really noticed until Olyseyi pointed it out.


I hadn't noticed that. It should be in the final version though, but I decided to tackle the principal design first and make it cross-browser after it's been frozen. The only reason it works in IE right now at all is because I took care to have zero padding and margin on any element that has a specified width.

Quote:Original post by Cygnus_X
The second link you posted doesn't seem to wrap the text correctly in firefox. Other than that, and the fact that I can't read any of it... I think it looks pretty good.


I take it you are referring to the code block inside the article. I haven't quite figured out how to handle this. Right now it's a <pre> block, hence the wrapping issues. I tried setting an overflow: auto on it, but that makes the page flicker (like the GD frontpage does in IE6). If I can't find the anti-flicker cure I'll probabely end up converting the code to HTML with &nbsp;'s on the server so it wraps nicely.

I've added the overflow: auto; to the stylesheet so you can see it. Go to the article page and reload it to see the flicker problem. If anyone knows what is causing this then I would greatly appreciate it!

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Quote:Original post by Sander
I don't think ordering in a chronological way is going to work considering that Blurbs will be posted more often than articles, but maybe some otrher scheme will work instead.

At ongoing Tim Bray sometimes has short, one or two sentence blurbs as well. I think they mix in just fine amongst his larger posts. He also only shows the first paragraph so sometimes even his longer posts look like blurbs (if not for the ... links)

I like it. I would move the About Us block to the far right column and below the links - or I would just leave it as a link on the menu. It seems to me that as you use the site more, having an "about us" block right in the middle of the page is going to get in the way.
"I thought what I'd do was, I'd pretend I was one of those deaf-mutes." - the Laughing Man
Looks great. One thing with Safari though (maybe also other browsers) is that the header labels aren't vertically centered in the blocks, they're somewhat more to the bottom.
Quote:Original post by Colin Jeanne
Quote:Original post by Sander
I don't think ordering in a chronological way is going to work considering that Blurbs will be posted more often than articles, but maybe some otrher scheme will work instead.

At ongoing Tim Bray sometimes has short, one or two sentence blurbs as well. I think they mix in just fine amongst his larger posts. He also only shows the first paragraph so sometimes even his longer posts look like blurbs (if not for the ... links)


I've seen that as well, but I've consciously chosen not to mix the blurbs and articles. The simple reason inclination to post. If you mix blurbs with the articles then you tend to not post a blurb because you don't want your wonderfull latest full-blown article pushed down that you just posted an hour before. Also, you might be tempted not to post because you don't think it'll be long enough or article-like enough. Separating the blurbs from the full articles removed both these disincentives to post a blurb.

@LessBread: Thanks. I'll try that out.

@Sijmen: I noticed the same thing happening in IE5.5 today. I'm going to fix the crossbrowser issued after I fixed the design though (to make my life easier). Currently I'm developing on FireFox 1.0.7 under Linux.

Thanks all!

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

This topic is closed to new replies.

Advertisement