Site crit

Good things:

1) nice choice of color
2) clear navigation
3) spiffy logo
4) impressive portfolio

Bad things:

1) slow loading time - 42.24 seconds on 56K
2) Css validation [url=http://jigsaw.w3.org/css-validator/validator?profile=css2&usermedium=all&warning=2&text=%2F*++http%3A%2F%2Fwww.theblogstudio.com%2Ftextpattern%2Fcss.php%3Fs%3Ddefault+*%2F%0D%0A%0D%0A*+%7B%0D%0A%09padding%3A0%3B%0D%0A%09margin%3A0%3B%0D%0A%7D%0D%0A%0D%0Abody%7B%0D%0Afont-family%3A+%22lucida+grande%22+%22Helvetica+Neue%22%2C+%22Helvetica%22%2C+%22Arial%22%2C+%22Verdana%22%3B%0D%0Afont-size%3A+100%25%3B%0D%0Acolor%3A+%23666%3B%0D%0Aline-height%3A+1.2em%3B%0D%0Abackground-color%3A+%23fff%3B%0D%0A%7D%0D%0A%0D%0Aimg+%7Bborder%3A+0%3B%7D%0D%0A%0D%0Ap+%7Bmargin%3A+0.8em+0%3B%7D%0D%0A%0D%0A%23header%7B%0D%0Awidth%3A+100%25%3B%0D%0Aheight%3A+260px%3B%0D%0Abackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fheader-painting.jpg%29+repeat-x%3B%0D%0A%7D%0D%0A%0D%0A%23logo%7B%0D%0Aposition%3A+absolute%3B%0D%0Atop%3A+78px%3B%0D%0Aleft%3A+0%3B%0D%0A%7D%0D%0A%0D%0A%23nav%7B%0D%0Aposition%3A+relative%3B%0D%0Amargin%3A+-40px+0+20px+280px%3B%0D%0A%7D%0D%0A%0D%0A%23nav+ul%7B%0D%0Atext-indent%3A+-9999px%3B%0D%0A%7D%0D%0A%0D%0A%23nav+li%7B%0D%0Adisplay%3A+block%3B%0D%0Afloat%3A+left%3B%0D%0Awidth%3A+95px%3B%0D%0A%7D%0D%0A%0D%0A%23nav+a%7B%0D%0Adisplay%3A+block%3B%0D%0Awidth%3A+95px%3B%0D%0Aheight%3A+40px%3B%0D%0Atext-decoration%3Anone%3B%0D%0Aborder-color%3A+%23fff%3B%0D%0Aborder-style%3A+solid%3B%0D%0Aborder-width%3A+0+0+6px+0%3B%0D%0A%7D%0D%0A%0D%0A%23nav+a%3Ahover%7B%0D%0Aborder-color%3A+%23537419%3B%0D%0Aborder-style%3A+solid%3B%0D%0Aborder-width%3A+0+0+6px+0%3B%0D%0A%7D%0D%0A%0D%0A%23home%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fhome-off.jpg%29+no-repeat%3B%0D%0A%0D%0A%7D%0D%0A%0D%0A%23home%3Ahover%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fhome-on.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23blog%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fblog-off.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23blog%3Ahover%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fblog-on.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23services%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fservices-off.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A%23services%3Ahover%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fservices-on.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23portfolio%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fportfolio-off.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23portfolio%3Ahover%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fportfolio-on.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23contact%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fcontact-off.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23contact%3Ahover%7Bbackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fcontact-on.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%23content%7B%0D%0Awidth%3A+777px%3B%0D%0A%7D%0D%0A%0D%0A%2F*+left+column+*%2F%0D%0A%0D%0A%23leftcol%7B%0D%0Aposition%3A+relative%3B%0D%0Amargin%3A+60px+0%3B%0D%0Awidth%3A+279px%3B%0D%0A%7D%0D%0A%0D%0A%23leftcol+img%7B%0D%0Amargin%3A+20px+0+0+30px%3B%0D%0A%7D%0D%0A%0D%0A%23leftcol+a%3Ahover%7B%0D%0Abackground%3A+%23fff%3B%0D%0A%7D%0D%0A%0D%0A%2F*+main+*%2F%0D%0A%0D%0A%23main%7B%0D%0Afloat%3Aright%3B%0D%0Awidth%3A+475px%3B%0D%0Afont-size%3A+76%25%3B%0D%0A%0D%0A%7D%0D%0A%0D%0A%23notabout%7B%0D%0Amargin%3A+5px+0+-5px+2px%3B%0D%0A%7D%0D%0A%0D%0A%23main-left%7B%0D%0Acolor%3A+%23444%3B%0D%0A%7D%0D%0A%0D%0A%23main-right%7B%0D%0Afloat%3Aright%3B%0D%0Awidth%3A+221px%3B%0D%0Abackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fcalloutmiddle.jpg%29+repeat-y%3B%0D%0A%7D%0D%0A%0D%0A.callouttop%7B%0D%0Awidth%3A+221px%3B%0D%0Aheight%3A+14px%3B%0D%0Abackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fcallouttop.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A.calloutbottom%7B%0D%0Awidth%3A+221px%3B%0D%0Aheight%3A+14px%3B%0D%0Abackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fcalloutbottom.jpg%29+no-repeat%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%23main-right+p%7B%0D%0Apadding%3A0+10px%3B%0D%0Afont-size%3A+0.9em%3B%0D%0Aline-height%3A+1.6em%3B%0D%0A%7D%0D%0A%0D%0A%23main-right+h3%7B%0D%0Amargin%3A+0+0+0+5px%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A.text%7B%0D%0Amargin%3A+0+0+80px+0%3B%0D%0A%7D%0D%0A%0D%0A%23main+li%7B%0D%0Adisplay%3Ablock%3B%0D%0Apadding%3A+1px+0+3px+5px%3B%0D%0Amargin%3A+5px+0%3B%0D%0Abackground%3A+%23D5E4B5%3B%0D%0Aborder-color%3A+%236A9B01%3B%0D%0Aborder-width%3A+1px+0+2px+0+%3B%0D%0Aborder-style%3A+solid%3B%0D%0A%7D%0D%0A%0D%0A%23main+li+li%7B%0D%0Abackground%3A+%23fff%3B%0D%0Aborder%3A0%3B%0D%0Amargin%3A+0+0+0+-20px%3B%0D%0Apadding%3A+10px+0+5px+30px%3B%0D%0Afont-size%3A+0.98em%3B%0D%0Acolor%3A+%23444%3B%0D%0A%7D%0D%0A%0D%0Ablockquote%7B%0D%0Awidth%3A+80%25%3B%0D%0Amargin%3A+5px%3B%0D%0Abackground-color%3A+%23D9E6BC%3B%0D%0Apadding%3A+0+5px%3B%0D%0Aborder%3A+3px+solid+%23EAEBEC%3B%0D%0A%7D%0D%0A%0D%0A.clear%7B%0D%0Aclear-both%3B%0D%0A%7D%0D%0A%0D%0A%23footer%7B%0D%0Aclear%3Aboth%3B%0D%0Amargin%3A+0px+0+0+300px%3B%0D%0Apadding%3A+30px+0+0+0%3B%0D%0Acolor%3A+%23888%3B%0D%0Afont-size%3A+0.8em%3B%0D%0A%7D%0D%0A%0D%0A.highlight%7B%0D%0Apadding%3A+0px+3px+1px+3px%3B%0D%0Abackground%3A+%23FCBE81%3B%0D%0A%7D%0D%0A%0D%0A%2F*+type+stuff+*%2F%0D%0A%0D%0Aa%3Alink%7B%0D%0Atext-decoration%3A+none%3B%0D%0Acolor%3A+%23FF7F00%3B%0D%0A%7D%0D%0A%0D%0Aa%3Avisited%7B%0D%0Acolor%3A+%23888%3B%0D%0A%7D%0D%0A%0D%0Aa%3Ahover%7B%0D%0Abackground%3A+%23FFDDBB%3B%0D%0A%7D%0D%0A%0D%0Ah1%7B%0D%0Amargin%3A+5px+0%3B%0D%0Afont-size%3A+30px%3B%0D%0Aletter-spacing%3A+-1px%3B%0D%0Acolor%3A+%234A5874%3B%0D%0Aheight%3A+35px%3B%0D%0A%7D%0D%0A%0D%0A.article+h1%7B%0D%0Amargin%3A+5px+0+0+0%3B%0D%0Afont-size%3A+20px%3B%0D%0Aletter-spacing%3A+-1px%3B%0D%0Acolor%3A+%234A5874%3B%0D%0Aheight%3A+30px%3B%0D%0A%7D%0D%0A%0D%0A%0D%0Ah2%7B%0D%0Amargin%3A+0px+0%3B%0D%0Afont-size%3A+20px%3B%0D%0Aletter-spacing%3A+0px%3B%0D%0Acolor%3A+%23679800%3B%0D%0A%7D%0D%0A%0D%0Ah3%7B%0D%0Awidth%3A+202px%3B%0D%0Aheight%3A+34px%3B%0D%0Afont-size%3A+14px%3B%0D%0Acolor%3A+%234A5874%3B%0D%0Apadding%3A+6px+0+0+15px%3B%0D%0Abackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fh3bg.jpg%29+no-repeat%3B%0D%0Aborder%3A+2px+%23%0D%0A%7D%0D%0A%0D%0A%0D%0Ah4%7B%0D%0Awidth%3A+202px%3B%0D%0Aheight%3A+34px%3B%0D%0Afont-size%3A+14px%3B%0D%0Acolor%3A+%234A5874%3B%0D%0Amargin%3A+0+0+-15px+15px%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%2F*+comments+*%2F%0D%0A%0D%0A.comments-invite%7B%0D%0Aheight%3A+35px%3B%0D%0Apadding%3A+5px+33px%3B%0D%0Abackground%3A+url%28http%3A%2F%2Fwww.theblogstudio.com%2Fimages%2Fv2%2Fcomment.jpg%29+no-repeat+center+left%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A%2F*+form+stuff+*%2F%0D%0Aform%7B%0D%0Acolor%3A+%23FF7F00%3B%0D%0Afont-weight%3Abold%3B%0D%0A%7D%0D%0A%0D%0A%2F*+sifr+*%2F%0D%0A%0D%0A%2F*+This+goes+in+the+stylesheet+to+hide+the+browser+text+before+it+is+replaced+*%2F%0D%0A%0D%0A%0D%0A%0D%0A.sIFR-hasFlash+h1+%7B%0D%0Avisibility%3A+hidden%3B%0D%0Aletter-spacing%3A+px%3B%0D%0Afont-size%3A+30px%3B%0D%0A%7D%0D%0A%0D%0A.article+.sIFR-hasFlash+h1+%7B%0D%0Avisibility%3A+hidden%3B+%0D%0Aletter-spacing%3A-1px%3B%0D%0Afont-size%3A+100px%3B%0D%0A%7D%0D%0A%0D%0A.sIFR-hasFlash+h2+%7B%0D%0A%2F*+visibility%3A+hidden%3B*%2F%0D%0A%0D%0A%7D%0D%0A%0D%0A%0D%0A.sIFR-flash+%7B%0D%0Avisibility%3A+visible+%21important%3B%0D%0Amargin%3A+0%3B%0D%0A%7D%0D%0A%0D%0A.sIFR-replaced+%7B%0D%0Avisibility%3A+visible+%21important%3B%0D%0A%7D%0D%0A%0D%0Aspan.sIFR-alternate+%7B%0D%0Aposition%3A+absolute%3B%0D%0Aleft%3A+0%3B%0D%0Atop%3A+0%3B%0D%0Awidth%3A+0%3B%0D%0Aheight%3A+0%3B%0D%0Adisplay%3A+block%3B%0D%0Aoverflow%3A+hidden%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A%0D%0A]errors[/url]
3) Design looks a bit templated to me

