New site. Critiques please

http://webs.ashlandctc.org/csimmons/sites/Communicast/pages/critique_site.htm

I’d like to hear every little thing you guys would like to suggest.

Things I’m worried about: background?, making a border for the header/footer, compatibility issues (though it works decent in newer versions of FF and IE), and I don’t know how to keep the “Subnav” links from flickering between lines (for the same link) maybe a css block command or something?

Anyway, have fun. :sen:

interesting a lot of empty space in that header; are you going to add anything in it?

nav element looks cute but the design will break after more than 8 characters are used

I like your Summary TItle main header treatment

and thats all I got it seems you are still working on the comment section
nice colors so far but I feel that

also why is your summary font smaller than your comments?

is that your pic?

To be honest, and I don’t if you meant for this, but, I was initially drawn to the ‘sub nav’ and didn’t even notice the main nav links until I scrolled back to the top of the page.

Also, I think that ‘cut’ (<hr />) is out of place. I would suggest something like a 1px bottom border on the subnav_link_area. I think you should also allow those sub nav links to spread a little more (don’t apply as much padding on the left and right).

I do like your color choices though. But I think you need to work a bit on the typography, it doesn’t flow very well at the moment. Also, in your code, I’m trying to figure out why you use divs for EVERYTHING. You aren’t using any heading tags, paragraph tags, etc. :look:

But overall it’s getting there! :thumb2:

[QUOTE=wes_design;2355347]interesting a lot of empty space in that header; are you going to add anything in it?[/quote]Probably not. I’ve seen a lot of websites with huge empty headers like that. Personally I think that empty space makes you concentrate more on the title, but if a few people disagree with me, then I have no problem changing it.

nav element looks cute but the design will break after more than 8 characters are used
True, but I probably won’t be using many links at all. Maybe 5 if I’m lucky.

…why is your summary font smaller than your comments?
Eh, it probably won’t be. I think I was just trying to make them look different to show 2 different sections of the site, and made the summary font smaller to depreciate it a little (seeing as how you’ll only read it once or twice). People probably want comments to be a little bigger for readability.

is that your pic?
haha! No, that’s the client. I had to retouch it a little and I’m still colorblind/lazy. Is he severely discolored??

[QUOTE=redelite;2355358]To be honest, and I don’t if you meant for this, but, I was initially drawn to the ‘sub nav’ and didn’t even notice the main nav links until I scrolled back to the top of the page.[/quote]Those subnav links are probably gonna turn into the main attraction of the site (the videos for the vodcast).

Also, I think that ‘cut’ (<hr />) is out of place. I would suggest something like a 1px bottom border on the subnav_link_area. I think you should also allow those sub nav links to spread a little more (don’t apply as much padding on the left and right).
I like the hr (I miss them, someone killed them long ago), but I definitely agree with letting those links breathe. I’ll change that now.

…you need to work a bit on the typography, it doesn’t flow very well at the moment.
I’m growing as a typographist though. It’s a slow process with me. Any suggestions?

Also, in your code, I’m trying to figure out why you use divs for EVERYTHING. You aren’t using any heading tags, paragraph tags, etc.

I just jumped from years and years of table layouts to CSS layouts. It’s still a bit overwhelming. Although you’re definitely right. I need to start making use of the tags that are put there TO make use of. Thanks for reminding me they exist.

But overall it’s getting there! :thumb2:
Thanks for sifting through my hideous code. I’m sure it was difficult. :angel:

The subnav has more weight than the main nav in both size and saturation. Also the reading angles get broken by it. The header has a bunch of negative space which seems out of place. The black text on the green is not contrasty enough IMO. I dunno, something seems very off-balance to me about the whole thing. I seems like went for web 2.0 then tried to go with a traditional look. The color palette seems a bit harsh too. I would tone the colors back. The colors themselves work, but are just too vibrant. Or maybe a shade or 2 off.

