Mathematics new site theme is live

Question

We rolled out the new site theme for Mathematics. It is live now.

What new theme?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background).

Your help needed

You are one of the first sites to get a new, unified theme. I previously posted the designs for theme in meta. The feedback given to that post was considered prior to rolling out the theme. Please help us look for issues/bugs and post the details (including images where needed) as an answer below.

If you have concerns or issues regarding the left nav then this Meta Stack Exchange post is the right place for feedback. If you have issues with any functionality that is unrelated to the new theme, then please post a new question.

---

As you see, the team working on this theme design is seriously studying the criticism here, and responding to it. Editing this to allow anyone so inclined to change their vote.

Answer 1

status-review

My biggest complaint is about all the wasted space. I think the text size of the headers is the biggest culprit.

When I go to the main page of math.se, there's just an egregious amount of wasted space.

A user on meta suggested one improvement here. Whether you agree with that suggestion or not, there's got to be a way to use the space more efficiently. (I also really dislike the left navigation panel with its column of wasted space below, but I'm going to disable it so I won't complain about it more than this. My dream would to instead have the buttons from the left nav placed horizontally to the right of MATHEMATICS.)

EDIT: As Aaron Shekey mentions in his comment below, some of this space will soon be used by new features, as discussed here.

When I click on one of my watched tags, I get the following page.

The page is dominated by this huge box that is almost entirely useless to me. I just clicked on one of my watched tags, so I'd like to see the new questions with that tag. Instead I get this box whose features are things that I won't use on a regular basis, and hence don't deserve this prime real estate at the top of the page. I know that I just clicked on the tag, so I don't need the enormous "Questions tagged [abstract-algebra]" reminder of that at the top. Scaling this down and moving the Ask A Question button to the line above would probably already help a lot and might allow me to see another question. I also don't need a description of the tag here: this is a tag I've clicked on hundreds if not thousands of times. (Maybe the description could be drop-down or hover-over?) I also don't think the unwatch and ignore buttons need to be so large and so prominently displayed here. If I really wanted to edit my watched and ignored tags, I'd be more likely to use the panels on the righthand side.

These boxes for tags were already a little annoying when they were changed (somewhat recently, I think?), but the new header text size and new placement of the Ask Question button have really exacerbated the issue. Here's what I'd rather see.

And just for comparison, here's what a similar tag page on another SE site still using the old layout looks like.

Answer 2

status-completed bug

Yet another problem with this is that (at least in a comment) a link is barely distinguishable from usual text.

How is anybody supposed to tell at a glance that 7 old answers is a link? THE LACK OF CONTRAST IS A SERIOUS PROBLEM.

In other words, the problem is not unlike what I complained about last time.

Did anybody actually test this in advance? I mean, somebody other than a 20-something with a graphical design degree and a 72-inch monitor. I will reach 55 in October. My eyesight is quite ok, I have an 18-inch laptop. Thankfully, in meta a link is using a distinguishable color (see three lines up). We need the same in main.

---

Update: links in answers and tag-wikis (in main) are similarly affected. Possibly the color scheme is the same, so fixing it in one place will fix it everywhere.

Answer 3

A couple of little problems:

status-completed bug

1. When you ask a question, there is an info box on the right which gives advice on how to ask a question. The text "Provide details" is a link. It is hard to tell that it is a link (due to the low contrast and lack of bolding).

Indeed, as pointed out in the comments below, this is a a more global issue—there are two links in the following screenshot other than the "edit" button.

status-completed bug

2. Displayed math now has scrollbars.

Answer 4

Let me comment with CSS style overrides I use, slightly updated for the new theme. Those style overrides also apply to first-time visitors to which the new site theme must appear like a torrent of voluminous screams under which the good stuff is buried, by now almost without trace.

Let me note that I am an old-school desktop user who does not like eternal sessions. I frequently close my browser and have it forget all session data then. As a result, I get to see the first-time visitors layout frequently, with all that "Here is how it works" stuff, GDPR consent banners, announcement banners and other useless stuff. Honestly, had the site looked like this back in the days, I would never have created an account here.

/* Remove Stackexchange's useless Logo + Link from SE's top bar */
.top-bar .-logo {
  display: none !important;
}

/* Remove Stackexchange's redundant "Here is how it works" info box */
.s-hero, .old-hero {
  display: none !important;
}

/* Remove Stackexchange's nuisance banners. */
#js-gdpr-consent-banner, #announcement-banner {
  display: none !important;
}

