Updates to the site

Question

My name is Kurtis and I'm a designer with Stack Exchange. You may have noticed some updates to the design of your site. The updates are part of a SE network-wide update to a new base css framework. The updates allow us to:

• Use .svg sprites for retina displays
• Fix layout bugs
• More easily add new features to all of our sites in the future

If you see any bugs please let us know.

Thanks!

UPDATES 02/20/2015

Thank you for your feedback. So far we've made a few adjustments based on the comments and answers below:

• Logo: We've removed the dots in the halos. That seemed to be causing the pixelation people were seeing. The simplification of gradients on the logo was intentional as we're moving to a flatter, simpler aesthetic. This is also a practical decision — It allows us to use .svg's and the file size is smaller without gradients.
• Header: We've reduced the height of the header. The question list now starts around the same place it does on Stack Overflow.
• Visited Link Color: We've dulled the color of the visited link to differentiate it more from the unvisited.

Answer 1

As Dan mentioned in the comments, the blue bar at the top is too large now. My biggest problem with it is that it pushes the questions down too far, and I can see two fewer questions than I could before. I used to be able to see six questions on the homepage on my laptop screen, now I can see only four.

Here is a comparison with StackOverflow where the header takes up significantly less screen real estate:

Answer 2

I'm also seeing the pixels in the logo. The white orbits around the globe are quite jagged. Here is how it renders for me:

I'm using Firefox and it pulls the logo from http://cdn.sstatic.net/webmasters/img/sprites.png

Here is it blown up (in gimp) and you can really see the pixelation:

Interestingly the pixelation may be a feature of the image. There are white dots along the orbits. I opened up the SVG sprite in inkscape and noticed I was seeing the pixelation there too because the white dots aren't rendering well at this size. Here are the white dots moved off one of the orbits a little bit to make them more visible:

The logo didn't used to look like that at all. It didn't have the white dots around the orbits. The orbits were swooshy and seemed to glow. Here is how it used to be:

• The orbits are much simpler now
• The orbits have dots
• It has lost the gradients in the colored balls
• The background is no longer lighter around the globe
• It doesn't have the light spot on the globe like the sun is shining there

Answer 3

Okay. Here are my main observations:

I am sure this does not happen for everyone, however, I have an HP Mini and the screen width is 1024x600 which is not unusual. Here is what is happening.

It is being cut-off on the right side.

As well, I spoke about OMS (over-mouse syndrome). It seems to me that it would be better from a UX perspective if the Questions | Tags | Users | Badges | Unanswered | Ask Question Links were more in-line with the area of focus and the other related links. Here is an image of what I mean.

Also, as Dan says, perhaps we should make the Ask Question link stand out a bit more with a slightly bigger font. Dancing monkeys would not be bad either. Ok. Scratch the monkeys. Kittens!

One more thing while I am thinking of it, perhaps a link to the Help section for asking a question that is obvious marked Question Guidelines. This would help reduce off-topic questions that happens here a lot. Perhaps more than most sites.

We will resume your regularly scheduled program.

Answer 4

The new design didn't make this worse, but another long standing CSS tweak that I would love to make to this site would be tweak the visited link color.

I rely on the visited link color to show me if I recently viewed a question or not. On this site, I can barely tell which questions are recently visited and which ones I haven't seen. The difference between the visited links and the non-visited links is a very slightly different blue shade.

I have found a brown color that looks good here: #9C7816 that I would recommend as a visited link color:

.question-hyperlink:visited, .result-link a:visited {color: #9C7816 ! important;}

I use a user script to set this for myself, but it would be nice if it could be a better differentiated color for everyone.

Answer 5

Links on the main Pro Webmaster site seem harder to see now because their blue color is less bright and blends in with black text (as apposed to the brown links here on the Meta site).

Maybe a brighter blue can be used to more closely match the color of links on Stack Overflow's site, which are much more easily spotted.

Answer 6

Hyperlink colour is difficult to distinguish form the actual body content, I think some people may miss when just phrases are hyperlinked (rather that the URL posted). Looks too sublte.