23

A major design update IS NOW LIVE!

Most of the changes are not visible; these tweaks go along with recent updates that were made to Stack Overflow:

  • We are moving the site's CSS to a newly refactored LESS system, so that it's easier for us to fix SE network CSS bugs globally and launch new features in the future.
  • We are updating the graphics to SVG for retina support.
  • We've fixed a LOT of obscure bugs that arose when new features were not thoroughly tested across the entire network.

Visually it should "feel" the same as the old site with slight layout adjustments.

This update should retro-actively fix most of the old design bugs. If you see any new ones, or old ones not yet fixed, please post an answer here to let us know!

17
  • 9
    yay it better be less bad
    – bjb568
    Commented Mar 17, 2015 at 21:26
  • 8
    And so begin the LESS puns.
    – Kurtis Beavers Staff
    Commented Mar 17, 2015 at 21:41
  • 6
    @KurtisBeavers some of our users are sassy.
    – Jin
    Commented Mar 17, 2015 at 21:49
  • We need more of those.
    – user
    Commented Mar 17, 2015 at 22:33
  • So when are we getting that sweet new profile page they've got over on meta.se?
    – Mokubai Mod
    Commented Mar 17, 2015 at 23:35
  • 10
    Soon! All of this is prep work to make implementation more seamLESS.
    – Kurtis Beavers Staff
    Commented Mar 17, 2015 at 23:40
  • 9
    Text font is too thin, so same eyestrain like on SO :(
    – magicandre1981
    Commented Mar 18, 2015 at 5:13
  • 1
    I'm seeing some change, but the font is not the same as the new Ask Different site, is it? I didn't like that new one for about 2 weeks, now you couldn't pay me to have the old one back. So crisp, compared to the old version.
    – Tetsujin
    Commented Mar 18, 2015 at 11:33
  • @Tetsujin most of the fonts are the same as the updated Ask Different site.
    – Kurtis Beavers Staff
    Commented Mar 18, 2015 at 11:37
  • Have to post as answer to get the pic in...
    – Tetsujin
    Commented Mar 18, 2015 at 11:43
  • 3
    So much white space... total waste of my monitor size. Do you guys realize some people still use SE with a computer?
    – Franck Dernoncourt
    Commented Mar 23, 2015 at 17:14
  • 1
    @Franck I've updated my wide SE stylesheet if that's of interest to you.
    – grg
    Commented Apr 1, 2015 at 11:40
  • @grgarside, <Ctrl> <+> zoom works for me. On all browsers.
    – Pacerier
    Commented Apr 14, 2015 at 0:44
  • @Pacerier That increases the size of elements on the page. My stylesheet keeps the content the same size, just expands the width of the container for that content, a substantially different outcome. Have a look at the screenshots in the link above.
    – grg
    Commented Apr 14, 2015 at 6:36
  • 1
    @Pacerier it was a really, really bad joke. LESS is the CSS preprocessor that we used when we converted the site: lesscss.org
    – Kurtis Beavers Staff
    Commented Nov 6, 2015 at 3:23

5 Answers 5

Reset to default
16

I join my voice to @magicandre1981 (same glasses?) :
"Text font is too thin, so same eyestrain like on SO."

I'm not referring to the text of posts or answers, but for example to the lists of posts. The black is more readable after zooming into the page (which is not really a good solution), but the blue is too faint to read without strain and even more so for posts that have been visited.

Here is an example of how fuzzy is the text for a link to an already-visited post (I am using Firefox):

image

As a general remark: All the colors seem to have been chosen too faint. The too-thin font makes colored text especially hard to read. As Mac users don't seem to complain, it's possibly a Windows-only problem.

For my fellow sufferers, I have developed a GreaseMonkey/Scriptish script, based on work by @Vinayak, for making the text more readable, found here.

14
  • 1
    This one will run & run... See what you think in 2 weeks' time. I didn't like it to start with, now I wouldn't go back.
    – Tetsujin
    Commented Mar 18, 2015 at 13:21
  • 2
    @Tetsujin: Unlikely.
    – harrymc
    Commented Mar 18, 2015 at 14:44
  • Zooming (increasing displayed text size) has improved the situation for the black text, but the blue is still too faint. However this means less text per page.
    – harrymc
    Commented Mar 18, 2015 at 16:27
  • No 'zoom text only' option on the browser?
    – Tetsujin
    Commented Mar 18, 2015 at 16:30
  • 1
    @Tetsujin: Yes, but that's not a complete solution, and there's still less text per page.
    – harrymc
    Commented Mar 18, 2015 at 16:34
  • 1
    @harrymc I'm using Stylebot to make SuperUser look easy on the eyes again. If you'd like to check it out, you can get it here: pastebin.com/mKErpBZ8. Screenshot: snag.gy/LtidR.jpg
    – Vinayak
    Commented Mar 19, 2015 at 6:40
  • Have to agree, that looks very fuzzy - but as you see on my own answer, it's not as bad on my screen, & the Ask Different is better still, using Mac's native [webkit] anti-aliasing
    – Tetsujin
    Commented Mar 20, 2015 at 21:02
  • 3
    @Tetsujin: Perhaps that's the answer - the development of this design update was done on the Mac, but the chosen fonts do not work as well on Windows.
    – harrymc
    Commented Mar 20, 2015 at 22:07
  • yeah, I also talked about the font on the question list. The normal questions/answers are fine
    – magicandre1981
    Commented Mar 21, 2015 at 6:29
  • @Vinayak: Thanks, I have used your CSS with Scriptish and the situation is now much better. The choice of too-faint colors is also not very optimal in other areas. I wonder how the developers' monitors were color-calibrated.
    – harrymc
    Commented Mar 21, 2015 at 11:51
  • @harrymc There was a problem with the old CSS where the question titles wouldn't be styled correctly on certain areas of the website. I fixed that and you can get the updated version here: pastebin.com/xxnQPfhy
    – Vinayak
    Commented Mar 21, 2015 at 12:46
  • 1
    @Vinayak: I added a small improvement for more screens. My GreaseMonkey/Scriptish script is here : pastebin.com/9eKk7y2M
    – harrymc
    Commented Mar 21, 2015 at 17:44
  • @harrymc, Why not use <Ctrl> <+> instead?
    – Pacerier
    Commented Apr 14, 2015 at 0:44
  • @Pacerier: That was my first try, but it means the lose of screen real-estate.
    – harrymc
    Commented Apr 14, 2015 at 4:46
6

Sorry, this is no answer, as the question includes no question ;)

