Your thoughts on this...

[Sam]

I'm building a mockup (http://host191.ipowerweb.com/~minglewi/taylor/) for a business in my area, and thought i'd have you all give it a look. The main thing i'm worried about is whether its alright to have those images as background images. I realize the issues with load times, and I will be compressing those images soon, but right now i am just going for quality.
A side note: All images are borrowed at the moment, but I will be replacing them with my own photos before the final site goes live. I just didn't want to waste my time taking pictures before knowing if the job was going to go through or not. Thanks in advance
EDIT:
by the way, this business is basically a county wide consortium of sorts where businesses come once a year to show off their products/services. Some of the organizers want to make a website so the info is accessible year round, so this is the mockup for the front page.

[Jick]

I like it! ;) I think it's very professional. :D

Not really anymore I can say at the moment (Can't think of anything). :p

[davidbrent]

very nice site Sam. i would have the edge (right) more distinguishing, add maybe a shadow or just a border to polish it off.

Other than that, brilliant.

[theuedimaster]

real nice, and yea, keep the image in the background :)

[davidbrent]

why dont you crop the orange bit and make it just one then repeat it as the backgroundimage. Then for the container bit, use another background that includes the edge.
Simple, split 1 file into 2 saves load time and maybe saves size?

Best Wishes,
David

[fetopher]

Are each B+W/Color image separate or the same image? The reason I ask is that the first time going over each image, there was a blink as if one image was being dumped and another being loaded. One way around this would be to combine both images into one, then for the B+W state use background-position: 0 0; for the color state use background-position: 50px (or whatever it would be).

Other than the blinking, I love the site. Keep up the creative work!

[sharkey]

Very nice cant really think of a way to improve on it

[Sam]

Originally posted by fetopher
Are each B+W/Color image separate or the same image? The reason I ask is that the first time going over each image, there was a blink as if one image was being dumped and another being loaded. One way around this would be to combine both images into one, then for the B+W state use background-position: 0 0; for the color state use background-position: 50px (or whatever it would be).

They are already using the same images, not sure what is causing the flicker... what browser are you using? (I'm guessing IE6).

Originally posted by davidbrent

why dont you crop the orange bit and make it just one then repeat it as the backgroundimage. Then for the container bit, use another background that includes the edge.
The image is only 8kb, its not really a problem as far as i'm concerned. I wanted the white to go all the way down the page, so this seemed like the best option.

Originally posted by davidbrent

very nice site Sam. i would have the edge (right) more distinguishing, add maybe a shadow or just a border to polish it off.
I thought about the dropshadow, but it seems way overdone. I figure I've already got the cederholm effect going with the faux columns, so I wanted to shy away from the dropshadows. The is a very subtle 3px border between the container and the background though.

Thanks for all the reviews guys, keep 'em coming. I would especially like to have this torn apart by Vladdy or Pyro (et. all) if you happen to read this.

Edit:
I'm also out of town on a dialup and no old browsers, so if anyone out there wants to give this a peak in IE5/5.5 and/or opera, that would be great.

[fetopher]

I looked at your site in Firefox (Mac) and Safari. Only Safari had the blinking problem. Not sure why since I use the same thing on my site and Safari doesn't blink. Odd. Maybe just a fluke.

[Vladdy]

Be careful what you wish for ;) ...
I like this site a lot.
My hat is off to you for the creative use of span within the anchor to create that navigation.

Some nitpicking:

1. Try giving the navigation text a bit more spacing, or maybe make the groups more centered relative to the row they represents, or maybe do not separate them into groups at all (absolute positioning should allow you to play with it), or try using bigger or bold font. I think the text navigation is not visually balanced with images and can use some "highlighting".

2. <div id="header"><h1><span></span>...</h1></div>
- <div> can be dropped for sure. I understand you use the span to cover the text in a way that makes it visible when the images are turned off. Personally, I do not know anyone (other than a few geeky web developers) who would browse with images off and CSS on :D :D, and would use only <h1> with padding and overflow:hidden to move the text out of the way - but that is me...

3. I would center the container, rather than making it stick to the left.

4. <p class="clearing">&nbsp;</p> can be replaced by <hr /> - IMHO it fits semantics much better...

5. Obvious things that I know you planned on doing :p : Give page a title, move CSS to a separate file.

