SITE REVIEW: Groove Studios - Renewal

  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • Liquescence
  • Proficient
  • Proficient
  • User avatar
  • Posts: 353
  • Loc: Queens, NY

Post 3+ Months Ago

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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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 :D
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

rtm223 wrote:
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 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.
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

I didnt find any problems with the site. :D, 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 :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

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


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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

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...
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

if you want a dashed underline try this:

Code: [ Select ]
a{
  background-image:url(dash.gif);
  background-position:100%;
  background-repeat:repeat-x;
  white-space:nowrap;
}
  1. a{
  2.   background-image:url(dash.gif);
  3.   background-position:100%;
  4.   background-repeat:repeat-x;
  5.   white-space:nowrap;
  6. }


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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

this would work too, right?:

Code: [ Select ]
a{background:#111 url('dash.gif') repeat-x 100%; white-space:nowrap;}


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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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 :lol: thats the only reason I thought of suggesting it.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Nice trick though, so thanks. Especially cool for scribbley underlines. I might have to try that out! :)
  • xml
  • Newbie
  • Newbie
  • xml
  • Posts: 6

Post 3+ Months Ago

Wow the new site is definetly an improvement. Great use of web standards esp CSS. Looks like you've only used one image, which is great for 56k users like me.

Love the top navigation, very sleak.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Thanks! :)

Post Information

  • Total Posts in this topic: 17 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.