CMM v2.0 Site Review

[Jona]

Well, I've done some reviews for some people and tried my best to help them out, and so... Well, I'd like some positive criticism of my own site, CMM v2.0 (http://cmm.rgabbard.com/). I plan on making version 3.0 soon, as I want the layout to be perfectly valid and accessible, yet very graphically intense, like SNECX's site (http://www.snecx.com/). But that's future planning. ;)
Bobby (http://bobby.watchfire.com/) reports two errors, one level AA and one level AAA, but neither of those errors are actually errors. Bobby is just, in the words of Robert Wellock, "stupid." :D (Pardon me if I misquoted you, Robert. ;))

Cynthia says (http://www.cynthiasays.com/) that I'm good for WCAG level AAA, and the code is, as usual, valid HTML and CSS.

Anyway, lemme know what you guys think... :)

[Paul Jr]

Well I'll beat you down with my fickle opinions, but I won't even touch the code, 'cause I know that's clean. ;)


I'm not too big on splash pages, even though I absolutely love that graphic. Did you do that? I think it's very nice.
The header is too big, and the content <div> is too small. At least, compared to each other, they are very disproportionate. And I'm also not too big on having scrollbars nested; I have to scroll the window, and you're content <div>. I suppose that's not too bad, except I feel the content <div> is too small. It should be bigger. Or the header should be smaller. Or maybe both.

That's about it. It's just my nit-picky opinion anyways, so I'd say you've got a real nice site there. :)

[Jona]

Thanks, yes I did the splash graphic. I don't have Flash - if I did, I'd use a Flash intro - I plan on getting it soon, along with a new computer, but that may be longer than I'd like.

The purpose of the scrolling DIV is so that I do not have to worry about using multiple graphics for the content area; it is not a liquid design. ;)

Comparing the size of the logo graphic to that of the content division, I'd say you have a point, yet I like the way it fits in exactly the center of just below the logo.

[Paul Jr]

Originally posted by Jona
Thanks, yes I did the splash graphic. I don't have Flash - if I did, I'd use a Flash intro - I plan on getting it soon, along with a new computer, but that may be longer than I'd like.
You must teach me to manipulate graphics software to produce such works of art as that. :p

Originally posted by Jona
Comparing the size of the logo graphic to that of the content division, I'd say you have a point, yet I like the way it fits in exactly the center of just below the logo.
It does fit in there pretty nicely.

[Jona]

Originally posted by Paul Jr
You must teach me to manipulate graphics software to produce such works of art as that.

Got Photoshop? :D

[Paul Jr]

Originally posted by Jona
Got Photoshop? :D
Mmhmm, yup yup. PS 7.0

I checked out that SNECX site, too, and the PS tutorials look promising.

[Jona]

