13
$\begingroup$

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.

Before we get into it, though, I want to thank you all for being so constructively vocal about what you wanted to keep in your theme, so we've put in a lot of work to make that happen for you. I'm really excited about how this design looks and I hope you love it. We have kept - and even enlarged - Slartibotfast and Pandora in your sidebar (you may have to turn on your left navigation or widen your browser width to see them if you have it disabled already).

Sadly, the alien version of Slartibotfast here on Meta has fallen victim to a change in designers, and we don't have the high-quality version of the artwork. There's a chance we may be able to recover it but, as it is, we hope you're OK with having Slartibotfast as the site's mascot on both main and meta.

So, if you're ready to see what it looks like and 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. 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.

$\endgroup$
2
  • 7
    $\begingroup$ FWIW, I'm probably old-fashioned in this regard, but I like the fact that links are underlined. It makes it far more obvious that they are actually links and not just blobs of oddly-colored text. This is especially important IMO for magic links in comments. $\endgroup$
    – user
    Commented Oct 2, 2018 at 15:05
  • $\begingroup$ If I can't reach everything without scrolling down, then you already lost me :( $\endgroup$
    – Mephistopheles
    Commented Oct 2, 2018 at 18:10

9 Answers 9

Reset to default
22
$\begingroup$

It's a small thing, but could we have the stars back in the footer? To me that helped convey that our unfinished world was out there in space somewhere.

Old footer:

screenshot

New footer:

screenshot

Thank you for saving our robot!

$\endgroup$
3
  • 4
    $\begingroup$ I'll ask about this. :) We've released the design to everyone now but that doesn't mean changes can't still happen. $\endgroup$
    – Catija
    Commented Oct 5, 2018 at 21:33
  • 1
    $\begingroup$ Thanks @Catija! $\endgroup$
    – Monica Cellio
    Commented Oct 5, 2018 at 21:45
  • $\begingroup$ Add the stars back already! $\endgroup$
    – minseong
    Commented Mar 8, 2021 at 11:45
13
$\begingroup$

First off, I too think it's great that we got to keep the robot. It really helps in giving the site a unique look.

- They're fixed in position on the page. We need the image to go away before the footer comes up as they would interfere with the footer text. I actually think it's a pretty nice solution, so I hope that knowing it's intentional will help:

Slartibotfast and Pandora disappearing behind footer - with footer links

~Catija

That said, it seems that the float is broken. On Firefox 62.0.2 (latest as of right now) on Windows 10, it looks fine until one scrolls far enough that the background starts to change, but beyond that point, here's how it looks as one scrolls progressively farther down:

enter image description here

That looks fine...

enter image description here

Uh oh, what's happening to their feet?

enter image description here

Is this quicksand?

enter image description here

Oh my god, they are drowning!

enter image description here

The poor things, they fell through the edge of the world!

And yes, just in case it matters, I have turned off the left sidebar.

