Role-playing Games's updated site theme is live!

Question

UPDATE - We've pushed this live for everyone now. Thanks to those who took the time to give feedback. Please do know, being live doesn't mean we can't address further changes for you! Write an answer if you find anything that needs addressing.

---

As part of implementing the new unified themes across the network, we're gradually rolling out updated site themes for each site. As of today, we have enabled your updated site theme for testing.

If you can't see it right now, that's by design! This is a very early test implementation of your design and we need your help finding issues with it before we make it live for everyone permanently. So, keep in mind, there will be things that need fixing! We'll address those things as we can.

If you'd like to review it, here's how:

How do I enable it?

Click here and check the "Beta test new themes" option. This will turn on the new theme for all sites that have one in testing, including this one. Here's more info on how to opt in. You can uncheck the box to revert to the older theme until the site is live for everyone. Note, while turning it on is immediate, it will take a few minutes to revert to the old view - but it will go through!.

What type of feedback do we need?

On this post: Bugs related to this site's design elements

Please help us look for issues/bugs related to the theme design and how we have mapped the old theme to the new. This needs to be done within the limits of the new unified theme.

This could include colors of sections of the design or text, problems with JavaScript add-ons (if applicable), the logo or top banner appearance or other artwork.

You can also feel free to ask questions about the new layout if you're unsure how to navigate it.

On Meta Stack Exchange: General concerns about left nav or theming

There are some things that are definitely changing everywhere and can't really be adjusted on a per-site basis. A few of them include:

• Top banner is shorter in height, so some artwork has to be adjusted along with some logos.
• Left Navigation is active everywhere (but can be collapsed into a menu by visiting your site preferences - instructions here).
• Responsive layout is active, which lets the site adjust as browser widths change - no side scrolling (some pages haven't been updated, yet, though). For now, if you prefer the scrolling, you can disable this by clicking the "disable responsiveness" link in the footer.
• Many site elements including tags and voting arrows are standardized across the network.
• For Serif sites only - This site uses a Serif font but common elements across the network (headers, sidebars, buttons, tags, queues, etc) are now sans everywhere.
• Link underlining is active. In an effort to make links more visible, they are now being underlined.

If you have concerns or issues regarding the left nav or the overall approach we are taking to theming, then this Meta Stack Exchange post is the right place for feedback.

As I mentioned earlier, there are some unique design elements like voting arrows and tags that are being standardized in this process. Keeping these custom elements makes our ability to maintain the sites too complex and, while we're very sad to see them go, we're in a difficult position of needing to make the site designs work together so that we can continue to address feature requests and bugs that will make your Q&A experience better. This is addressed in a Meta Stack Exchange post if you want more detail.

What new themes?

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). To follow along with the rollout of these new themes, go here.

Thanks so much for your constructive feedback!

Oh, Who am I?

If you don't know me, I'm one of the Community Managers here at Stack Exchange. I'm here to listen to your input and convey it to our Design team for responses and fixes to bugs. I'll do my best to respond to your concerns and explain whether changes we've made are bugs that can be changed or if they're by design and why.

Answer 1

bug accessibility

Poor visibility of answers being accepted in search results

Currently answers in search results break a base-level accessibility guideline:

Success Criterion 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

(This is a level A success criterion. Level A represents the lowest baseline that all sites should aim to meet.)

The only way to tell an answer is accepted is by a slight color change. It's also a very low-contrast color change so users with poor vision (or mild color blindness) are going to have trouble seeing the difference.

