Let 'er rip! Please critique side-scrolling portfolio site

[InLikeALion]

So, I've done my share of critiquing designs and sites in this forum, now it's my turn to be vulnerable. I'm thick-skinned, (not thick-headed) though, so be honest.

This is a portfolio site for a portrait painter that I've been working on. It is basically a side-scroller with a light-box implementation. I've been working over the last months in my spare time, and now am about to launch and then finesse. I realize it should be 'perfect' before launch, but my client wants her old site replaced asap, and is ok enough with the current state of things to put up what is available and then fine tune it over the coming week.

Some initial thoughts before you critique:

1. The site currently is ready for testing in FF, Safari, and IE 7. As it heavily utilizes fixed position elements, I will be conditionally adding a seperate IE 6> css that will be a traditional vertical scroller with no fixed elements or png's. As it presently is, just worry about testing in current browsers.

2. As this will be my first time doing an entirely different look for IE, instead of just sparse 'fixes', I would love best practice suggestions. Is it ok to have my IE 6> style conditionally added to the pages after all my other style sheets, thus over writing all of there styles in the cascade? or is there a way to hide those initial styles from IE 6 so the browser doesn't first have to process several style sheets that are just being superseded at the end?

3. The home page content is not finished - it's just sort of place-holder content till the copy gets finalized. Mainly concentrate on the portfolio section and the main interface.

4. For content pages (non-portfolio pages), I'm trying to figure out how to handle information that is too long for the given vertical space. I was thinking some sort of static box in which the content could scroll - like typical flash or framed boxes. But I want a semantically correct way to do this. (Resize the home page to 800x600 to see how the content gets cut-off)

5. I can't figure out why my h3's have a roll-over effect (at least in FF). I haven't spent a lot of time trying to debug this, but it wasn't readily apparent to me.

6. I'm having trouble reliable vertically centering my content divs. I've been trying the top: 50%; margin-top: -200px; approach, but it never works right.

I guess that's enough for now. I'll follow this thread and reply with further thoughts. Thanks for helping!

test site.

current site.

 

[tominated]

very nice execution, but is that a template? I'm no good with IE, so I don't have any advice on that, and as far as i know, it's virtually impossible to center a div vertically in css.

 

[TodVader]

I like the design in the test site. It looks nice and clean without too much white space. Ive never been a fan of side scrolling but in this context (showing art), I like it much more than vertical scrolling.

I have to say those paintings look awesome. Your client truly has talent. I know nothing about painting but I'm impressed with some of those.

 

[dtyson]

very nice execution, but is that a template? I'm no good with IE, so I don't have any advice on that, and as far as i know, it's virtually impossible to center a div vertically in css.

Vertical centering with CSS can be a bit tricky but is certainly possible. A couple URL's:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html
http://d-graff.de/fricca/center.html

Regarding the side scrolling, I think it's a nice idea and pretty common with art/photography sites but the execution is lacking. I would most certainly look into a java solution - something along the lines of http://www.e2interactive.com/e2_photo_gallery/demo.php... There are plenty out there. I just grabbed this one. Why would I use java? I would do this because it's a little more elegant, easier to use and would fit what you appear to be going for quite nicely.

