The parent Game Dev site's banner-style header reminds me of a bad 90s website with an added MySpace ad. It's distracting and wastes space. Look to the sister sites for efficient, non-distracting headers (except for gaming.stackexchange.com, of course).

It's up to you guys, but this was my first impression of the site. In my opinion, StackOverflow.com has nailed it. It's clean, space-efficient and doesn't make my eyes scream.

  • 2
    \$\begingroup\$ Just a note to readers that a down-vote in meta does not necessarily mean the author is wrong. It means simply that the voter is not in favor of the suggestion. \$\endgroup\$ Dec 7 '10 at 4:30
  • \$\begingroup\$ @Robert, understood. \$\endgroup\$ Dec 7 '10 at 6:46
  • 4
    \$\begingroup\$ 50 rep says Jin designs on a 24" Mac monitor. \$\endgroup\$ Dec 7 '10 at 17:16
  • \$\begingroup\$ I browse on a 24" Monitor, not worth the 50 rep but yeah, even on smaller screens this isn't much of a problem to me. \$\endgroup\$
    – Jesse Dorsey Mod
    Dec 8 '10 at 2:09
  • \$\begingroup\$ I use a 12.1" laptop at 1024x768 and the banner size doesn't bother me at all. \$\endgroup\$
    – user744
    Dec 8 '10 at 10:12
  • 1
    \$\begingroup\$ Note - we appear to have a CSS fix for this, see my answer below. Fix is from Yi Jiang's chat, via @Tetrad. \$\endgroup\$
    – Cyclops
    Dec 8 '10 at 15:00
  • \$\begingroup\$ It does look a bit like an OpenGL book cover from the 90s but I don't think it's too big at all. \$\endgroup\$ Jan 2 '11 at 20:58
  • \$\begingroup\$ Looking back, it's mostly the colours that bother me. It tries too hard (and succeeds) in catching my attention, instead of providing only a necessary identity before deferring to the real content: questions and answers. \$\endgroup\$ Jan 2 '11 at 22:57

short answer: the header is fine and it stays.

longer answer:

Looking through your original post and comments it seems the main complaint you have is with the colors in header graphic. While I respect your opinion, please understand that I can't make design changes every time a new user comes here and make a request based on personal preferences. (I'm assuming you are a new user to gamedev since you haven't contributed anything on the parent site).

All SE designs I create use 1024px by 768px as the lowest common denominator. this resolution and lower only account for about 5% of the traffic.

While the gamedev header is taller than SO's, IMO it's not a big deal especially compared to most popular sites out there(especially those with top ad banners).

Below is a comparison of Gamedev vs SO, your own site, Techcrunch and Mashable.

alt text

Also when designing a SE site, I have to take the type of users base into consideration. Gamedev is one of those sites I assumed users would have a higher resolution settings than the others. My assumption has been correct based on our web stats.

People do scroll, also see more data on this.

I like my screen's real estate more. I actually prefer the meta header's colour scheme over that of the parent site.

I believe you have no problem scrolling, especially your own site's header is a lot taller than any of SE sites' header. I think the word "usability" is being tossed like a jargon here. It seems clear to me it's more of a color scheme issue you have with gamedev.

  • \$\begingroup\$ thanks for taking the time to size things up. I agree that the audience here probably have a higher resolution, which the data supports. While I am not an active Gamedev contributor, I do spend a lot of time on SO. However, comparing my personal site to SE is like comparing DeviantArt to Google and saying DeviantArt needs to cut down on the graphics. It's a completely different target market and with a LOT less view per months. I respect the community's decision and I concur that the bright yellow draws the eye away from content, which to me still boils down to sub-optimal usability. \$\endgroup\$ Dec 8 '10 at 21:59

At first I did not like it at all, but I got used to it, doesn't mean I like it now though, I'm just used to it.

I agree that it is much too big. The full banner takes up more than 1/4 the screen size on my laptop when the window is maximized, and lot of times I run windows non-maximized.

alt text

  • \$\begingroup\$ That's why I always address the design issues that stand out immediately. Like with any software, once you become used to it, you can no longer identify the usability issues (until you ask Bob from Accounting to use it). Just because a user has figured it out, does not make it any more usable to begin with. I think most regulars have become "used to it" and have grown attached to the header, which serves as the site's identity. \$\endgroup\$ Dec 7 '10 at 16:11

That's not really a question - but if it were, I'd say, "no way, dude - that banner is trippin'" :)

Personally, I think it's great - captures the concepts of game development perfectly.