I think I may do a tutorials section in my personal blog (http://cmm.rgabbard.com/blogs/jona/) eventually, but at the moment I am really disliking the design of it... If you have a question, though, the Graphics forum is where ya can ask. ;) I'll answer if I know the answer. :p

[Paul Jr]

Originally posted by Jona
I think I may do a tutorials section in my personal blog (http://cmm.rgabbard.com/blogs/jona/) eventually, but at the moment I am really disliking the design of it...
Well, the silver "Links" button does look out of place, but it's a nice design.

Originally posted by Jona
If you have a question, though, the Graphics forum is where ya can ask. ;) I'll answer if I know the answer. :p
I think I'm going to tackle some of those tutorials SNECX.com and see what I end up with. :D

[Jona]

Originally posted by Paul Jr
Well, the silver "Links" button does look out of place, but it's a nice design.

See, my problem is I can't do subtle graphics (http://www.alazanto.org/)... I always end up with something metal, plastic, or glassy. I can't ever get the textures right, and I always start venturing toward something metal, plastic, or glassy. I guess it's because I've never done anything subtle! :p I'll work on it, though.

On second thought, maybe my problem is that I compare myself to pyro... :D

[Paul Jr]

Originally posted by Jona
See, my problem is I can't do subtle graphics (http://www.alazanto.org/)... I always end up with something metal, plastic, or glassy. I can't ever get the textures right, and I always start venturing toward something metal, plastic, or glassy. I guess it's because I've never done anything subtle! :p I'll work on it, though.
Well, at least you can do something! I can't even do normal graphics (http://www.google.com/search?q=define%3Agraphics&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8).

Originally posted by Jona
On second thought, maybe my problem is that I compare myself to pyro... :D
Lol. He does nice graphics. :D

[Conor]

i must say great job Jona. I could only wish that I had graphic skills like that. My only question is, what does the toggle tranparency button do?

[Jona]

Thanks. :D I'm still learning, though. ;)

Well, you being on a Mac, I haven't the foggiest idea! I wish I had a Macintosh, so that I could test my JavaScript code; tell me, how would you go about, in JavaScript, causing objects on a page to become semi-transparent or opaque, with Macintosh?

[Conor]

I have no idea as I have never used javascript and dont really understand it at all.

[Jona]

Originally posted by RefreshF5
I have no idea as I have never used javascript and dont really understand it at all.

Speaking accessibly, that's a good thing. ;)

[Paul Jr]

I followed the very first PS tutorial at SNECX.com, and this is my final product (see attached image). It's going to look kinda odd (according to Omega, "It looks like a worm fossil."), 'cause I redid the lines a few times, since I got kinda lost on something. I'm going to redo it tomorrow, 'cause I have to jet now.

P.S. Sorry for hijacking your thread, Jona.

[Jona]

lol. Hey, it's a start. Good job to begin with. :cool:

[Paul Jr]

Originally posted by Jona
lol. Hey, it's a start. Good job to begin with. :cool:
GOOD START?! That's like the best thing I've ever done (that wasn't just... abstract)! :D :D :D

Thanks!

[Jona]

You're welcome. :) Have a good night's rest.

[Daniel T]

A worm fossil, eh? Heh heh, that's exactly what I thought of when I saw it! It'll take a little bit of practise to catch up to my skills, however(shown in the attatchment).

BTW, Jona, like your site, but there is a definite scrolling lag, caused by the fixed background image. Is there away to get it to stop that? cuz it is actually quite annoying.

-Dan

[Jona]

I think your scrolling lag problem is a part of the transparency; try clicking the "Toggle Transparency" button and see if you still have a lag -- that is actually the purpose of the toggle transparency link. ;)

[Daniel T]

That helped a tiny bit, but I think the fixed background image is causing most of the problem. I've had troubles with this before when I've used fixed background images, too.
-Dan

[Jona]

Helped a tiny bit? I don't have that problem with fixed backgrounds, it must be just your computer. *Rationalizes*

[Daniel T]

Originally posted by Jona
must be just your computer. *Rationalizes*
Yeah, that's probly it :rolleyes:
-Dan

[Jona]

How could my piece of crud be worse than yours? That's literally impossible. There's just no way. So it must be some setting you have or something. If it doesn't lag on my computer, it is impossible for it to lag on yours. lol. Besides, I tried, I'll redesign it soon anyway, I promise!

[Paul Jr]

Originally posted by DanieLTomaS
It'll take a little bit of practise to catch up to my skills, however(shown in the attatchment).
Oh, you're good. I can't step to your skillZ, G. :D

I also had that problem with the laggy-scrolly-thingy, but disabling the transparency fixed it.

[Paul Jr]

Behold, I deliver unto thee... “Tube Claw.”

[Jona]

Originally posted by Paul Jr
Behold, I deliver unto thee... “Tube Claw.”

That's great, man, but... this is the second post you've hijacked! (Yes, I did see your edit, lol.) Graphics forum, man, I have no problem with discussing it there. I don't want to get off-topic and discourage other people from reviewing my site - I'm hoping DaveSW, Vladdy, pyro, Robert Wellock, and perhaps even Charles to check it out. I know there's going to be a lot wrong with it, and there's going to be a lot that needs to be fixed, and that's the purpose of me posting here; I know it looks good. :D

[Vladdy]

Originally posted by Jona
<snip /> I'm hoping DaveSW, Vladdy, pyro, Robert Wellock, and perhaps even Charles to check it out. <snip />
As an old saying goes: "Be careful what you wish for"...:D :D

MUST CHANGE:

1. The splash page has to go.

2. On main pages I get two scroll-bars - BAD. Just get rid of that scrollable content. You are the only one who cares to see your logo all the time - visitors are there for the content so let them have it. Many of them (me included) like to use keyboard for scrolling. "overflow: auto" on a block, prevents them from doing so. Also, whatever script you are running on scroll, makes page unusably slow (not everyone has 2GhZ puter, you know).

3. Menu has low contrast and and BG graphic does not adapt to font size changes.

OVERALL IMPRESSION

White on black and high contrast graphics give an impression of some gaming clan web site rather than web design outfit - change to "dark on light" scheme with more subtle graphics.

The banner/logo is too large for the rest of the page.
I would recommend no larger than 200px height.

Page stays on the left in wide browsers - center it.

Navigation menu is recognizable as links, I would remove the underline on hover.

[pyro]

Originally posted by Vladdy
As an old saying goes: "Be careful what you wish for"...:D :Dlol... well said. ;)