$\endgroup$
10
  • $\begingroup$ It happens with the sidebar turned on too $\endgroup$
    – LinkBerest Left - SO is AI Now
    Commented Oct 2, 2018 at 11:46
  • $\begingroup$ Also, confirmed on Google Chrome (Win 10) V. 69.0.3497.100 $\endgroup$
    – LinkBerest Left - SO is AI Now
    Commented Oct 2, 2018 at 12:31
  • $\begingroup$ they probably just have the z-index on Slartibotfast set lower than the z-index of the cliff graphic. It would be a pretty simple fix. $\endgroup$
    – AndyD273
    Commented Oct 2, 2018 at 12:57
  • 1
    $\begingroup$ Edit: actually, it looks like the robot is part of the background of the body, and the cliff is the background image of the footer, and the footer is set to float on top of the body. They'd have to put it in it's own block container to fix it... $\endgroup$
    – AndyD273
    Commented Oct 2, 2018 at 13:06
  • 1
    $\begingroup$ It's intentional. :) If we didn't hide them behind the footer, they'd be in the way of the footer links. They have to go behind. $\endgroup$
    – Catija
    Commented Oct 2, 2018 at 14:39
  • 3
    $\begingroup$ @Catija I do think it breaks the visual of the footer as is. It is supposed to be the edge of the world being built, but when they just sink into the edge it kind of looks awkward. Unfortunately, I have no good solution to propose, but maybe someone else can come up with something. Maybe making them stop right above the edge and keep standing on it, but that is probably a rather big change since they are just locked to the bottom left corner as you stated. $\endgroup$
    – ArtificialSoul
    Commented Oct 2, 2018 at 14:58
  • 4
    $\begingroup$ @Catija More or less what ArtificialSoul said... it would be nice if, once reaching the bottom of the page, they could scroll up with the edge of the world (effectively standing on the ground). That said, I prefer having them sink into quicksand approaching the bottom of the page, over not having them at all! Maybe we can rationalize this as the physical properties of the world being poorly defined near the edge of the world, or something similarly handwavy... $\endgroup$
    – user
    Commented Oct 2, 2018 at 15:01
  • $\begingroup$ @Catija If what Michael said above is not possible, what if they scrolled with the page a little slower than the rest of it, so by the time you got to the bottom they would be far enough ahead that you couldn't see them anymore? $\endgroup$
    – John Locke
    Commented Oct 7, 2018 at 19:24
  • 2
    $\begingroup$ What @MichaelKjörling suggested would be quite easy to do with CSS sticky positioning if the robot was a separate floating HTML element. Currently, however, it seems to be implemented as just a fixed-position background image on the <body> element, and there's currently no support in CSS for sticky positioning of background images. $\endgroup$
    – Ilmari Karonen
    Commented Oct 13, 2018 at 12:14
  • 2
    $\begingroup$ Actually, I was wrong: there is a way to fix this using pure CSS. Pseudo-elements FTW! :) $\endgroup$
    – Ilmari Karonen
    Commented Oct 14, 2018 at 12:52
7
$\begingroup$

I am not a fan of the new theme or changes to the network in general, for many and various reasons which I have already put out there on main, but I do have to say:

I'm am so glad you saved our robot

save the robot

I will note: he does disappear when changing the screen size and actually the whole left bar disappears to the bottom of my screen - which I do a lot when working on data projects. Example (no left or right bar and the hot meta questions are at the bottom):

smaller screen

I don't know if this is by design, but it makes it really hard to use the site. And fyi, it is worse with the left nav enabled (there is no space for anything) but at least their back:

smaller with left nav on

Again, I don't know if this is by design (because at some point there is only so much room) but adding a more responsive/mobile option for the left menu when resized could help with site usability - i.e. drop it down to the hamburger form when the size of the screen goes below X.

$\endgroup$
3
  • 1
    $\begingroup$ You mean right bar, right? :) that's by design but it's still not how we want it. It's a planned future point to address. $\endgroup$
    – Catija
    Commented Oct 1, 2018 at 23:14
  • $\begingroup$ Fair enough, I'm still going to try and work up a mock-up of what I am talking about later today so that if SE comes back to this at least it would be there as a suggestion. $\endgroup$
    – LinkBerest Left - SO is AI Now
    Commented Oct 2, 2018 at 12:02
  • 2
    $\begingroup$ Look at your screenshots of the hot meta questions. You can still see Slartibotfast behind the background, lurking there just waiting until you lose your guard... $\endgroup$
    – John Locke
    Commented Oct 7, 2018 at 2:24
7
$\begingroup$

I can live with this. Thanks for letting us keep Slartibotfast! I have only one request: when my browser is set for full-screen, the navigation column jumps to the right of Slartibotfast, consuming valuable Q&A space. When I take the browser out of full-screen, the two columns (nav & Slartibotfast) line up into a single column.

This seems backward since it's unlikely SE will ever have so many navigation options that they might collide with Slartibotfast. On the other hand, making the window smaller will eventually force the collision. (Granted, that's contrary to the desire to have more Q&A space in smaller browser windows.)

To make a long story short. My recommendation is to never split the two columns at all. There's never a reason to do it in full-screen mode, and I'd rather have the space back for Q&A.

enter image description here

