9

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!

  • 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. – Kurtis Beavers Mar 13 '15 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. – Dr. belisarius Mar 15 '15 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 '15 at 20:44
  • @belisarius How about after yesterday's update? – Szabolcs Mar 17 '15 at 20:45
  • @Szabolcs you should see a high resolution logo, it's just not an SVG. – Kurtis Beavers Mar 17 '15 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 '15 at 20:48
  • 1
    @Szabolcs Much, much better now. Going to remove my downvote. Thanks for asking! – Dr. belisarius Mar 17 '15 at 21:30
  • @Szabolcs ahh, I see what the problem is. A fix is on the way! – Kurtis Beavers Mar 17 '15 at 21:40
  • @Kurtis Beautifully sharp now :-) – Szabolcs Mar 17 '15 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 '15 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.

  • 1
    Good catch. This will be adjusted in the next production server build. – Kurtis Beavers Mar 13 '15 at 20:53
  • @Kurtis Thanks. Incidentally I still think some additional contrast for viewed posts would be helpful. – Mr.Wizard Mar 13 '15 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 '15 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 '15 at 22:44
  • @QuantumDot I am uncertain how to interpret that comment. Reductio ad absurdum? – Mr.Wizard Mar 16 '15 at 5:13
  • Oh gosh-- I just realized how bombastic my suggestion was --I must have been really drunk. – QuantumDot Mar 16 '15 at 21:11
  • @QuantumDot LOL :^) – Mr.Wizard Mar 16 '15 at 23:06
15

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

  • 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. – Kurtis Beavers Mar 14 '15 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 Mar 15 '15 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.

  • 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. – Kurtis Beavers Mar 16 '15 at 17:22
  • @KurtisBeavers. Thanks, that helps a lot. – m_goldberg Mar 18 '15 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?

  • 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 Mar 14 '15 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 '15 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 Mar 14 '15 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.

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

  • This is a longstanding problem. See: (117) – Mr.Wizard Mar 18 '15 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. – Kurtis Beavers Mar 18 '15 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 '15 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 '15 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 '15 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?

  • Yes, it looks like that. All others have the main site favicon converted to greyscale. – Szabolcs Mar 15 '15 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 Mar 15 '15 at 20:14
  • 2
    It's a bug. This icon belongs to ExpressionEngine.SE – Szabolcs Mar 15 '15 at 20:19
  • @Kurtis Thanks for the fix! – halirutan Mar 16 '15 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?

  • 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. – Kurtis Beavers Mar 13 '15 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 '15 at 20:49
  • This is something that will soon change once we release the new user profile. – Kurtis Beavers Mar 13 '15 at 20:57

You must log in to answer this question.

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