/* Remove Stackexchange's left sidebar. */
.js-pinned-left-sidebar {
  display: none !important;
}
/* Reclaim its space for actual content */
.container > #content {
  width: calc(100% - 16px) !important;
}

Edited: Changed the sidebar selector so that its pendant in the topbar menu remains available.

Edited: Changed the content selector to something less generic.

Here is how MSE looks to new visitors:

That's repulsive. Here is how I like it, with the style overrides:

Same for SO. To new visitors without style overrides:

Horrible. Just horrible. Here is how I prefer it, with the style overrides:

Notice how much more usable space can be gained by hiding the blurb?

Remember that Google became so popular not only because its search algorithm produced useful results, but also because its search form was free of clutter?

Answer 5

status-review bug

Here is a screenshot of the behavior I mentioned in the comment.

Note how the title of one question is completely misaligned. This happens precisely on questions with tags I have as favorite. I am using Chrome for Linux.

Answer 6

The new design is TERRIBLE. Please, delete it or put an option to rollback. PLEASE!!!

Delete as soon as possible the left navigation column.

Answer 7

status-review

1. Repeated/overlapping equations in duplicates previews (for example through review queues):

(Go to review queues, review question that has flagged duplicate, click to Close, select duplicate of...). I don't remember seeing this before the new theme (I might be wrong though, but anyway would be nice to have this fixed). This happens in Chrome 68.0.3440.106, also in IE 11.0.9600.19100. It's also worth mentioning it happens in every single case if the duplicate has mathjax in it, not just occasionally.

This is not one time occurrence, happens almost always when there is and equation.

2. Plenty of [Math Processing Error]s before and after selecting duplicate

This might be related to previous one, but symptoms are quite different, so having this separately. In previous case, there are unusually many [Math Processing Error] occurrences, before selecting and after. However before selecting it seems that it needs to have more questions in review, but still it seems quite reproducible, not a single occurrence.

Example in list of review questions:

Example after selecting question:

3. Link underline going through math expressions:

Played with CSS a little, and seems that adding display: inline-block; does the trick, but content is then a bit taller and also forces whole link to be on one line in some cases...

EDIT 09/09/2018:

I think I've managed to fix or at least localize first issue (duplicate equations), and this also seem to decrease occurrences of second issue as well (math processing errors). Turns out that typesetting is invoked indeed twice from different parts of code. First is through MathJax.Hub.Typeset(this) in stub.en.js

"mathjax": function() {
                return this.each(function() {
                    "undefined" != typeof MathJax && MathJax.Hub.Typeset(this)
                })
            },

and second one is in full.en.js through styleCode():