$\endgroup$
13
  • 1
    $\begingroup$ I'm not quite sure what you mean by "splitting the two columns" or "jumping". Slartibotfast is locked to the lower left corner, so as you increase the width of the page, he sticks in that corner. It's a gradual move, not a jump. It's worth noting that the left sidebar will soon have a lot more content. Things like custom questions lists will be added to the left sidebar once they're out of testing (see Phase III). Users who use these a lot may have lots of stuff in that column. $\endgroup$
    – Catija
    Commented Oct 2, 2018 at 1:44
  • 1
    $\begingroup$ Also, if you're saying that the center section should get wider, that's a network-wide setting. We have a max width for the center section rather than letting it expand indefinitely. $\endgroup$
    – Catija
    Commented Oct 2, 2018 at 1:46
  • $\begingroup$ Hmmmm the site is almost too busy as it is. Adding more than an item or two of left-column content would be detrimental. But, nonetheless, see the images. Full-screen the navigation column jumps to the right of Slartibotfast (left half of image). It doesn't when I set the window non-full-screen (right half of image). It shouldn't at all (but... if the center column width is fixed then this is a non-issue). $\endgroup$
    – JBH
    Commented Oct 2, 2018 at 1:48
  • $\begingroup$ It's not "jumping", though. It's just stuck in that position. If you change your browser width slowly by dragging it to full-width, you will see that it's just a gradual change. $\endgroup$
    – Catija
    Commented Oct 2, 2018 at 1:52
  • $\begingroup$ I just tested this on my laptop. This appears to not be an issue with full-screen/windowed modes. It must be a size-of-the-browser-window thing. On my laptop, I only ever see a single column (right half of my image). My desktop has a 1920x1920 monitor. Full-screen is a lot-o-pixels. But, it still doesn't makes sense that it does it (other than the center column is a fixed width, forcing the left column to widen). $\endgroup$
    – JBH
    Commented Oct 2, 2018 at 1:52
  • $\begingroup$ Ah, please don't focus too much on my use of the word "jumping." It's the existence if the wider column that's annoying - not how it came to be. $\endgroup$
    – JBH
    Commented Oct 2, 2018 at 1:53
  • 1
    $\begingroup$ I kinda need to focus on it so that I can make sure I'm understanding your concerns as best I can. If you're really saying "I don't like that the image is locked to the left edge of the page" (which is by design but maybe could be changed if others agreed) that's different than "The image jumps back and forth when I change my page width" (this would be a bug that I can't reproduce) or if you're saying "the page gutters should stay the same width and let the center section open indefinitely" (which would be by design because there's a max width and won't be changed as it is network-wide). $\endgroup$
    – Catija
    Commented Oct 2, 2018 at 1:56
  • $\begingroup$ It appears what I'm asking is that the center column be the column that changes width with the browser window width. Since that's locked, my request is meaningless. Just to make a point: letting the navigation column width float rather than the primary data column where all the text will be found is poor design. I'd hate to see this on a 4000px screen where 50% of the SE presence it taken up by the navigation column. $\endgroup$
    – JBH
    Commented Oct 2, 2018 at 2:07
  • 1
    $\begingroup$ There are a lot of different design styles. Many sites, including SE, follow the design principle that text should be constrained to a max column width for readability. For example: baymard.com/blog/line-length-readability or ux.stackexchange.com/questions/108801/… We allow the page to be responsive for smaller page sizes - narrower browser widths or tablet/mobile design. Yes, this means we end up with lots of whitespace/gutters but we are following a design style that we think increases readability and reduces strain. $\endgroup$
    – Catija
    Commented Oct 2, 2018 at 2:45
  • $\begingroup$ You asked for opinions... $\endgroup$
    – JBH
    Commented Oct 2, 2018 at 2:50
  • 1
    $\begingroup$ This answer almost sounds like you think the middle (Q&A) section could actually be wider if the bot wasn't there (or was in the same column as the navigation). If that's really the case, let me assure you that's never ever going to happen and not actually how this responsive design works. $\endgroup$
    – Christian Rau
    Commented Oct 2, 2018 at 12:57
  • 1
    $\begingroup$ @Catija What if the scrolling of the robot image is not smooth? I'm on Edge on Win 10 and it looks like the floating image starts to scroll with the page but then snaps back into it's proper y-position...several times per second, making for a very stuttery scrolling. Not sure if that's something you can fix. $\endgroup$
    – Troyen
    Commented Oct 8, 2018 at 23:43
  • $\begingroup$ @ChristianRau, I don't think that at all. I think the extra navigation column width when the browser window is greater than SE's ideal window size is a waste of space, especially when the Q&A middle column is what everyone is actually here to see. It has nothing to do with the robot at all. $\endgroup$
    – JBH
    Commented Oct 9, 2018 at 4:23
5
$\begingroup$

There is a way to keep the robot from sinking in quicksand!

Doing it requires two steps:

  1. Remove the current robot background from the body tag.
  2. Add the following code to the site CSS instead:
