12 replies [Last post]
flashlight
Offline
Regular
toronto
Last seen: 15 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Hi all,

Would you mind taking a look at theblogstudio.com and giving me a bit of a critique?

Thanks!

I really should be working...

www.flashlightdesign.com

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 10 years 47 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

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

flashlight
Offline
Regular
toronto
Last seen: 15 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site crit

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...

I really should be working...

www.flashlightdesign.com

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Site crit

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. Smile

flashlight
Offline
Regular
toronto
Last seen: 15 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site crit

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

I really should be working...

www.flashlightdesign.com

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Site crit

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!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

flashlight
Offline
Regular
toronto
Last seen: 15 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site crit

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

I really should be working...

www.flashlightdesign.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Site crit

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. Smile

flashlight
Offline
Regular
toronto
Last seen: 15 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site crit

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

I really should be working...

www.flashlightdesign.com

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 27 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Site crit

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.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 12 years 40 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

Site crit

Chris..S wrote:
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.

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;}

flashlight
Offline
Regular
toronto
Last seen: 15 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site crit

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...

I really should be working...

www.flashlightdesign.com

robbieDotCom
Offline
Regular
Stevens Point, WI
Last seen: 12 years 47 weeks ago
Stevens Point, WI
Joined: 2005-01-05
Posts: 20
Points: 0

Site crit

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.