I try to avoid anti-aliased fonts wherever possible as I second the opinion, that these "hurt eyes and damage eyesight".

The disadvantage is that a lot of web pages look ugly, because fonts are nowadays designed to be displayed anti-aliased only. Unfortunately this now also applies to SU (and the other StackExchange sites):

enter image description here

For sites I'm using on a regular basis I employ a user css to work around these font issues. For the SU site this works only partial... the reason is reveled by a look into SU's all.css:

font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important

This !important statement renders my attempts with a custom css useless.

Ironically, a gold-badge answer on SO clearly states:

Yes, !important is bad practice. !important was initially designed to help people with visual impairments overwrite the style sheets of websites.

So finally I'd like to ask why are in total 164 (as of now) !important statements used in the new style sheet? Shouldn't the StackExchange sites serve as a shining example?

1
4

When hovering over a tag, the text inside becomes unreadable because the text and background color are too similar:

Unreadable blue tag

Edit: Looks like this has been fixed.

Edit 2: The problem is isolated to favorite tags. Hovering over a favorite tag is subject to this issue; non-favorite tags are not affected.

5
  • I'm not seeing this in my browser. What browser are you using?
    – Kurtis Beavers Staff
    Commented Mar 18, 2015 at 21:24
  • @KurtisBeavers: I've isolated the issue to favorite tags.
    – bwDraco
    Commented Mar 18, 2015 at 23:13
  • @KurtisBeavers: Firefox 36.0.1 on Windows 8.1.
    – bwDraco
    Commented Mar 18, 2015 at 23:19
  • @DragonLord - Reproduced on Opera 28 as well
    – Robotnik
    Commented Mar 19, 2015 at 1:03
  • 3
    Figured out the problem (visited color was overriding the hover) and just pushed a fix. This should be resolved in the next production server build.
    – Kurtis Beavers Staff
    Commented Mar 19, 2015 at 1:23
0

[not an answer - re comments, just to post the pic]

I'm not seeing the same font in the main Questions page as on Ask Different.
Do I just have something old still cached, perhaps?
Snippet from SU & AD...

enter image description here

2
  • 3
    The two fonts are the same size, color, and font face — it's just that Ask Different is utilizing webkit's antialiasing option. This only displays on some browsers. I personally prefer the thinner type, but that's likely because I work on a retina display. For other in the community it can display very thin and faint.
    – Kurtis Beavers Staff
    Commented Mar 18, 2015 at 12:22
  • Ah, OK - I see. Thanks for the clarification. I've a couple of 2k 27's here, no retina, but now I'm used to it, I really do like the AD font [with webkit AA]
    – Tetsujin
    Commented Mar 18, 2015 at 12:24
0

When the minimum font size in Firefox 36.0.1 on OS X is at least 11, the line below the inactive tabs is broken:

You must log in to answer this question.

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