body:not(#specificity-hack) > .container:before {
    content: "";
    display: block;
    width: 100%;
    margin-left: -100%;
    height: 347px;
    align-self: flex-end;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url("img/site-background-figures.png");  /* URL of the robot image */
    background-size: 187px;
    background-position: top left;
    background-repeat: no-repeat;
}

What this does is create a virtual "pseudo-element" inside the main content container. That pseudo-element has no content other than its background image and, thanks to the negative margin, occupies no actual space on the page. Normally, the margin and the align-self property would cause it to be drawn at the bottom left corner of the main container (i.e. just above the footer), but the position: sticky and bottom: 0 properties cause it to be pushed up to the bottom of the visible screen area instead, as long as that position remains within the main container. Thus, in effect, the robot image will remain fixed on the screen until the user scrolls down far enough for the footer to become visible, at which point it will start scrolling up with the page and stay above the footer.

The cool thing is that all this can in fact be done using nothing but CSS. I have tested this solution on Chrome, but AFAICT it should work on all modern browsers. Translating it to Less and tidying up the other conflicting styles so that the :not(#specificity-hack) isn't needed are left as exercises for SE staff. :)

$\endgroup$
0
$\begingroup$

Is it by design that the help menus are only setup for desktop? It is hard to read with the large desktop-sized bar at the top.

a help menu

Why are certain items on profiles, like the flaged posts menu, also desktop-only? On mobile, you can't see the helpful flags count, you have to switch over to the desktop version.

$\endgroup$
4
  • $\begingroup$ It's unclear to me what you're talking about. I'm not sure what in that image relates to what you're saying. There's several pages that haven't been reformatted for responsive design yet, including profile pages and most moderation related pages. They're still accessible but they may require zooming or side scrolling. $\endgroup$
    – Catija
    Commented Oct 7, 2018 at 21:26
  • $\begingroup$ @Catija It was just to show that the help menu does not have a mobile layout, it always shows in the desktop mode $\endgroup$
    – John Locke
    Commented Oct 7, 2018 at 23:03
  • $\begingroup$ I'm still confused - what mobile layout? The blue mobile skin isn't part of responsive design and will likely be phased out once the redesign is complete but nothing about it has changed in relation to this post. $\endgroup$
    – Catija
    Commented Oct 7, 2018 at 23:36
  • $\begingroup$ @Catija Ok, I thought it was related to the recent theme change $\endgroup$
    – John Locke
    Commented Oct 7, 2018 at 23:56
0
$\begingroup$

: Active, oldest, and votes tabs for sorting answers are too pale, as can just barely be seen in this picture:

They should be the same color as the background, as on other sites. For example, this is what it looks like on the RPG site.

$\endgroup$
0
$\begingroup$

Bug:

The side image with Pandora and Slartibotfast starts to scroll with the page then snaps back into place. When scrolling a lot this causes rapid vibration/flickering of that background image. It is enough that I eventually got extra eye strain last night.

OS: Windows 10 Browser: Edge

This does not appear to happen in Internet Explorer.

I had created a meta question for this (here), but a comment on that directed me to post as an answer to this thread about the new theme.

$\endgroup$
1
  • $\begingroup$ That's just Edge being Edge, I think. I'm not sure how much worth there is in fixing th-- ... $\endgroup$
    – wizzwizz4
    Commented Oct 24, 2018 at 9:42
0
$\begingroup$

For over 2 years we still have this bug in macOS Safari where worldbuilding.SE (and no other site) has awful, choppy, laggy scrolling.

it runs at a very choppy pace ... Scrolling on any page feels laggy and choppy to the extent that the site becomes hard to use

choppy, laggy scrolling. It's very unpleasant to use

Worldbuilding SE running slowly/choppy scrolling?

When scrolling down or up there is a noticeable frame-rate drop. What is intended to be smooth ends up been jerky

The page background lags my laptop

We poor Safari users have all managed to "fix" the issue through inspect element and disabling the background-attachment style rule on body. Unfortunately that causes the robot to not stick to its place in the bottom-left of the screen after scrolling down.

And also, perhaps like this question and this question where the askers were using Microsoft Edge, the background flickers and jumps around sometimes while scrolling. This is especially noticeable while scrolling fast or before the page has entirely loaded all content (like images).

Maybe like edge Safari has a bug of its own that causes this behaviour. Why not float the robot as its own element instead of as a page background?

$\endgroup$

You must log in to answer this question.

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