Rate my design outta 10 please :)

[rajat.vaghani37]

Cyber Sky - "The Ultimate Cyber Zone"

I made the template from scratch, 101% original.
I would reallllly appreciate it if you could rate it from 1 to 10 please. And perhaps a few words along with it :)

And if you have a few suggestions or advice too :)

[essellar]

You lost me at Comic Sans. There is no way I can hide my loathing for that font -- all of the clients who had silly ideas about taking over the world from their little Mom'n'Pop operation during DotCom 1.0 insisted on it because it was "classy". I just can't take it seriously.

With most of the panels, it looks like the nav and content areas are two pieces of a larger whole. The arrangement has too big a gap for my taste, the contrast between the panels and the background is too low in my opinion, and I think the box-shadow is overdone, but the alignment makes the border-radius make sense. When the content panel expands (as it does for me with both "About" and "Softwares"), the shape of the panels doesn't make sense anymore -- they don't fit together to make a whole. The text may be reflowing differently for me than it does for you; maybe you're not seeing the panel expansion.

Oh -- "software" is a collective noun; it doesn't take an "s" at the end, ever.

I hope you take the harshness as a good sign. The site is much better than "meh", but it could be great with a few very minor changes. It's when I see signs of goodness that don't quite get carried through that I get really annoyed -- I can tolerate the truly bad, but the almost-right-but-not-quite puts me on edge.

[rajat.vaghani37]

Haha yeah i totally understand.. I was kinda afraid how it would look in other browsers and screen resolutions..
If its not a problem, could you upload a screenshot please, showing the areas of gap you are talking about?

[essellar]

Okay. This screen shot is from Google Chrome on Windows XP, full-screen on a 1920 x 1080 monitor.

Default font size in the browser is 16pt for all font styles.

It's a 50%-sized PNG. Chrome (tabs, toolbars, borders) and a lot of unused screen width have been cropped out because tey don't add anything, but the picture is the full height og the browser's viewport.



I've put a translucent white stripe over the gap I'm talking about. It's your "about" page, and you can see that the content panel is significantly taller than the navigation panel, at least on my machine/config. Again, it doesn't look intentional, which is why it's kind of irritating.

[sunveer]

7/10 Low because I didn't like the blue color. Very darkness feeling.

[rajat.vaghani37]

As for the font part, my css goes like this:
Calibri,Comic Sans MS,sans-serif;

So, since ur machine didn't have calibri, comic sans showed. And i've changed it to sans-serif as second preference now.

As for the gap, I have no clue o.O
Its showing fine in the computers ive checked out .. this is weird O.O

[essellar]

I had uninstalled Calibri for some odd reason a little while back (I was probably testing an app UI or testing the portability of a PowerPoint deck with no font specified). Putting it back makes a difference, but the "about" panel still grows too tall. ("Software" is fixed, though, if a little crowded at the bottom.) I'm still getting the gap between panels.

About Comic Sans as a fallback for Calibri -- the metrics aren't a good match. Comic Sans is wider than Calibri; it's a lot closer to Verdana as far as metrics go. Arial would probably be a safer fallback. I'll poke around in your stylesheet to see if I can figure out what that gap is all about.

[rajat.vaghani37]

Yeah, but I feel Arial is toooo common now..

Awesome if u could get the panel gap thing! :D

[essellar]

I get it... you're basing the left-side position of both #sidebar and #box on percentages. Wanna bet your screen is narrower than mine? If I resize the browser to 1024 x 768, the gap closes up nicely.

You can position those two elements either by inventing a new container for both (and who really wants extra divs) or by using an old stand-by trick we used to use before the auto value for margins was supported (it was the only reliable way to center things at one time). Here's the deal:

1) Set the "left" property of the thing you're trying to position to 50%. That will put the left edge of the thing at the center of the screen, which is not what you want at all; then

2) Use a negative margin-left measured in px to drag the thing's left edge farther to the left by the amount you need. In the case of the #sidebar, the left-margin will be more than the width of the #sidebar; #box will only need a little bit of leftward adjustment to meet the sidebar and form a complete unit.

That just leaves the content of the "about" panel to deal with. The problem I'm still seeing with the height seems to be caused entirely by unfortunate line breaks in the unordered list. I had to switch to Firefox to use the "View Generated Source" tool to see the <br> elements. The problem isn't there in Firefox, BTW. Chrome renders the text slightly larger, so there is a line break caused by text wrapping just before your <br..

[rajat.vaghani37]

I made the changes.. is it fine now? Temme asap! :P