- Antibland

Hey, thanks. Love that avatar...

Could you expand a bit on templated look? If there's one thing I abhor, it's pre-canned design.

I should just point out that I've been made aware of some weird behavior on the nav in IE. I'm in an all mac environment at the moment, but will be looking into that in the morning...

Your sites are the kind that make me want to give up.

As far as a critique goes, I don't think their is anything I could tell you, I only hope I am as good as you one day.

God i'm so flattering.

Joseph: *blush* You just made my week! Thanks

Hi Flashlight

Apart from the thing about the loading time the only other thing I can come up with is that I'd have some textual links down the bottom as your other links are images and with images switched off there's no where to go.

'Part from that it's lovely - especially like the Dad blog.

*sigh* I hate you!

Ahhh - very, very good point. I'll be doing that right about now.

For the menu items consider using a single background image (with both on and off images adjacent) and shifting the background-position. On broadband I was finding a noticable delay before the image changed on the first hover. More than enough time for me to decide something wasn't right and to move the mouse somewhere else and never see the highlight change.

Apart from that a nice clean look.

Another great tip. I'll do that Chris, thanks.

Yes! That is a very nice presentation! The initial display of your homepage arrives like lightening. Quick!

I'd change "Design must by its nature flow from the content."

to "Design must, by its Nature, flow from the content."

