SITE REVIEW: Groove Studios - Renewal

I'm currently working on a renewal for my own webdev studio GrooveStudiosJapan.

Here's the old version: http://www.gsv2.com/studios
Here's the new version: http://www.gsv2.com/studios/new/

I'm using this project to challenge myself to code as light as possible while creating a sharp look and feel and zero bad code.

I'm not sure how older browser's are going to handle the top-right headers. Let me know if anyone has any issues where the site comes out looking like crap.

Thanks for the reviews.

I found a kind of interesting thing. When I mouse over some of the links (IE6) it causes the page to shift it's height from the link down. Looks like something about the link states is causing a height change.

Kudos on your 508 compliance! Although I'm not a fan of providing validation links in pages, any effort to make your page accessible to people with disabilities is very cool in my book.

I see a lot of improvement in looks from the old to new one. However, I do like the idea of having thumbnails/screenshots for your portfolio that was in your old one.

Yeah, I have an idea for the thumbnails. I also liked that feature in the old one but haven't gotton to it in the new one. Check again in a few days.

DM, which links are causing the shift? Navigation? Or page links? I wish I could see that happening on my version of IE6.

Sorry but a quick question - the top right

"Groove Studios Japan Web Design and Development"

is that done with negative margins, positioning with ems or something with line heights?

I'm too lazy to look through the code lol!

Well I'm not to keen on the aesthetic, but I know that isn't your main concern and can see that you are going for the "simple beauty" thing. Personally I would lose the times new roman, I find it much easier to read sans serif on the screen and serif on paper.

You definately should be adding the portfolio section.

BTW: yay for clean markup

I did it with negative margins.

I agree about the times new roman. I wanted to give it a try but I think arial or verdana would read much easier.

Portfolio page coming soon.

I didnt find any problems with the site. , I think ou did what you were looking for with simplicity. But it still looks good. I didnt have any probs with the links as DM suggested. And yes you should have the thumbnails when you do your portfolio

All the links underneath the page titles. I think it's the dashed underline(border). I think you just need to add the border to the hover state. Just make it the same color as the background so it can't be seen.

The shift is only a single pixel at a time.

I'm pretty sure I already did that to the links, but I'll check again. I don't recal removing that and I do remember putting it there to avoid this problem. I'll check in a few hours.

SharkShark, thanks.

I'd be glad to take some screen caps if you'd like. I can't believe I'm the only one who can see this.

Lemme also check my font settings. Hmmm, large screen font are NOT enabled and the browsers default text size is medium. I don't get the same results in any other browser but IE, so...

I might just do away with the border effect and just go with text-decoration:underline. It's not much of a problem, but it's hardly worth the trouble it's causing. I'm not sure why it's happening, but the border is included for both the idle and hover states. Weird.

if you want a dashed underline try this:



where dash.gif is a 4px by 1px image, two pixcels white, two transparent. It works in everything. You can remove the white-space but, if the link goes on to two lines, IE (and only IE) will just show the underline on the lowest line. Everything else shows the underline nicely above and below the line break.

this would work too, right?:



I haven't actually tried it yet, but I think it's proper shorthand. But the dashed gif is really not that necessary since it's just eye candy. I'd rather just do it with border-bottom or not do it at all.

I don't know the bg shorthand and dreamweaver doesn't have a decent prompt for it. I think I should learn it though because it could cut quite a lot out of the stylesheets.

fair enough, it's like 100 bytes and it saves faffing around with browser compatibility. I've just used it to make scribbley underlines on my links. Scribbley underlines that animate on mouse over. Pretty useless but it looks kinda cute thats the only reason I thought of suggesting it.

Nice trick though, so thanks. Especially cool for scribbley underlines. I might have to try that out!