(The contrast algorithm employed here checks color contrast from a color blindness perspective, mainly by looking at luminosity difference. A score of 3+ is OK and a score of 4.5+ is good. It's mainly targeted at checking text color against a background. Here though it shows that from a poor color vision POV these two shades are extremely difficult to pick apart.)

A comparison to demonstrate the difficulty

Here are the search results for is:question. Which of these questions have an accepted answer? How many? How much effort does it take to determine the answers?

Below is a search for is:answer. Same quiz again: which answers are accepted answers? How many of them? How much effort does that take?

Probably this second one took a bit more time and effort and, unlike the first quiz, some careful looking and squinting.

What should change?

Questions (the first quiz) get a high-contrast inverted box to show whether they have accepted answers or not. The high contrast difference in the boxes make it easy to spot the difference, even if your vision is poor or you're color blind. Questions are good and fine.

Answers (the second quiz) are not so good.

One of the answers in this screenshot is accepted, the other is not. Accepted-ness is only indicated by that small color change in the score. Answers should instead get a clear non-color visual indicator of acceptedness: a full box if they're accepted, or an outline as Catija mentioned in comments, or something like that.

Scifi.se noticed the same issue and requested the same fix. I think it's a good one, and that this same fix should be rolled out to other sites with the new layout.

Answer 2

The transition between the main center pane and the darker header and sidebars is visually jarring, and looks like someone copy+pasted a white box on top of something else.

The old theme uses a dark-colored top bar, stylized 'watercolor' fading at the edges of the header art, and a subtle gradient in the background image of the main "questions" pane to produce a smooth, attractive look and feel for the site, where the center pane seems like a coherent part of the whole page:

The new theme, because it is missing the top bar and doesn't include the background image gradient for the center pane, looks jarringly like the center pane is out of place, or is part of a different image that has been incorrectly pasted on top of something else:

I'm not sure what exactly the correct solution is here:

• Should the center pane be darker?
• Can the center pane have a gradient, where it's darker at the top, like the old background image? I know custom background images are no longer a thing, but maybe straightforward gradients are possible?
• Would it be less jarring if the sidebars were more similar in tone to the center pane? Or maybe it would be better if they were less close, to make it look more like an intentional boundary and less like a messed-up image?
• Can some kind of "framing" be added to the center pane, like the old dark-brown top bar, to make the "this is an intentional boundary" parts of the image clearer?

I'm not a designer, so there may be another, better solution I haven't thought of here (I, personally, would endorse variants 5a and 5b from doppelgreener's answer), but as-is, the edges of the center pane are an eyesore to me.

---

Note: A new brown top bar has been added since this answer was posted. I think it's an improvement!

Answer 3

For me, 25% less space for the question list and questions themselves

I am actually one of the users who actually uses the site in a narrow window: you know, the folks for whom the old design “looked bad” and should be benefiting?

I am not.

The space devoted to the actual question and answers is now absurdly tight. It’s very uncomfortable, and detracts significantly from my user experience. And this is after turning off the useless waste-of-space that is the left navbar.

Some images, taken with my window at its usual width:

Old theme

The .summary div, where the question title and tags are found, measures 530px here.

The .post-text div, where the question text is found, measures 667px here.

Beta theme

The .summary div now measures a paltry 396px: a reduction in space of over 25%.

The .post-text div now measures 506px across: a reduction in space of also nearly 25%.

Where is the space going?

The loss, of course, comes from the fact that the page itself is shrunk to my screen, and that space is taken away from these regions of the screen. Where before I could happily leave the right navigation half off the screen, now it is required to be fully displayed on my screen. It’s 300px wide with 24px on both the left and right of it, for a total of 348px (on both pages). That is well over a third of my screen real estate, and let me tell you, none of that information is worth a third of my screen.

Which itself leads to an obvious solution: at a small enough width, the right navbar should be losing width. A fixed 348px block on the right is just seriously problematic. Losing 25% of my space over the far-less-important stuff over there does not improve my experience. It actually substantially worsens my experience, and makes me think that SE doesn’t actually understand what the priorities here are. Which has been my concern with this entire fiasco from the beginning.

Answer 4

Top bar looks weirdly blank

It just looks strange, switching from one off-white paper-y color to a different one, and from a grid with images on it to a blank space, and it’s just so large with so little in it that it looks very strange. And this is at drastically reduced widths; at larger widths it looks even weirder.

Some kind of divider between the header and this top navbar is necessary, I think. The existing brown header, of course, would be ideal, but if that’s non-viable there still really ought to be something.

Answer 5

The “Top Questions” header looks out of place

The site logo and the question titles are in serif fonts, and this is in a sans-serif font. It’s not the only thing on the page that is (the various buttons, tags, and labels are as well), but it’s the only large thing that’s in a sans-serif font. The other sans-serifs are used in smaller fonts sizes and look fine. This looks out of place, and does not go with the rest of the design.

Answer 6

status-completed

The Meta theme is sans-serif

The original Meta theme is serif, like the Main site theme. Though the beta theme for Main is serif, the beta theme for Meta is sans-serif.

Answer 7

status-planned - As of writing, this color isn't configurable per-site but most of the sites with non-white backgrounds for their content areas have the same concern. We'll be looking into making this a different color in the short term but only using color to set it apart isn't a great choice, so we'll be looking at alternate options for making these questions stand out when we start working on accessibility concerns. ~Catija

Are highlighted questions highlighted enough?

By “highlighted questions”, I mean those that are on the shaded background due to being a watched tag, as below (the Traveller question). I find the highlighting to be barely visible, and think that perhaps a couple of shades darker might be better. Alternatively, a thin dark brown border top and bottom might be OK with the present shading.

Answer 8

I did some editing in my own browser to see what some variants would look like. Crossed out ones aren't feasible under the new layout.

1. Header image flipped horizontally

2. Header image allowed to fill space

Technical implementation: in this variant the image is added as an image element instead of a background, and fills space until it touches the logo (which has flex-shrink: 0). The image winds up as 96.9px tall.

3. Header image allowed to fill space and flipped

4. Top brown bar

This is an attempt to fix the issue A_S00 pointed out. Presented without/with the header image flipped horizontally (as in variant 1).

The #content element loses the side borders and gets a new top border matching the footer color:

#content {
  border: none;
  border-top: 4px solid #5e2b1a;
}

(Things look weird and bad if we keep the side borders because of how browsers handle borders.)

4a:

4b:

5. Top brown bar with header image filling space

Combining variant 4 with variants 2 and 3.

5a:

5b:

Answer 9

Why are we wasting 2 inches of screen space with an empty left sidebar? The site is about Q&A, use the space for the content please.

Answer 10

Far too much waste of horizontal space.

Why is there a column dedicated to Home, Questions, Tags, Users, Unanswered? Why are votes, answers, views aligned horizontally? This is more than a third of the page wasted.

Answer 11

On mobile (specifically mobile Safari for me), the review queues have buttons with white text over a pale gradient, giving too little contrast and making them slow to read accurately:

(Since those pages aren’t responsive yet, they’re extra hard to read on small screen devices.)

On desktop the button is solid and darker, so it's okay:

The Meta versions are fine as the desktop version doesn't have a gradient, and on mobile the gradient is subtle and dark.

Answer 12

It's too bright and it hurts my eyes.

With no change in settings ( use this on a laptop and on a desktop; not a mobile user) the roll out is visually unappealing and too bright in comparison to the one we changed from.

At a different forum where I am a moderator, we had a recent new interface that took quite some time to deploy. It was obviously aimed at mobile users; the reaction was largely negative, with a few mobile users piping up with appreciation for how their experience was improved. (Granted, some stuff on the back end was cleaned up, but a further inadvertent result was the turning off some of our mod tools; that does not apply to my user experience here.)

This is the message you are sending: we cater to the mobile user.

If that is your intended message, I suppose that's good news for you to know that it is clear from your actions. It is also good news for a portion of your user base. If it wasn't your intended message, then you now have feedback on that score in terms of what your actions say to a user.

As with my other answer, my feedback is clear and direct: zero value added (to the user experience) with this change.
(mxy already covered my other observation, regarding wasted screen space).

Answer 13

bug

Headings are a bit closer closer to the line above than the line below. See:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas sem nec lorem ullamcorper, ut suscipit ligula rhoncus. Fusce eu orci a tellus dictum efficitur gravida vitae diam. Proin eu eros eleifend, sollicitudin metus nec, cursus nibh. Duis mattis tempus posuere.

Heading level 1

In ultrices dignissim dui eget pulvinar. Sed eu dui non lacus consequat semper. Sed congue ante pulvinar purus elementum, eget tempor neque pretium. Vivamus pharetra fermentum bibendum. Ut in posuere dui, vitae scelerisque mauris. Suspendisse eget condimentum turpis. Nunc fringilla leo et justo posuere, a lobortis lacus tempus. Integer a augue est.

Heading level 2

Integer iaculis est vitae neque efficitur, sit amet pharetra lorem aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec pharetra orci sit amet leo vestibulum, sit amet pharetra neque euismod. Donec non ipsum ut sapien sollicitudin suscipit pharetra at nisl.

Heading level 3

Vivamus ullamcorper ligula eget lacus volutpat hendrerit. Ut dignissim augue sit amet gravida eleifend. Proin ullamcorper, ex a blandit accumsan, leo nisi tincidunt augue, sollicitudin ullamcorper eros nunc sagittis lectus.

This is effectively a regression of a bug from a few years ago but with a different cause.

This time the cause is the following:

• paragraphs and headings both have a margin-bottom of 1em
• neither has a margin-top
• 1em is relative to font size
• headings have a bigger font size, therefore have a larger pixel value for 1em
• this means the gap below the heading is larger than any gap above it

One way to fix it would be to add the following to the LESS:

h1,
h2,
h3 {
  &:not(:first-child) {
    margin-top: 1em;
  }
}

This means any heading that isn't the very first line in a post (or in a quote) gets a margin added above it equal to the heading's 1em. When two margins overlap, browsers render the larger of the two, so this amounts to headings having an equal 1em gap above and below them.

Answer 14

The Role-Playing Games title image looks blurry because of the boarder, almost as if the image was badly scaled up.

Just blow up the image 300% and see.

Answer 15

We fixed something that wasn't broken. Yay?

No disrespect intended to the folks who were tasked with this change -- time and effort appreciated -- but the site worked just fine before this.

Value added? None.

Answer 16

The beta theme on mobile is a vast improvement.

Until I saw a comment by SevenSidedDie on another answer, I didn't realize the beta theme was usable on mobile, since the old mobile mode theme continued to load in my mobile browser despite opting in to the beta test.

The solution (which I haven't seen anyone mention and wish was a bit more clearly publicized) is to go to the footer on mobile and click on Full Site so that it switches to the desktop mode theme, which (if you opt in to the beta test) is actually the unified beta theme with the responsive layout.

It's a huge usability improvement for me, since I do a lot of my browsing on mobile, and the old mobile mode theme lacked a lot of features of the normal desktop theme, including the ability to flag posts and comments. It used to be that if I wanted to flag something I had to go through the hassle of switching to the desktop mode, flagging using a really really tiny link, then switching back to the mobile mode... or else I had to travel all the way from my couch/bed/kitchen to my laptop. Now that the mobile and desktop modes are unified to the same responsive theme, this really improves the experience for me.

In addition, I find the appearance and layout changes from the old desktop theme to the beta theme somewhere between "benign" and "a mild improvement." Notwithstanding a few minor annoyances that others have already posted about and which will probably be improved soon, I don't see what all the push-back is about (don't try to explain the push-back to me-- I'm capable of reading the other answers and comments). It's cleaner and, with the unification of the desktop and mobile themes, it's a usability improvement for me.

I will not be opting out of the beta test, and I look forward to the theme being officially implemented.

Answer 17

After looking at some earlier previews for other sites on Meta, I was fearing the new site theme, but it's actually very reasonable given what I understand about the parameters.

Placing the top banner in the right half of the top bar, slightly scaled and slightly cropped, looks like a reasonable compromise for now, but there are three things that show that that image was not designed for the spot:

1. Previously, the scene was framing the header text, but now there is a lot of undue emphasis on the leftmost cyberdude sitting in the middle of the top bar.
2. Trying to find a balance between making things too tiny to recognize or cropping them off means that the sleek cyber design of the middle cyberdude's gun, intended to highlight the contrast to the fantasy elements, did not make the cut.
3. The overall dark banner with a few bright highlights puts undue weight on the two-thirds mark (or so) of the otherwise very bright screen. This is not a place to highlight, because it is the content-free area (the separation between main body and right sidebar), and for questions there is even a good chunk of negative space between a question title (if it is short) and the “Ask Question” button just below the banner.

Compared with the banner just above it, the “Ask Question” button looks slightly too bright and red/saturated in my eyes. This is obviously co-dependent: In case you re-visit the banner, that may change how I perceive that button.

Answer 18

It's...pretty good!

My one specific complaint notwithstanding, I'm actually pleasantly surprised by this theme. After seeing the debacles on a couple of the other sites that previously had heavily-customized, high maintenance themes, I feared the worst, but I think this strikes a decent balance between StackExchange's need for unification, and the stuff I liked about the old theme.

I'm especially pleased that:

• The header art is still there in some form
• The "graph paper" background is still around
• The "in color" vs. "black and white" distinction between the main site and meta was kept
• Tables don't appear to have been mangled too badly (still want to check this further; that's hardly the most intensive example of a table on the site)

(I'm posting this as a separate answer from my one piece of actual criticism, so that people can vote agreement/disagreement on them separately.)

Answer 19

The blank area between the RPG logo and the old sci-fi/dragon picture bothered me (probably more than is reasonable).

I did some tweaking for comparison, and here's a quick shot of the background dragon image centered. I prefer this to the original, but note that changing your browser width will change the placement here. An absolute position could be used, but it's more than I care to fiddle with for a simple example.

This second image is the same centered tweak as the first, but I narrowed my browser window. The way the text overlaps the character is awkward, and reinforces my desire for an absolute position rather than relative.

The third image is a slightly narrower browser. This is the point at which a few odd things happen. First, the meta bar on the right gets flowed to the bottom of the page. Second, my rep count and badge counts have disappeared. Comments tell me this was a deliberate choice, so I've opted to keep it here for comparison.

Answer 20

When I viewed my profile after getting a new badge, the congratulatory message box "underlapped" the links for the tabs below (see image).

This behavior doesn't happen when I'm simply tracking a badge.

Answer 21

The new header is styled to linebreak even in the middle of words. It probably shouldn't be.

However it happened it was styled with a class, "wb-break-all", that caused this behavior.

Answer 22

I think it was noted that not all pages have been updated for responsiveness, but this one that could use work (all screenshots on mobile):

Beta Preferences

vs

Profile (email prefs looks similar)

Answer 23

The new format introduces font ambiguity of 0 (zero) vs o (lower case 'O')?
(I think it's desktop only)

Can we do something about font ambiguity of 0 (zero) vs o (lower case 'O')?

Answer 24

Extra-wide MathJax tables aren't constrained.

See this answer for an example. The width of the table extends into the right sidebar. Here's a screenshot.

Answer 25

Unresponsive scrolling

I may be the only one, but since the update I have notice many times when viewing a question that I can only scroll a little bit at a time. For instance, Flinging my scroll wheel on my mouse produces the same result as slowly scrolling it one tick. This was not previously the case and I haven't experienced this on other SE sites.

NOTE: I don't experience this behavior when viewing the question lists, only from the question pages themselves.

System: Windows 10
Browser: Internet Explorer 11

I have not noticed this happening on Google Chrome, but I rarely use Chrome when browsing this site. I will use it more often and report back.

EDIT:

I have been using Chrome exclusively since this answer (Oct. 10 - Oct. 29). I have not seen the issue at all using Chrome.

Answer 26

I'm sure things can be improved further, but I think this is definitely an improvement from the old theme. Good work. :)