SITE REVIEW: Groove Studios - Renewal

  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 15th, 2004, 4:42 am

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 15th, 2004, 4:42 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post May 15th, 2004, 5:15 am

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.
- dM
  • Liquescence
  • Proficient
  • Proficient
  • User avatar
  • Joined: May 11, 2004
  • Posts: 353
  • Loc: Queens, NY
  • Status: Offline

Post May 15th, 2004, 12:32 pm

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
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 16th, 2004, 12:28 am

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
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 16th, 2004, 2:54 am

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
CSS website design tutorials
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 16th, 2004, 4:01 am

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
  • Joined: Apr 24, 2004
  • Posts: 1013
  • Loc: Living In Today
  • Status: Offline

Post May 16th, 2004, 5:29 am

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 :)
Yesterday is history.Tomorrow is mystery.Today is a gift.
Car Audio Sytems
LED Emergency Lights
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post May 16th, 2004, 6:51 am

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.
- dM
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 16th, 2004, 5:32 pm

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
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post May 16th, 2004, 6:17 pm

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...
- dM
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 17th, 2004, 1:27 am

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
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 17th, 2004, 2:08 am

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.
CSS website design tutorials
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 17th, 2004, 2:57 am

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
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 17th, 2004, 3:05 am

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.
CSS website design tutorials
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post May 17th, 2004, 3:07 am

Nice trick though, so thanks. Especially cool for scribbley underlines. I might have to try that out! :)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 17th, 2004, 3:07 am

Post Information

  • Total Posts in this topic: 17 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 20 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.