And several of the new SE sites have banners that are larger than SO - check out gaming or cooking, for instance. Even AskUbuntu wastes a ton of space, for a more boring design. :)

Update - just ran across the Photography site - wow... On the one hand, the ask question button is visible - on the other hand, the banner is huuge....

  • \$\begingroup\$ @Cyclops, see the first answer to this relating to the header on AskUbuntu. \$\endgroup\$ Dec 6 '10 at 14:56
  • 1
    \$\begingroup\$ That AskUbuntu header is horrible. I really like the SE beta layout (even if it intentionally looks like a mock-up). The SO, SF and SU sites are doing it right. When I have to weigh up "it captures game dev" with "usability," then usability always wins. \$\endgroup\$ Dec 6 '10 at 14:59
  • 1
    \$\begingroup\$ I'm all in favor of usability - but comparing GameDev to SO, the space difference only results in one less Question on the above-the-fold main page at GameDev. (Granted, my resolution is antique, 800x600 - higher resolutions might have more). But considering that you have to scroll down to see most of the Questions, anyway, I don't consider it a major usability issue. And okay, sure, the 'Ask Question' button is off to the right and I have to scroll to get it... Hmm, what was my point again? Oh yeah - at least the Gamedev banner is cool! :) \$\endgroup\$
    – Cyclops
    Dec 6 '10 at 16:50
  • 1
    \$\begingroup\$ Photography was chosen to be like that on purpose BTW (see the Meta.Photo Thread). It has to be that large to include the image. \$\endgroup\$
    – Michael Stum StaffMod
    Dec 7 '10 at 7:39
  • \$\begingroup\$ @Cyclops, seeing "one fewer question" is fine if you can see seven other questions. But on a small screen (or non-maximised screen) where you can only see three - taking away one is unacceptable."It works on my machine!" thinking does not a usable website make. \$\endgroup\$ Dec 7 '10 at 16:05
  • \$\begingroup\$ It does capture the concepts of game development, however it's still a bit large and garish. \$\endgroup\$ Dec 7 '10 at 20:47

I like it because it shows the Progression that Game Development is all about. Start with simple Wireframes that turn into fully built out fantasy worlds.

  • 1
    \$\begingroup\$ Me too, but I like my screen's real estate more. I actually prefer the meta header's colour scheme over that of the parent site. \$\endgroup\$ Dec 7 '10 at 7:42

Possible fix - adding custom stylesheet?

This should potentially work, unfortunately my HTML/CSS skills were not up to the task - specifically, I could not figure out which element needed to be made invisible/shrunk to get the large logo field to disappear.

If someone who is a HTML/CSS guru (for instance, the actual designer of this site) would like to fix to my code, please do so. :)

Step 1 - Add a user style sheet to your browser. This page has linked explanations of how to do that, for all major browsers.

Step 2 - Create a .CSS file. Here's one that generally compresses the height of the title bar. source

#header {
    background-position: center -2px !important;
    height: 130px !important;
    margin: -3px auto 0 !important;
    overflow: hidden !important;

#hlogo a {
    height: 62px !important;
    margin: 5px 0 0 17px !important;

#header #hmenus {
    height: 24px !important;
    margin: 7px 0 0 !important;

.nav a {
    padding: 4px 15px !important;

#portalLink {
    margin-top: 6px !important;

And that looks like this:alt text

Optionally add:

.nav {float:left !important; }

to move the "ask question" button leftwards.

  • \$\begingroup\$ you're looking for display:none; \$\endgroup\$ Dec 7 '10 at 17:16
  • \$\begingroup\$ @FreshCode, close - it hides everything, though, including the tabs. Any idea what element(s) I should be changing? \$\endgroup\$
    – Cyclops
    Dec 7 '10 at 17:30
  • \$\begingroup\$ Note - this CSS works properly for SE sites, but just discovered it totally messes up some other sites - like pvponline.com . Wups. Still researching how to apply a stylesheet to only one specific site. So for now - Caveat Emptor. \$\endgroup\$
    – Cyclops
    Dec 8 '10 at 15:57
  • \$\begingroup\$ it depends on how you use it. For example, if you use Stylish for firefox/chrome, then you can whitelist what sites it applies to. \$\endgroup\$
    – Tetrad
    Dec 8 '10 at 17:39
  • \$\begingroup\$ @Tetrad, yeah, Opera 10 has the same ability (or claims) to be able to assign a custom stylesheet to a specific site - so far I haven't gotten it to work yet. :) \$\endgroup\$
    – Cyclops
    Dec 8 '10 at 18:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .