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!

  • 9
    yay it better be less bad – bjb568 Mar 17 '15 at 21:26
  • 8
    And so begin the LESS puns. – Kurtis Beavers Mar 17 '15 at 21:41
  • 6
    @KurtisBeavers some of our users are sassy. – Jin Mar 17 '15 at 21:49
  • We need more of those. – a CVn Mar 17 '15 at 22:33
  • So when are we getting that sweet new profile page they've got over on meta.se? – Mokubai Mar 17 '15 at 23:35
  • 10
    Soon! All of this is prep work to make implementation more seamLESS. – Kurtis Beavers Mar 17 '15 at 23:40
  • 9
    Text font is too thin, so same eyestrain like on SO :( – magicandre1981 Mar 18 '15 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 Mar 18 '15 at 11:33
  • @Tetsujin most of the fonts are the same as the updated Ask Different site. – Kurtis Beavers Mar 18 '15 at 11:37
  • Have to post as answer to get the pic in... – Tetsujin Mar 18 '15 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 Mar 23 '15 at 17:14
  • 1
    @Franck I've updated my wide SE stylesheet if that's of interest to you. – grg Apr 1 '15 at 11:40
  • @grgarside, <Ctrl> <+> zoom works for me. On all browsers. – Pacerier Apr 14 '15 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 Apr 14 '15 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 Nov 6 '15 at 3:23
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.

  • 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 Mar 18 '15 at 13:21
  • 2
    @Tetsujin: Unlikely. – harrymc Mar 18 '15 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 Mar 18 '15 at 16:27
  • No 'zoom text only' option on the browser? – Tetsujin Mar 18 '15 at 16:30
  • 1
    @Tetsujin: Yes, but that's not a complete solution, and there's still less text per page. – harrymc Mar 18 '15 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 Mar 19 '15 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 Mar 20 '15 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 Mar 20 '15 at 22:07
  • yeah, I also talked about the font on the question list. The normal questions/answers are fine – magicandre1981 Mar 21 '15 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 Mar 21 '15 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 Mar 21 '15 at 12:46
  • 1
    @Vinayak: I added a small improvement for more screens. My GreaseMonkey/Scriptish script is here : pastebin.com/9eKk7y2M – harrymc Mar 21 '15 at 17:44
  • @harrymc, Why not use <Ctrl> <+> instead? – Pacerier Apr 14 '15 at 0:44
  • @Pacerier: That was my first try, but it means the lose of screen real-estate. – harrymc Apr 14 '15 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?

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.

  • I'm not seeing this in my browser. What browser are you using? – Kurtis Beavers Mar 18 '15 at 21:24
  • @KurtisBeavers: I've isolated the issue to favorite tags. – bwDraco Mar 18 '15 at 23:13
  • @KurtisBeavers: Firefox 36.0.1 on Windows 8.1. – bwDraco Mar 18 '15 at 23:19
  • @DragonLord - Reproduced on Opera 28 as well – Robotnik Mar 19 '15 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 Mar 19 '15 at 1:23
1

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:

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

  • 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 Mar 18 '15 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 Mar 18 '15 at 12:24

You must log in to answer this question.

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