10

As you can see, the Mathematica community site got a slight design update today. We have moved the site's CSS to a newly refactored LESS system, so it's easier for us to fix SE network CSS bugs globally going on forward. Also we've updated the graphics to SVG for retina support. Visually it should "feel" the same as the old site with slight layout adjustments.

This update should retro-actively fix most of the old CSS bugs. If you see any new ones, or old ones not being fixed, please let us know!

10
  • 1
    On most of our sites, we're using an SVG for the logo, but Mathematica is a special case because the logo is such a complex shape with so many colors, it was a large file that didn't render well in all browsers. So, instead we're using an @2x PNG. Mar 13, 2015 at 19:38
  • 6
    Sorry, I downvoted this one. I feel very uncomfortable with the new styles. My vision is just not good enough to stay in the site for more than a few minutes without my eyes starting to call you names. Mar 15, 2015 at 5:04
  • @Kurtis What does "@2x PNG" mean? On a "retina" screen should I see a high resolution logo or a standard resolution (blurry) one?
    – Szabolcs
    Mar 17, 2015 at 20:44
  • @belisarius How about after yesterday's update?
    – Szabolcs
    Mar 17, 2015 at 20:45
  • @Szabolcs you should see a high resolution logo, it's just not an SVG. Mar 17, 2015 at 20:47
  • @Kurtis I see a blurry one in all of Chrome, Safari, Firefox, on OS X 10.10.2 on a retina screen.
    – Szabolcs
    Mar 17, 2015 at 20:48
  • 1
    @Szabolcs Much, much better now. Going to remove my downvote. Thanks for asking! Mar 17, 2015 at 21:30
  • @Szabolcs ahh, I see what the problem is. A fix is on the way! Mar 17, 2015 at 21:40
  • @Kurtis Beautifully sharp now :-)
    – Szabolcs
    Mar 17, 2015 at 21:52
  • 2
    I am pleased that so many of the concerns raised have been addressed. My eyes are happier, too.
    – m_goldberg
    Mar 18, 2015 at 1:43

10 Answers 10

16

In my opinion there is not enough contrast between the Accepted and Unaccepted states:

enter image description here

It is IMHO easy to mistake the gray mark for an active Accept unless one is looking closely.

7
  • 1
    Good catch. This will be adjusted in the next production server build. Mar 13, 2015 at 20:53
  • @Kurtis Thanks. Incidentally I still think some additional contrast for viewed posts would be helpful.
    – Mr.Wizard
    Mar 13, 2015 at 21:13
  • 5
    With my vision problems, I can't see the difference at all. I can not longer tell whether a answer has been accepted or not.
    – m_goldberg
    Mar 14, 2015 at 0:59
  • 1
    @KurtisBeavers Yes, they are hard to tell apart. Please make the grey checkmark somewhat whiter, and the green one should be more have more colors (like with some red and blues ) and a small marquee (chasing lights) around the checkmark would help too.
    – QuantumDot
    Mar 15, 2015 at 22:44
  • @QuantumDot I am uncertain how to interpret that comment. Reductio ad absurdum?
    – Mr.Wizard
    Mar 16, 2015 at 5:13
  • Oh gosh-- I just realized how bombastic my suggestion was --I must have been really drunk.
    – QuantumDot
    Mar 16, 2015 at 21:11
  • @QuantumDot LOL :^)
    – Mr.Wizard
    Mar 16, 2015 at 23:06
14

The colours for code highlighting were originally chosen to mimic the defaults in Mathematica to some extent. This was very helpful e.g. in pointing out or even just noticing mistakes in code. For example, in Mathematica blue is for undefined symbols, black is for defined ones.

Now this has been changed. The current colour scheme is has hard to distinguish colours and its colours are very confusing for someone used to Mathematica's standard.

Example:

Current colour scheme:

enter image description here

Mathematica's colour scheme:

enter image description here