Alright, I’ll take out the negative space in the header.
Good catch on the footer text. It looked ugly as sin to me, but for some reason I didn’t connect the two (I’m pretty tired).
Like I said, the subnav is really going to be the main nav. It’ll make sense when the final product rolls out.
I like the colors, but my next site I’ll keep in mind to tone them back a little for more traditional looks.
Thanks.

For the content type, throw the leading way up, and make the font size for the comments throw a little gravatar icon to the left of the type and separate them by dashed borders. Kinda like I do on my site http://ajcates.com

I didn’t read any other posts so sorry if I overlap something that’s already been said:
[list=1]
[] subnav pops way to much, pops and pokes you in the eye. subdue the teal, drop the gradient.
[
] Garamond, reallly? Where’s the backup font, when you do fonts you need to have more than one font listed in your cascade, since Garamond is not a system font it won’t show on a lot of systems.
[] on the font note, 5 fonts? Georgia, Garamond, Verdana and the two different fonts in the logo. Kill the font mix monstrosity. Simplify it to Georgia, Verdana there’s nothing you can do about the logo, but 4 is better than 5.
[
] line height… holy crap. the minimum line height should always be 18px with a 10-12px height. if it’s in ems it’s 1.5em
[] :lol: you have paragraph tagging in the video box where it’s not needed, but you don’t have any paragraph tagging in the copy where it is needed.
[
]<b></b> == <strong></strong>
[*] semantically speaking you shouldn’t have the divs w/ id of left or the id of right, not a big deal, just sayin.
[/list]

overall it’s not terrible, the colors are a tad to bright IMO, and I’d like to see some sort of play on the whole seed / planting thing. it appears once in the header but it’s not carried on in any way shape or form through out the site.

I was actually going to do that exactly. It’ll take a few weeks for me to learn the ASP.NET needed to put a comment system up.
BTW, your site is coming together nicely. Your Twitter feed isn’t on yet, but the rest of it (including your articles) is looking great.

[QUOTE=simplistik;2355433]I didn’t read any other posts so sorry if I overlap something that’s already been said:
[list=1]
[] subnav pops way to much, pops and pokes you in the eye. subdue the teal, drop the gradient.
[
] Garamond, reallly? Where’s the backup font, when you do fonts you need to have more than one font listed in your cascade, since Garamond is not a system font it won’t show on a lot of systems.
[] on the font note, 5 fonts? Georgia, Garamond, Verdana and the two different fonts in the logo. Kill the font mix monstrosity. Simplify it to Georgia, Verdana there’s nothing you can do about the logo, but 4 is better than 5.
[
] line height… holy crap. the minimum line height should always be 18px with a 10-12px height. if it’s in ems it’s 1.5em
[] :lol: you have paragraph tagging in the video box where it’s not needed, but you don’t have any paragraph tagging in the copy where it is needed.
[
]<b></b> == <strong></strong>
[*] semantically speaking you shouldn’t have the divs w/ id of left or the id of right, not a big deal, just sayin.
[/list]

overall it’s not terrible, the colors are a tad to bright IMO, and I’d like to see some sort of play on the whole seed / planting thing. it appears once in the header but it’s not carried on in any way shape or form through out the site.[/QUOTE]