var t = e.find(".list-originals");
            return 0 == t.children().length ? (t.hide(), void 0) : (t.show(), h(t, !0), styleCode(), t.find(".item").click(function() {

For a test I have removed above call to styleCode() from the full.en.js, and first issue went away, second one happens much less (which makes sense since it seems to depend on number of equations to be rendered). However I do not observe any new side effects after this update, but who knows why it was there, probably it was supposed to do something :). @JoeFriend , can you check it?

Also, the math processing errors, I have looked why they appear, and it happens when processInput in mathjax.js catches exception and does return this.processError(f, a, "Input"). The exception callstack seems to lead always to an issue that at some point, PHTMLspanElement() in TeX-AMS_HTML-full.js returned null object which was then accessed (but it happens randomly, timing?). Also this happens only in review queues, it does not happen in questions/comments which have much more math to be rendered, it seems to suggest that something on that review queue is not yet prepared and the math is already trying to be rendered there...

Answer 8

I'm visually impaired and have huge problems with the new design.

I use the "Zoom only text" and a larger font under "Options" in Firefox. That worked great with the previous design. However, because of the bars (left and right) it's now hard to navigate the site and follow threads.

Two pictures:

Hard to compose questions because of the tight space:

Hard to navigate and read the questions/answers:

Answer 9

status-bydesign As mentioned in the comment, the left nav is still availble under the hamburger menu in the top left.

I did go to left nav link and turned off left nav panel as instructed (with some difficulty). But now I can't navigate at all - my work flow is to go back to the question list after looking at a question. The back button isn't always the best way to do that.

I will go to left nav link and post this there too, But I need to vent in several places.

Answer 10

When I use a zoom > 100, say 125% , the subscripts and the low parts of the equations are masked by the scroll-bar, for example :

I read somewhere that zoom > 100% is not supported. Of course, this explains why the malfunction occurs. Never mind. Nevertheless this is a shame because the people with poor eyesight have trouble reading the equations especially the small characters.

Can we expect this will be fixed ?

Answer 11

The font for posts on main is a serif font, while the one on meta is sans-serif.

I'd prefer the same font on both main and meta (either font is fine with me).

[I hope that's not a dupe, but I did not find it.]

Answer 12

tl;dr As a mathematician, I'm not all that experienced with CSS. However, after spending 5 minutes adjusting the page layout, I feel I got something far simpler and yet far superior. See below for a visual, with changes including

1. removing the seemingly redundant "Top Questions" text
2. removing line break for "active/hot/week/month" tabs
3. removing the right and left sidebars

The left sidebar is universally hated and needs to either go or be redesigned for that reason alone. The right sidebar is filled with a lot of stuff users of the site don't often need - the newsletter notifications and "ignored tags" seem like they belong in user profile or as inbox notifications, and the "watched tags" could be put either in user profiles or as a compact drop-down menu.

You might now be asking: where do we put Teams, Hot Network Questions, Blogs/"Featured on Meta", and personalized question lists?

• Teams is not something I had heard of until this UI controversy started. Perhaps put Teams in the top-left hamburger menu. Perhaps make them a parallel site like the meta pages are. I get Teams is important for revenue, but implement this in a way that won't impact those not using the feature.
• Personalized questions lists, in my opinion, ought to belong in user profiles. Not only does this allow other users to easily see your list when they view your profile (if desired, there could be an option to hide your list from other viewers) but it also makes more pragmatic sense to me - a big focus of a Q/A site should be on reading, asking, and answering incoming questions and not merely going through beloved questions and answers. I agree that it would be nice to more easily maintain a list of great questions and answers than we currently can (via biography in user profile, list of favorited questions, or saving a list elsewhere) but shoving this into an already strongly criticized left sidebar does not seem ideal.

• Blogs/"Featured on Meta" are good for easy visibility between SE devs and users, which I think is important; as such, while I recommend greatly shrinking the box and pushing some of the contents to users' inboxes, I don't necessarily think the box needs to be entirely removed. As a suggestion, perhaps shrink it and put it on the same line as the "Mathematics Logo" but floated to the right.

• Hot Network Questions is the most regrettable loss in my opinion. Some users may mostly use a single SE Site, but I personally find the HNQ list quite appealing, as it generally has good questions/answers on topics I wouldn't encounter were it not for HNQ. Moreover, the HNQ give smaller sites the chance to gain visibility and fresh users, benefiting all parties.

Perhaps a smaller right sidebar could be retained to accommodate HNQ? An alternative would be to progressively load batches of 10-20 questions - put the HNQ at the bottom of the batch, and once a user scrolls past the HNQ, load a new batch and push the HNQ to the bottom of that batch. A third alternative is to use the current system of having a fixed number of questions per page, and put the HNQ at the bottom. A fourth alternative would be to follow the mobile app model and put HNQ somewhere else, e.g. as an option in the top-left hamburger menu. Each of these has pros and cons, but I am sure something reasonable could be arranged.

It should be noted that by removing the text "Top Questions", the header is at least as responsive, if not more; by pushing the "Ask Question" button to a separate line on small screens we can handle smaller widths than the new header design.

A final complaint I can think of is where I propose putting future site features if the sidebars are removed. To answer this, simply look at my proposed change below. There's plenty of whitespace remaining near the top of the page. If for some reason that doesn't suffice, one could add more dropdowns, toggleable sidebars, etc.

With all this said, you may try to convince me otherwise but I simply feel that this:

Is vastly superior to this:

Answer 13

I normally use the site in Firefox on smartphone with "request desktop site" feature of the browser.

The right side-bar which includes meta links, watched/ignored tags and hot network questions no longer appears on right side but is put after list of questions. Very annoying.

I guess this is primarily because of responsive design and I am not sure if something can be done to fix it.

On the plus side I love writing in the edit box (like this answer) while holding my phone in portrait mode (as the responsive design resizes the edit box properly).

Update: I finally did some experiment on desktop and found that if one reduces the widow width beyond a certain point then the right sidebar goes to the bottom. Reducing further width of window moves the left side also to a menu button on top left (in the black bar). So this is their responsive design in action.

The same behavior can be seen if one starts increasing font size (ctrl+) gradually. This is exactly what happens on a smartphone as you have large fonts on 5.5 inch 1080p display. Similar behavior should be seen by default on tab (iPad) in portrait mode although I have not checked it.

I think the way they move the left sidebar automatically into a menu button, there should be a way to move the content in the right sidebar into some menu button at the top.

Answer 14

status-completed

I don't see this here yet, but bug: in the Safari browser on a Mac, math that is larger than a normal text line seems to be cut off. See the integral signs in the top line here: and more seriously the \lfloor nx \rfloor at the bottom here:

Previously, the ambiguity was relieved by the bug allowing me to scroll the display math :) Now I have to right click and inspect the TeX commands.

My setup- Macbook Pro 2016 15 inch, macOS High Sierra 10.13.6, using the Safari browser. Note, the problem does not present itself in Google Chrome. Also the math is not cut off here in math.meta. Test code- $$\begin{array}{ccc}\mathbb R&\longrightarrow&R\\x&\mapsto&\left[\begin{array}{ccc}\mathbb{Z}&\longrightarrow&\mathbb Z\\n&\mapsto&\lfloor nx\rfloor\end{array}\right].\end{array}$$

Answer 15

There's always been a very slight discrepancy between the line breaks in the preview and in the posted version; every once in a while, one more letter would fit in in the posted version than did in the preview.

This discrepancy has become much more significant with the new theme. The line breaks are in completely different places now, and planning them using the preview has become impossible. This means that longer bits of math that don't allow line breaks can cause severely truncated lines, because you can't rewrite the text to prevent them from occurring at a line break.

This more severe discrepancy occurs only in the preview when the answer is first posted. When a posted answer is edited, the edit preview seems to correspond well with the posted version. If I remember correctly, in the old theme the milder discrepancy on the order of single letters occurred in both previews.

The discrepancy seems to be due to a significant difference in width that occurs because the posted version and the edit preview have the vote count next to them and the original preview doesn't.

Here are screenshots for this answer where I wrote the text such that a long link was all in one line in the original preview, and it's broken in half in the posted version:

Original preview:

Posted version and edit preview:

The screenshots were made in Firefox 61.0.2 under Mac OS 10.13.6 (17G65); the appearance is the same in Safari 11.1.2 (13605.3.8).

Answer 16

status-completed

MathJax Zoom doesn't work properly

I'm pretty sure that this is at least partially related to the new theme. In the MathJax context menu (right-click some MathJax) you can enable a zoom feature (MathJax Settings → Zoom Trigger). It appears that currently the zoom box is limited to the size of the MathJax area for displayed (block) math, and it wasn't before the design change. (Oddly, it seems to work properly for inline math.)

Here is a screenshot of an attempted zoom on math.se:

and here is a zoom of the same Markup from physics.se's "sandbox":

Both math.se and physics.se use MathJax v.2.7.4, so I don't think this is a MathJax problem. Physics.se is still using the old theme, which leads me to believe it is a problem with the implementation of the new theme.

(I am using Google Chrome v.68.0.3440.106 under Windows 10.)

---

Here is a snippet of the Markup for your own testing.

Given $\left\{ a_{n}\::\:n=1,\:2,\:3,\:\cdots\right\} $ is an infinite sequence in $\mathbb{R}$, and every term is positive. How to prove that the set

\begin{equation} \left\{ \frac{2+a_{n}}{\sqrt{2+a_{n}^{2}}}\::\:n=1,\:2,\:3,\:\cdots\right\} \end{equation} has a limit point?

Bolzano-Weierstrass theorem says that every bounded infinite subset of $\mathbb{R}$ has a limit point. But how to prove

Answer 17

Please, center the "Mathematics" site title again. It has only whitespace to its side anyway, and glued to the left side it IMHO looks ugly.

Alternatively, find something useful to put on the right to it. For example, the "Top Questions" page title and the "Ask Question" button would nicely fit there. That would also reduce the amount of wasted space at the top.

But even in that case, the full line (consisting of site title, page title and ask button) should be centered, not glued to the left side.

Answer 18

New version of MSE makes writing/editing questions very much difficult, i.e. when zooming the page topics to select (Home, Questions, Tags, ...) in the left hand side intrude the text :

Answer 19

I have been looking at the design for a few days now, and it's (IMHO etc. etc.) eye-blisteringly ugly and dysfunctional. Even after hiding the primary culprit "I'm glorified as being super-useful but aren't" left sidebar something left me dearly wishing for improvement.

And now two more points stood out to me clear enough to pin-point:

1. the horrible mixture of serif and sans-serif and different font sizes
2. the white-washed look where all the letters seem floating around on the page in their sea of whitespace, making everything quite unpleasant to read

Two pictures for reference

---

As to the fonts used: From top to bottom on the homepage, we see, all in different font sizes:

• "StackExchange", sans serif
• "Mathematics", serif
• "Top Questions", sans serif
• "Ask question", sans serif
• "Interesting", sans serif
• Question title, serif
• Tags, sans serif
• "votes", "answers", "views", sans serif

Honestly, it just looks like a last-second realisation that TeX + sans serif is ugly (as mentioned on Meta.SE ages ago), and hastily applying a serif font to body text without regard to overall look and feel. For example note how the "related" and "linked" question titles on a question page are rendered in sans serif.

---

As for the second issue (of the whitespace), what I find to be most problematic is that the question titles on the homepage stand out far too little! I'm continuously drawn to reading views, tags, featured meta posts, and it is nigh impossible to focus simply on a title. Or indeed on any text at all, due to the walls of white everywhere around. Perhaps just scaling the title font size up would already help.

Answer 20

Can we do something about the color of the tags? The blue(?) color makes the whole site appear depressing, like a Picasso from his "blue period".

And it could just be my visual taste, but it seems very clunky what with the warmer greenish(?) hues of the featured sidebar and the highlighted questions.

Answer 21

The web page is a bit crowded. I'd like it to be more clean and focus more on the question content.

The sidebar in the first figure is not used frequently, leaving it blank looks more relaxed. The "Hot Network Questions"(the second figure) is unnecessary, I think people on one site are less interested in the content on the other unrelated site, and without it we can pay more attention to the question itself on current page.

I really like the stackexchange sites, and hope it can grow better!

Answer 22

The use of areas to the left and right of the main area, for the Home, Questions, Tags... buttons, is very annoying. Even my home screen (not too big) I could hope to expand my window from left to right to get sufficient space in the middle -- but when I do that, the dead space to the left and right expands, while the useful center area containing the questions and answers and edit box stay the saem (reduced) size. If I had the option I would definitely go back to the old look, unless the new look gave some way to adjust the allocation of screen space.

The change of fonts seems to be following the trend of evening out the advantage that a large high-resolution screen has over a cell phone. The fonts previously used are superior (on the large screen) to the new ones, but that is not a big enough effect to be harmful IMHO.

Answer 23

status-norepro

The Ask Question button’s text blends in with the background (unreadable), if it is a visited link:

Main:

Meta:

Answer 24

status-bydesign The current mobile theme is unchanged and as such there is no left nav.

Show / Hide Left Nav Inaccessible

As shown on the screen shot, it's impossible to show or hide the left-nav on mobile because the hamburger's off the left hand edge of the page. Occurs on both Chrome and Firefox, on HTC One M8.

Answer 25

The smaller print and smaller writing space caused by the nearly useless left hand colume has made it harder to use MSE. Accordingly I've limited my participation in MSE. In other words, the new MSE is a deterioration in the quality of the site.

Answer 26

When I edit this answer, the edit preview has the same line breaks as the posted answer. If I click "Save Edits", a line break is introduced before the final $k$. If I then reload the page, it returns to the original form without the additional line break. (This also happened when I actually edited the answer, so it's not restricted to the case where nothing is changed; that's just a convenient way to reproduce it.)

Screenshots from Firefox 62.0 under Mac OS 10.13.6 (17G65):

Normal view:

View directly after "Save Edits":

(While this is slightly similar to this other problem I reported, I doubt that the cause is identical, so I'm posting it as a seperate answer so that it can be tracked separately.)

Update:

This just happened again here.

Update:

Another case just occurred here. In the penultimate paragraph, the inline equation $w(3;0,2,6)=2$ is at the end of the second line in normal display, but is pushed to the next line right after an empty "Save Edits". This example is interesting because there's ample space on the second line, so this isn't just a matter of the width being off by one or two pixels, but rather seems to be a more systematic bug.

Update:

Another case of this occurs here in the last paragraph.

Answer 27

Many users want to remove the left bar. But then it seems that a button for the questions is missing. But the link to the question can be found at the top bar. See the screenshot.

I was very upset when I noticed that the question button wasn´t available anymore after removing the left bar. It was very time consuming to get to the question site. And I think there are some (many?) users who have the problem, therefore I wanted to tell how I dealt with that problem. I hope it helps some users.

Answer 28

I propose a new header for the site. Perhaps something that differentiates it from others, like what happened to Stack Overflow.

Here's a version of Math SE's header if it were to look like Stack Overflow's:

If we get dark mode:

More info here.