# Psychedelic 90s banner-style header has got to go

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.

• 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. – Robert Cartaino Dec 7 '10 at 4:30
• @Robert, understood. – Petrus Theron Dec 7 '10 at 6:46
• 50 rep says Jin designs on a 24" Mac monitor. – Petrus Theron Dec 7 '10 at 17:16
• 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. – Jesse Dorsey Dec 8 '10 at 2:09
• I use a 12.1" laptop at 1024x768 and the banner size doesn't bother me at all. – user744 Dec 8 '10 at 10:12
• Note - we appear to have a CSS fix for this, see my answer below. Fix is from Yi Jiang's chat, via @Tetrad. – Cyclops Dec 8 '10 at 15:00
• It does look a bit like an OpenGL book cover from the 90s but I don't think it's too big at all. – Brian Ortiz Jan 2 '11 at 20:58
• 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. – Petrus Theron Jan 2 '11 at 22:57

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.

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.

• 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. – Petrus Theron 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.

• 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. – Petrus Theron 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....

• @Cyclops, see the first answer to this relating to the header on AskUbuntu. – Petrus Theron Dec 6 '10 at 14:56
• 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. – Petrus Theron Dec 6 '10 at 14:59
• 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! :) – Cyclops Dec 6 '10 at 16:50
• 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. – Michael Stum Dec 7 '10 at 7:39
• @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. – Petrus Theron Dec 7 '10 at 16:05
• It does capture the concepts of game development, however it's still a bit large and garish. – CiscoIPPhone 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.

• 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. – Petrus Theron 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 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;
}

height: 24px !important;
margin: 7px 0 0 !important;
}

.nav a {
}

margin-top: 6px !important;
}


And that looks like this:

.nav {float:left !important; }

• you're looking for display:none; – Petrus Theron Dec 7 '10 at 17:16