to be grammatically-correct. (Nature is a powerful thing.) And you're associating your presentation with Nature. That's pretty awesome!

I find that mousing directly in the middle of the five menu item words doesn't do anything. But just a tad above them , a couple pixels, and they kick-in. I'm using IE XPSP2.

I'd lose the vulgarity like "crap" and "horny" in your top-most example "A Quiver of Quills". It's a derogatory association you don't want if you're attempting to appeal to corporate buyers; which I believe this is about.

Another way to fix this without having to create new images is to have the hover state set as the background for the li of each link, this in effect preloads it, it's underneath the off image that is the background for the a tag.
So instead of this:

<li><a href="http://www.theblogstudio.com" id="home">home</a></li>

#home{background: url(home-off.jpg) no-repeat;}
#home:hover{background: url(home-on.jpg) no-repeat;}

You'd have this:

<li id="home"><a href="http://www.theblogstudio.com">home</a></li>

li#home {background: url(home-on.jpg) no-repeat;}
#home a{background: url(home-off.jpg) no-repeat;}
#home a:hover{background: url(home-on.jpg) no-repeat;}

Hey Chris, great tip. I'll use that for sure.

For now, I've just added a new hidden div called preload that is set to visibility:hidden and stuck way off stage to preload the images. I've still got some tweaking to do, but client work beckons! Got to pay those mounting bills...

Nice looking site. I would probably do something to set apart the content from the text links on the bottom of the page. I would play around with using a div with a background color or maybe a simple horizontal rule would do the trick. Just a thought.