My first response to your side scrolling method was slight confusion (and I've been around for a while) - "why do those images run off the page?", "are there more and how do I get to them?"... I just don't think we normally expect to have to use the vertical scrollbar...ever. In fact, I think people tend to have an aversion to having to do so. We just don't look for it. Don't know how that developed but it's definitely the case with me. Vertical scrolling solutions like the one above (or whatever else one may use besides html/css) aren't a problem at all.

Again, it's a nice site - but I'd find another solution if you want to scroll vertically.

 

[InLikeALion]

very nice execution, but is that a template? I'm no good with IE, so I don't have any advice on that, and as far as i know, it's virtually impossible to center a div vertically in css.

Nope. It is not a template. The design is 100% original (minus all the general influences that have shaped my design aesthetic).

As dtyson points out, it IS possible to center a div vertically, but I can't get the most common technique to work on my site. I think it has something to do with how much the document flow is changed, due to all the fixed positioning... but I don't know how to remedy this.

I have to say those paintings look awesome. Your client truly has talent. I know nothing about painting but I'm impressed with some of those.

I'll pass your complements along to her.

Regarding the side scrolling, I think it's a nice idea and pretty common with art/photography sites but the execution is lacking. I would most certainly look into a java solution - something along the lines of http://www.e2interactive.com/e2_photo_gallery/demo.php... There are plenty out there. I just grabbed this one. Why would I use java? I would do this because it's a little more elegant, easier to use and would fit what you appear to be going for quite nicely.

Javascript. I'm not trying to be word police, but when talking about web technologies, java and javascript are different. I may end up adding a jQuery assisted scroller to the mix, but I don't want the gallery to depend on javascript. What I have now degrades gracefully for browsers with js disabled. The pictures are still linkable, etc.

My first response to your side scrolling method was slight confusion (and I've been around for a while) - "why do those images run off the page?", "are there more and how do I get to them?"...

Again, it's a nice site - but I'd find another solution if you want to scroll vertically.

I didn't list it in my original post, but I'm planning on adding a tasteful right arrow below the thumbnails, with short instructions telling the viewer to scroll to the right to view more. This arrow would later become a click-target if I end up adding a jQuery automation, but I don't think I will go that far.

Also, at the end of your quote, you were saying vertical scrolling, and I wasn
't sure if you meant horizontal scrolling, or if you were responding to my #4 from my original post. I was a little confused.

Thanks for the replies so far!

 

[Lixivial]

I'm by no means a standards zealot, but just running it through the W3C validator:

You shouldn't place heading tags within block elements such as anchor tags. I'm not sure why you have a block element inside the heading tag, either (an empty span within the <h1>). Also it appears you're missing some alt tags on the front page. I'd recommend going through each page and running it against the W3C validator to make certain you've not done some silly errors. The few pages I validated were just minor oops errors that I mentioned above.

As far as design:

Overall it's pretty clean and straightforward such that it keeps the focus primarily on her art.

I like your thoughts on the gallery. Making just that div scroll is good, but I'd prefer seeing something other than a scrollbar at the bottom of my window. To me the sidebar (The one containing the categories of galleries) implies itself as an implicit element that extends to the bottom of the page, but that's just me. So I was expecting pictures to fade behind that sidebar.

It seems that you've covered that already, though. My only suggestion then, is that you might want to use those big arrow things that other sites use for right/left arrows on iPhones/iPod touchs. In case you're interested, attached are how it renders on MobileSafari, as well as an example of the arrows.

 

[InLikeALion]

Thanks for the screens of mobile safari. I haven't developed for mobile devices, so that'll be something to read into when I've gotten it mostly squared away with traditional browsers. I do like the suggestion of the arrows - I've already mentioned wanting to incorporate them for visual cues, but hadn't thought of using them as ui for mobile visitors. I'll see if that can make it into phase 2.

I'm not quite sure what you mean "You shouldn't place heading tags within block elements such as anchor tags." - I'll go validate the individual pages and see what it says. I just haven't heard that you aren't supposed to have <h> tags inside. anchor tags.

Also, the empty span is what I'm using for text replacement. I know it's not the most semantically correct, but it was a sacrifice I was willing to make, as I didn't want to use negative text indenting for such an important element. That can sometimes confuse screen readers, and I didn't want to have the branding section blank until the page loads.

 

[InLikeALion]

I'm not quite sure what you mean "You shouldn't place heading tags within block elements such as anchor tags." - I'll go validate the individual pages and see what it says. I just haven't heard that you aren't supposed to have <h> tags inside. anchor tags.

I just read the w3c validator results and it makes sense to me now. I was trying to put block elements inside inline elements. I'll have to figure out how to deal with that. It was a quick addition right before I posted it here, to give a home link.

I'd love more critiques and comments. Angelwatt, where you at?

 

[dtyson]

Javascript. I'm not trying to be word police, but when talking about web technologies, java and javascript are different.

Also, at the end of your quote, you were saying vertical scrolling, and I wasn
't sure if you meant horizontal scrolling, or if you were responding to my #4 from my original post. I was a little confused.

Sorry I wasn't specific when using the generic "java". I tend to be a little assuming, when speaking with other coders/designers, that certain things are just understood, especially when there's a link provided as illustration of the point.

Yes, you're right. I meant to say horizontal at the end.

Hope ya get the centering thing worked out.