What should be changed at the minimum:

  • undefined symbols should be clearly blue (not black, as they are now, and not dark blue that's hard to distinguish from black)

  • defined symbols should be black (not dark blue)

  • patterns should be green (not blue again)

I noticed that having colours that matched Mathematica's standards made it easier to point out mistakes to beginners. I could say things like "Notice that BackgroundColor is blue, not black. That indicates that it is not a built-in symbol." They could see that it was blue both on the site and in Mathematica

2
  • 3
    My apologies—I was not aware that the Mathematica code highlighting formatting had been added to the site's all.less. I'm migrating the formatting from the old site to the new one. This should be fixed in the next production server build. Mar 14, 2015 at 16:09
  • 2
    @KurtisBeavers When I developed the google-prettify highlighter for Mathematica and for this site here, I tried to use colours that work with the sites style. I don't know how much you have changed the colours for the new style, but if necessary I would of course help you to adapt the highlighter colours. Mathematica uses a bit more complex highlighting than one finds in other languages.
    – halirutan Mod
    Mar 15, 2015 at 19:55
13

I suffer from a visual impairment. I find the overall low contrast of the new site design makes it much harder for me to read some things that were not a problem before. An example of what I mean is the way links are displayed. Light orange on light gray is not a high visibility combination. I can barely read the text in links now.

Low contrast layouts may be fashionable amongst graphics designers these days, but they are burden to those with vision difficulties.

2
  • We've removed antialiasing from all the fonts making them thicker for those using webkit browsers, and we've darkened the link colors on meta. Mar 16, 2015 at 17:22
  • @KurtisBeavers. Thanks, that helps a lot.
    – m_goldberg
    Mar 18, 2015 at 1:44
12

Apropos contrast, borders/lines in deleted posts are extremely hard to see:

Contrast example

There are three horizontal lines in that screenshot.

9

In the absence of a dedicated output markdown type (a feature I would yet like to see) I have been using and promoting a code type within a quote type. However in the new layout this looks poor:

enter image description here

In the old design the margins were (nearly) symmetrical and the gray code box was taller. The total quote box in the above example is excessively tall, taking up more page space than necessary.

Could the new design be adjusted with this use in mind?

3
  • 1
    Oh man, this is awesome! I hope that they don't change the quoted style and this "hijack" usage dies a painful death :P I've long been against this style of output formatting and I think this just further highlights my points in that answer :)
    – rm -rf Mod
    Mar 14, 2015 at 12:22
  • 2
    @rm-rf And I have long said we need a proper output style. This is not my ideal either you know. However I think it is the most clear of the existing options that I have seen. By the way if you ever leave Stack Exchange I am going to back edit all your highly voted answers to use this style exclusively. Now you can never leave. >:->
    – Mr.Wizard
    Mar 14, 2015 at 13:16
  • 8
    The devs at SE don't know what a "proper output style" is. It will be easier for them to implement it (or reject it) if we have a concrete set of requirements. I would suggest opening a dedicated post for this so that it can be discussed and then we make a formal request from SE (or did we already do this and I simply forgot about it?)
    – rm -rf Mod
    Mar 14, 2015 at 15:07
8

Perhaps links inside code blocks can be more clearly differentiated. Now it looks like this:

Link example

You can tell that Internal`Bag is a link if you look carefully, but the difference between regular inline code and links inside inline code could be bigger. On this site we have used links inside inline code a lot, we even have a button to generate such links to the documentation.

0
3

Visited and not visited link colours are different, but indistinguishable. This is very strange, so I suspect a bug: if they're meant to be different they should be distinguishable.

Take a look at the screenshot below. The links I marked with a blue arrow are visited and have a darker colour than the rest. Can you see the difference? I can barely see it, and only noticed this because I did some image processing on a page screenshot (don't ask) ... But if I examine the RGB values with a colour picker, it is clear that they are of different colours.

enter image description here

5
  • This is a longstanding problem. See: (117)
    – Mr.Wizard
    Mar 18, 2015 at 12:31
  • I am going to push a change that will dull the color of visited links and increase the contrast with the non-visited links. I'm not certain that this change will solve everyone's problem as links with red are tricky due due to colorblindness. We may want to evaluate the overall link color on the site and see if there's a different color that would work better. Mar 18, 2015 at 14:02
  • @KurtisBeavers It seems the visited links are a bit lighter than the non-visited ones now. I don't see it as an improvement over the slightly darker visited links. I hope it will be improved further.
    – shrx
    Apr 10, 2015 at 8:24
  • @shrx On my screen I simply wasn't able to distinguish visited from non-visited with the older style. With the current style I can easily distinguish them. Do you mean that you still cannot distinguish them on your screen or that you do not like the style aesthetically?
    – Szabolcs
    Apr 10, 2015 at 17:00
  • @Szabolcs Yes, personally I don't see a visibility improvement over the previous style. It's not worse, but it's not better either.
    – shrx
    Apr 11, 2015 at 8:15
3

This is a complement to Pickett's observation about link colours in code blocks.

Visited links are barely distinguishable from non-link text. Example:

enter image description here

2

Maybe this is just temporary, but for me, the current favicon of our meta-site looks like this:

enter image description here

Is this only me or do others see this too?

4
  • Yes, it looks like that. All others have the main site favicon converted to greyscale.
    – Szabolcs
    Mar 15, 2015 at 20:12
  • @Szabolcs Pretty weird, because even if I reload the site without caching or use porn-mode, I always see this 3D cube..
    – halirutan Mod
    Mar 15, 2015 at 20:14
  • 2
    It's a bug. This icon belongs to ExpressionEngine.SE
    – Szabolcs
    Mar 15, 2015 at 20:19
  • @Kurtis Thanks for the fix!
    – halirutan Mod
    Mar 16, 2015 at 17:36
2

To what extent does the new policy limit per-site tweaking? For example in the current layout the score boxes next to questions and answers are excessively wide:

enter image description here

(xkcd is the highest voted question on the site.)

Would it be possible to make these narrower to allow more room for the titles?

3
  • 1
    I wouldn't so much call it a policy as if we're going to be able to release new great features like the user profile that's featured on Meta Stack Exchange, it will make things a lot easier if we don't have to adjust the css on all network sites. The reason those boxes are wider than the highest voted question, is that one day a question will reach a vote over 1,000 and then it will need the extra padding. Mar 13, 2015 at 20:44
  • @Kurtis To my eye it looks like the existing width has room for 99999 -- making it slightly narrower would still allow room for 9999, a value that is unlikely to be exceeded any time soon if ever.
    – Mr.Wizard
    Mar 13, 2015 at 20:49
  • This is something that will soon change once we release the new user profile. Mar 13, 2015 at 20:57

You must log in to answer this question.

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