Critique this mess. [a css/html site]

RandomTom · 2 Jul 2006 at 18:55

Hey, well this sparked from pretty much nowhere but here we go:

illitica - the site

Thanks to beansprout for his great hosting, very useful but after this play I was just wondering what people thought, your comments and all that, I haven't fully checked the mark up just yet so I know there'll be some unnecessaries as it's evolved throughout the day.

What are your opinions on the colour scheme and layout?

Thanks.

Phaser · 2 Jul 2006 at 19:03

Very nice I like it mate.

Not sure sure on the menu on the right though, I kept moving my mouse over to the left trying to click somewhere. Perhaps thats just me though!

Also the little bar above the main content area, the whole diagonal lines don't really go with the smooth solid fill of the content area? Saying that, I like it on the bottom though..

robmiller · 2 Jul 2006 at 19:05

I think sidebars on the right are more natural, personally

RandomTom · 2 Jul 2006 at 19:08

Phaser said:
Also the little bar above the main content area, the whole diagonal lines don't really go with the smooth solid fill of the content area? Saying that, I like it on the bottom though..

Hi, thanks for the comments there, and I knew that didn't look right so I've just changed it. bviously the content has no structure as I only did this, this afternoon, but more comments and critique welcome please.

edit: I've put the text decoration to none on the navigation images but they still have a purple/blue border round them - anyway to remove that?

iCraig · 2 Jul 2006 at 20:22

Nice site, a bit unconventional here and there, but nice and smooth.

Few points:

#124958
#072835

Why is that at the top left of your page? At first I thought it was some sort of minitature navigation system, but it isn't even clickable. Unless it's something I'm very noobish about, you should try not to include stuff on the site that means nothing to the audience, it will just confuse them.

I agree with the comments that the navigation menu feels a bit weird on the right, traditionally menu's appear on the left or the top. This is just a personal thing, rather than an obligatory change. I'm sure if I become a regular visitor I would get used to it.

I don't like the default border style around your navigation links either, they seem a bit unstyled. But again, this could just be a reflection of my dislike towards the bog standard anchor styles.

I'm not convinced that the menu images work either. "Sketches" has a picture of a light cluster, rather than a sketch. "Links" has a picture of a building etc.

Your markup is nice and clean, apart from, again, the menu.

You've placed each menu item inside a paragraph. <p> should be used to surround a portion of standard text, not a menu item.

Make the menu item into an unordered list and it will be a lot better (semantically)

Apart from those minor things, I think it's a good clean site. Nice going.

robmiller · 2 Jul 2006 at 20:27

Seriously, navigation on the right is much better.

Ze US government agrees: http://usability.gov/guidelines/navigation.html#four

RandomTom · 2 Jul 2006 at 20:29

iCraig said:
Few points:

#124958
#072835

Why is that at the top left of your page? At first I thought it was some sort of minitature navigation system, but it isn't even clickable. Unless it's something I'm very noobish about, you should try not to include stuff on the site that means nothing to the audience, it will just confuse them.

LOL woops, I was just making a note of the colours i'd used so that I didn't have to keep opening photoshop when messing about with the colour scheme, I should have taken that off.

iCraig said:
I don't like the default border style around your navigation links either, they seem a bit unstyled. But again, this could just be a reflection of my dislike towards the bog standard anchor styles.

Yeh I really don't like that either, but I don't know how to fix it.

iCraig said:
I'm not convinced that the menu images work either. "Sketches" has a picture of a light cluster, rather than a sketch. "Links" has a picture of a building etc.

Yeh I probably should have spent a bit more time picking the images, but I didn't think I was going to get anywhere with this but I got sucked into it and about an hour later the site had come to pretty much what it is now.

I created a <ul><li> for the navigation but this is probably noobish but they seemed to pad out too far, and I couldn't fix it so I just left it. But yeh, if i'd have spent a bit more time this could have been more, I was just getting a few critiques on the overall style.

Thanks.

Dj_Jestar · 2 Jul 2006 at 20:32

Center the page?

RandomTom · 2 Jul 2006 at 20:34

Dj_Jestar said:
Center the page?

I wanted to create something that wasn't centred just to see how things looked for this, it's only a quick mess about so all feedback is great, thanks.

iCraig · 2 Jul 2006 at 20:42

RandomTom said:
LOL woops, I was just making a note of the colours i'd used so that I didn't have to keep opening photoshop when messing about with the colour scheme, I should have taken that off.

Nice way to keep notes.

RandomTom said:
Yeh I really don't like that either, but I don't know how to fix it.

Add

Code:

img {
   border: 0px;
}

to your CSS.

RandomTom said:
Yeh I probably should have spent a bit more time picking the images, but I didn't think I was going to get anywhere with this but I got sucked into it and about an hour later the site had come to pretty much what it is now.

It's just my opinion really, there isn't anything wrong with it technically, and they are sufficiently labelled, it wouldn't cause a problem if they kept the imagery they have now.

RandomTom said:
I created a <ul><li> for the navigation but this is probably noobish but they seemed to pad out too far, and I couldn't fix it so I just left it. But yeh, if i'd have spent a bit more time this could have been more, I was just getting a few critiques on the overall style.

Unordered lists have a default amount of padding if it isn't specified. Far too fat in my opinion, so set it to what you want it to be.

Code:

ul {
  padding: 2px;
}

Style up the <li> items inside, and make those images you have as background images with the normal text of the list shunted out the way, with:

Code:

text-indent: -2000px;

RandomTom · 3 Jul 2006 at 16:02

thanks for all that btw, legend.

SpicyDuck · 3 Jul 2006 at 17:38

I like it, but I don't think you should centre the page; it's fine as it is.

Oh, and I love your sketch. Pro.

Mattus · 3 Jul 2006 at 20:20

Pretty cool. I'd use an <h1> element for your header image - it makes more sense to search engines and is generally good practice.

SpicyDuck · 3 Jul 2006 at 20:23

Mattus said:
Pretty cool. I'd use an <h1> element for your header image - it makes more sense to search engines and is generally good practice.

Aye, or at least change the Alt text for it. Currently it says:

The image “http://www.twobeds.com/upload/userfiles/RandomTom/illitica/banner.jpg” cannot be displayed, because it contains errors.

Which isn't good. Change it to say the same as what the image says.

Mr_L · 3 Jul 2006 at 20:28

I wouldn't name your header 'banner', ad blockers may think it's an advertising banner and decide to block it.