-2

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.
  • 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.

3
  • So what makes this design "responsive"? Because when I shrink my browser window the right column just reorders itself to the bottom of the screen. If this was actually responsive it should've probably resized itself as well, not just moved.
    – Roddy of the Frozen Peas
    Commented Sep 25, 2018 at 2:38
  • Also the "responsiveness" is broken when viewed in a mobile browser. Apparently whatever is used to detect browser width doesn't detect that my browser window is about 100px wide. :-/
    – Roddy of the Frozen Peas
    Commented Sep 25, 2018 at 2:53
  • @RoddyoftheFrozenPeas The content in the right nav has a fixed size, so it can't scale. What happens to the right sidebar is still in progress right now. We're not really happy with how it behaves, either. :) Regarding your second comment, an answer with images is a lot more helpful than a general comment. As far as I'm aware, the general minimum window size sites are expected to accommodate is about 320 px, not 100. 100 px is really, really tiny.
    – Catija
    Commented Sep 25, 2018 at 15:55

8 Answers 8

Reset to default
9

To be honest, the airmail style border is a pretty big problem for me. I have vision issues that make blue colours prone to shifting and sliding about, so when I see that border, it becomes a shifty sliding moving distraction and makes me just want to close the page without interacting with the side, because it just is such a visual nightmare to try to interpret anything else happening on the page when I am trying to, effectively, get that border to sit still.

2
  • Yes, this. As far as I know, I don't have any vision impairments, but the border makes me feel I am developing some, for some reason. It is really unpleasant.
    – terdon
    Commented Sep 28, 2018 at 21:54
  • I have weird vision issues too due to MS. That border really makes it go haywire.
    – Jolenealaska
    Commented Sep 29, 2018 at 7:57
8

Holy inconsistent styling, Batman!

Just on the main page I've counted four five different styles of button!

enter image description here

  1. Ask Question -- Raised, medium-blue background color that is close to but not quite any of the colors in the header (which of course begs the question, what the heck are our site colors anymore?) White text.

  2. Active -- very pale blue. Dark blue-grey text.

  3. Month -- (also featured, hot, etc.). White. Blue-grey text of a lighter shade than active. Hovering turns it a weird pale blue that's lighter than active.

  4. Watch a tag -- Ignoring the inconsistent capitalization (Ask Questions versus Watch a tag), we've got yet another tone of blue and an icon. This is more of a pure blue than the active/month/etc buttons and hover state.

  5. Search icon -- (bonus button I missed the first time around). Bright blue, icon-only. When you hover it almost is the same shade of blue as the bounties... but not quite.

Also the bounties introduce yet another blue shade into the mix on the 'Featured' button. How many shades of off-blue do we need? :(

2
  • Whilst I agree there is a lot of inconsistent styling going on (could probably include tags in here too though the colours are customisation per theme) it's worth noting that the "Active" button is shaded differently because it is the current tab you are on.
    – TheLethalCruiser
    Commented Oct 8, 2018 at 11:33
  • It looks like a button, not a tab. If it's a tab it should look like a tab.
    – Roddy of the Frozen Peas
    Commented Oct 8, 2018 at 16:13
7

My immediate reaction is that the red/blue striped border at the bottom of the header is too out-of-place. I believe that this border is supposed to mimic the look of the edges of airmail envelopes. However, I don't think it really works in the header. You can see the border in the footer with the existing non-responsive design, but it actually works there because it exists at the bottom edge of the content area that has a white background. This immediately reminds you of the airmail envelope. But I don't think the border has the same effect in the new design. Probably because it is in the header which has a blue background and it stretches 100 percent of the width of the page. Honestly, it looks more like a candy cane to me.

I'm sorry to say that I think the best solution is to remove it.

3
  • +1 I just had to google Airmail Envelope to figure out what you were even talking about. Still looks like a candy cane to me. :(
    – Roddy of the Frozen Peas
    Commented Sep 25, 2018 at 2:33
  • We'll be addressing this - probably by removing it. Thanks!
    – Catija
    Commented Oct 2, 2018 at 21:13
  • @Catija Thanks for responding to my feedback.
    – Cave Johnson
    Commented Oct 5, 2018 at 18:26
6

I noticed that when browsing the site on Internet Explorer 11, the active vote buttons appear with the wrong color. This wrong color appears to be copied from Stack Overflow's design:

Orange active vote

This is how they should look like:

Blue active vote

5

The background image is gone :-(

In general, it looks colorless and washed-out.

It used to be easy to differentiate the different StackExchange sites; now they are all starting to look the same, with only the header being significantly different. I guess that's part of the new design, but I can't say I'm a fan.

2
  • 1
    Thanks, Mike! So, the reason the background is gone is because the left navigation text has to be black and the contrast between black and the rich blue the site design used to have is too low. That said, there's no reason we couldn't work on a similar map-based design that was a lighter color in the future. The sidebars have to be pretty clean but they don't have to be solid colors. For an example of what we've done elsewhere, see Role-playing Games. If you all have some thoughts about this, feel free to talk about it in a separate meta post and we may be able to work on a compromise!
    – Catija
    Commented Sep 28, 2018 at 14:33
  • Why does the left navigation text "have" to be black, @Catija?
    – Roddy of the Frozen Peas
    Commented Oct 8, 2018 at 16:15
4

There's not enough contrast between different kinds of text now, so it's hard to differentiate between different things.

This took me a little bit to notice because the new design is so grey/monochromatic, so bear with me while I try to explain.

The old design:

enter image description here

  • Orange text clearly differentiates links: '2 questions with new activity', and the name of the user who last touched the post. It's very obvious that these are Things to be clicked, or otherwise Things that are different than the other stuff around them.

The new design:

enter image description here

  • Links and text are now both shades of blue. The blue in the '1 question with new activity' and the name of the user with the last touch are both links, but they don't look like it. (Actually, until I took the screenshot, I couldn't tell there was any difference in the colors between the 'answered 18 mins ago' and fkraiem's name.)
    • Fun fact: if you over over the '1 question with new activity' or the user's name, you get the old orange back! We didn't lose our old colors, they're just hiding!

(Also the fact that the old tags looked like luggage tags was really cute and topical, in hindsight, and I never noticed until now.)

So what I'm trying to say is that the old design featured colors -- orange and blue -- which are diametrically opposing and high contrast. When stuck next to each other, you can clearly differentiate. Green and blue, not so much, but green was just an accent color. Blue-grey and grey? Uh, no.

(Actually parts of meta are now more colorful than the main site, which is really ... weird. We've still got the orange at least.)

2
  • 2
    This, exactly. The colors are so close together I can't tell what I've voted on half the time.
    – Joe
    Commented Sep 25, 2018 at 19:50
  • FWIW link text is something that is customisable per site theme (I believe) so this can be changed.
    – TheLethalCruiser
    Commented Oct 8, 2018 at 11:35
2

I think the striped border on the bottom of the header is a great opportunity for a bit increased recognisability, by making it sticky.

Screenshot of this Stack, simulating the striped border sticking to the top bar

That way, that tiny boarder is a clear visual reminder that one is on the Travel Stack. This (with different borders) might work for other Stacks as well, as I've lamented the loss of Stack identity before.

1
  • 3
    No! Please don't! I find that border really unpleasant to look at, it makes my eyes feel weird. Whatever you do, at least don't make it sticky!
    – terdon
    Commented Sep 28, 2018 at 17:22
0

I love it! Especially the responsive design.

You must log in to answer this question.

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