Since you said you are thinking about making version 3, do you want a critique on this current design, or do you want to know what types of things you need to address when you redesign? That question is why I haven't offered any advise yet...

Originally posted by Vladdy
Many of them (me included) like to use keyboard for scrolling. "overflow: auto" on a block, prevents them from doing so.I use my wheel mouse to scroll -- or try. overflow: auto breaks that, as well...

[Jona]

Originally posted by pyro
Since you said you are thinking about making version 3, do you want a critique on this current design, or do you want to know what types of things you need to address when you redesign? That question is why I haven't offered any advise yet...

Ah see, I knew I had screwed up somewhere's... Yeah, lol, I need to redesign. Thank you so much, Vladdy. :)

Pyro, I want to make something like from the CSS Zen Garden, but when I try to do more subtle, less high-contrast graphics, they either come out too big and unusable for a Web site, or they don't look like they're... subtle. lol. I also don't know where you get your photographs from, like pictures of the windmill and butterflies and whatnot -- that really affects a site aesthetically. Textured graphics are not my strong point, either... I've tried a lot of things, but if you haven't read by now, everything seems to come out metal, plastic, or glassy... I can do some textured graphics that are pretty simple, and I can make them scrollable, with no problem; in fact, I can mimic the graphics on your new site almost exactly, without stealing any of them, in Photoshop. I believe, then, my problem is that I'm not an excellent CSS designer... I know a lot, but knowledge does not equal skill.

[Vladdy]

Here is a suggestion for your redesign.
Instead of trying to figure out graphics and then doing the web site around them, start with the content (you pretty much have it), then make a layout (no colors/graphics, just positioning and flow), then try some color schemes and finally try graphics that fit overall "mood". This way colors/graphics will come to you easier as you shape you site up. Another advantage of this approach is that it allows you to keep doing graphical tweaks without having to "redesign".

[Jona]

You know you're absolutely correct, Vladdy. I did that the other day when I started on something, and found that method to be quite effective, though I never completed the design or applied any graphics to it, the general layout was simple enough. Thanks for the suggestion, I'll really get to work on it. :)

[pyro]

One of these days I'll write up a post on my blog describing my design process, but I don't have time to do it right now. ;)

As Vladdy said, when programming your site, it wouldn't be a bad idea to start with just the bare minimum XHTML. This will help ensure that you only use semantically meaningful markup, as you won't be concerned with the layout/design of the page. After that is done, you can go back and add non-semantic elements (div, span, etc) as needed to allow you control over the design of the site.

Also, as far as the graphics go, browse through sites such as the CSS Vault (http://www.cssvault.com/), etc for design inspiration. Obviously you need to be very careful not to copy the design, but rather copy the "inspiration" behind a design. I'd recommend that you read Cameron Moll's "Nodes of design inspiration (http://www.cameronmoll.com/archives/000016.html)". It is a very good (and true) article.

Design is a hard thing to "teach", as personally I believe that it is partly learned, and partly natural ability. Some people have more of a gift for coding/programming and some have more of a gift for designing.