P.S. After proof-reading: who says I can not be nice??? :D :D :D

[Sam]

Thanks Vladdy, Always appreciated. I'll definately add some more spacing to the navigation, not sure about centering since the client asked for a yearbook look&feel, but i'll play around with it a bit. I'll definately lose the header div, but i think i'll keep that image replacement method, since I normally browse with images off to save bandwidth. Perhaps i'll try to work out an image replacement method that's more semantically correct though... I'll have to think about centering the whole page, I didn't do it at first just because it seems a little to trendy. Thanks for the idea on the hr, i'll definately do that right away. As to the title, its those damn htmlkit templates, It does the whole document structure without a title and i always forget to go back and add one. I'll do that straight away.

[pyro]

As Vladdy said, be careful what you wish for. And, since he hit the code, I'll have a go at the design...

First of all, the two photos that you have at the top are just screaming for a bit of wear and tear (http://www.cameronmoll.com/archives/000024.html). If it were me, I couldn't resist.

(Most of) the photography is really quite nice, so I wouldn't turn it all to greyscale. The site would look much more vibrant had the color photography been used, rather than just showing up on hover. Also, the outer black border you've got around the photos would probalby look better as a shade of grey, rather than black. Also, right now, the orange background seems a bit overboard, but if the photography were in color, that may not be the case.

Might want to see what happens if you make the link's text bold. I'm also not sure about the Georgia font. Did you try a sans-serif font?

Also, not sure if it's deliberate or not, but in your source you have "Southern Oregon Home Show" while the image that replaces that text has "Jackson County Home Show".

Overall, it's really quite nice though.

[pyro]

Originally posted by Sam
I'll have to think about centering the whole page, I didn't do it at first just because it seems a little to trendy.Usually there's a reason things are "trendy". Usually that reason is it looks better that way. :p

[Sam]

Thanks Ryan, I was planning on adding the wicked worn look once i took some picutres of my own(one of those is borrowed from Luke Wilkins (http://www.lukewilkins.com/), and the other from Sam Javanrouh (http://wvs.topleftpixel.com/)), but they should be replaced shortly. The hover on the pictures is wdik (http://www.whatdoiknow.org/photos.shtml) inspired, but I can see where you're coming from with that. Perhaps i could go worn look and get rid of it on hover? not really sure...

[Sam]

I've entirely redone this page, so if you all wouldn't mind giving it a second glance, that would be grand. I realize that the new version is totally effed in IE, so ignore that for now. I'm experimenting with a few things to fix that. So if you get the chance, take a look here (http://host191.ipowerweb.com/~minglewi/taylor2/) (note: its a different url) and let me know what ya think about it.

[davidbrent]

i think maybe a margin at the top and bottom, say 40px will be good. also, im not a big fan of the wood look in the header. in my opinion, there are too many borders. i.e around the "hover me, im colourful" images. i dont really like the sub headers "stories" and "shop". Maybe smaller text, or a better image replacement.

i think the variation in black and white to colourful is a bit contrasting. maybe make it match (i.e both colourful). smaller text on the tabbed links, and make the text darker, or the background image darker.

have a bit more padding on the main contnet, it looks cramped and unproffesional for such a good desgn. if i was to modify this site, i would:

*1) get rid of the centered look, plant it on the left (the whole container that is)

*2) make the inside box a bit bigger (wider) as it looks awfully thin, especially as it is the main content.

*3) get rid of the wood effect, use your present pictures (the hover ones) mix them together in Photoshop or GIMP and make the b+w, then i would use them as the background. emphasizing the logo text.

*4) enlarge the gap between the logo and the navigation bar. still to cramped

*5) change the right hand side column background colour to the same as the content as it has the borders to distinguish the stories articles.

*6) change the hover state on the left images, so colour > b+w rather than b+w > colour.

*7) have the "home" link at the left of the list of navigation rather than the right, its not like hebrew, we read left to right on hte internet. we need to know homeis the begginning, not the end.

*8) the footer is bland, change it so the text is smaller, maybe a little text-transform: uppercase; and voila.

i haven't got much time i will get back to you later. great site, i think it could be very much vault worthy witha couple of changes.

Best Wishes,
David

[Sam]

thanks for the review. I'll take all that into consideration. keep 'em coming.

[davidbrent]

well i think i'm spent!