[LIST=1]
[] I like the color of the subnav, but I definitely agree that it’s gradient is too harsh. I’ll modify that later today and maybe mess with the colors a little to see if something looks better. Any suggestions other than teal? (I thought it was blue >.<!)
[
] You’re right about the fonts and I’ll modify them just as you’ve suggested. Also, thanks for teaching me why people have 2 or 3 fonts in their styles. I’ll keep that in mind. I need to find a list of system fonts so I know which ones to use.
[] Yeah, I need to fix the line-heights, font-size, and convert it to em’s.
[
] Meh, the paragraph tagging in the video box is simply because I’m lazy and didn’t feel like figuring out the exact padding I needed to make that work. Pretty much ignore that video box seeing as how it’s going to change completely.
[] Learning to layout sites in CSS is a problem I’ll eventually overcome. Slowly. Very slowly. :slight_smile:
[
] Yeah, I do need to think of some planty stuff to make that seed idea pop out. Originally I was going to get a photo of the client kinda crouched down under the header watering that building, but he and his boss thought that was too cutesy (I would’ve made it look cool with some of that depth of field photography stuff). Meh…
Maybe I’ll add some vines or something coming out of the header and the footer and extending off to the sides a little?
Although to maintain integrity I’d probably have to hand paint those like I did the building’s vines… And that would be a pain.
I wonder if I could find some viney brushes. :slight_smile:
[/list]

Thanks Simp.
I’ll have this updated by 4pm today.

Edit: By the way. The one thing that is really really bothering me about the site (the footer) isn’t being critiqued. To me, the border of that portrait looks off. Like rounded or some crap and maybe his portrait isn’t the right color or something. I don’t know, but that footer makes me upset for some reason. Any help?

You know the footer is not being critiqued? It does not come across as a footer. But another section of content. It is given far too much weight and content wise does not seem to represent a footer. A footer normally contains links almost a carbon copy of the main nav. Also it may expand out with info like disclaimer, privacy policy, copyright, maybe some quick links. That type of stuff. And it is usually played back and to some degree subtle. Of course this is my opinion.

true, does not look like a footer. and the gray gradient/line/separator thing on top of it for me doesn’t really work - it just cuts at the ends and sits there kind of awkwardly. why would you have a biography in the footer anyhow? why don’t you make it a continuation of the content, and make a footer that will be a footer (as per DDD’s instructions? :smiley: ) maybe it works better…

If your having trouble with system fonts and families, here’s a website I use ALLLLL the time: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

oooh wicked useful link! thanks :smiley:

@DDD and celandine - I was actually hoping to make an interesting footer rather than just that copyright stuff and a couple links.
http://www.alistapart.com/articles/revivinganorexicwebwriting (refer to “The Last Words” section toward the bottom)
It was going to have at least 3 columns with stuff in them. But don’t know about colors and such. Maybe similar colors to the main nav just lightened and make it taller? Maybe make it stretch across the page?? I dunno…

@ red - I ruv roo… That is awesome. Thanks so much. :smiley:

hey now that I think about it, that expand-the-footer idea is actually quite awesome :smiley: I’m making a 360 degree turn here and saying run with it! I still think the gray line on top of it has to go though… maybe make it yellow, to echo your horizontal nav?

I’m thinking about just expanding the footer all the way across the bottom, making it look flat, and making vines growing out of the header all the way across the top. :slight_smile:
Now if I can just get the colors right and remember how I lined up inline icons with their list counterparts. :slight_smile:

Edit:
A lot of fixes applied with a little content. Ignore the fragile footer as I intend to fix it.

Hey,

I think that whatever is written next to the guys picture should be written in first person. Specially if its his site. And could definitely do with some shortening.

[QUOTE=Noahdecoco;2356063]Hey,

I think that whatever is written next to the guys picture should be written in first person. Specially if its his site. And could definitely do with some shortening.[/QUOTE]
Agreed… but that’s what he sent me so I just put it up there. :\

I’m such a CSS newb. I can’t even get this footer to look right. Ah well, back to work.

Edit: Okay, I’m sticking a fork in this one unless someone points out something really terrible or has some good suggestions on that fugly footer.

Thanks a lot guys (and girls).
http://webs.ashlandctc.org/csimmons/sites/Communicast/pages/critique_site.htm

I’m such a CSS newb. I can’t even get this footer to look right.

what do you want to do with it? maybe I can help… (not that I’m a css pro, lol. but usually in the end it surrenders and does what I want)

although it don’t look too bad at the moment, really… hey, if the client likes it… :smiley: