Live: Left nav, new theming and responsiveness

Question

This post is now locked due to a lot of off-topic or very tangentially related issues being posted here. It's so large that it is pretty hard to find/triage issues listed. If you have a concern related to left nav, theming and/or responsiveness, then I'd encourage you to post them as a question on MSE or on the meta of the specific site you're concerned with.

We have released left navigation bar, our new theming and a our initial responsive design work on Stack Overflow and Meta Stack Exchange (it's been live on MSO for a week). This work has been in progress and being discussed with the community for several months. The motivation for the work is covered in my post entitled Ch-ch-ch-changes: Left nav, responsive design, & themes, so check that out if you have any questions about why this work is important.

Left nav and theming

Check out the new left navigation and new theme (most relevant to MSE). This work creates greater experience consistency across the Q&A sites and will increase in the velocity of bug fixes, improvements and new features to all sites thanks to a fully unified code base.

Based on early feedback from our initial announcement we've added a preference to unpin the left nav so it doesn't take up space. Just head on down to your local preferences and check the box.

---

---

This is the biggest changes we made based on early feedback from the community. Check out the full list here: Left nav, responsive design, and theming next steps

Responsive design

Many of the most used pages on the site are now responsive to your window size. This benefits people who have lower resolution devices or like to have multiple windows in view. This functionality has been live for a few weeks for Stack Overflow for Teams users.

This is a work in progress and this step is a part of our effort to validate our significant changes to page layout code. Not all pages are responsive yet, asking a question and many moderator or review activities will not work in a smaller viewport and you'll need to expand the window. We are making improvements to this experience week by week, so it will just keep getting better.

We haven't fully optimized this for mobile devices, but click the "full site" option in the footer and you will get the responsive design on your phone. If for some reason you need access to the non-responsive version, we have a temporary feature for turning that on. Just click "Disable Responsive" option in the footer. This is a temporary feature that will go away once all the pages/features have been made responsive. The mobile optimized view will also remain in place until we finish making all the changes.

You can read more about the ins and outs in Responsive design is enabled for Teams users.

When is this coming to other sites?

After we gather feedback via this sneak peek on MSO/MSE we will be releasing this on other sites. Currently the plan is as follows:

• Mid-June:
  • ✅ release to SO and MSE
  • ✅ post update on fonts and theming: Fonts and the new Q&A theming
• July: release to network sites with "stock" theme and 5-10 other sites
• August - September: release to the remaining sites. As we have more details we will update individual communities in their local meta.

Feedback

If you encounter a bug or a usability problem feel free to post it on MSE. We are eager to make updates so that this rollout goes smoothly for all communities.

Answer 1

One thing not yet mentioned in the other answers is the inclusion of the + Create Team link.

As a user that has no intention of subscribing to the Teams feature, this is just noise.

If at some time I do decide to subscribe I would make a conscious effort to seek out the sign-up page. Having this displayed front and center on every page seems a bit desperate.

Answer 2

feature-request status-review

Can we please have the right widget collapsible? Not via a checkbox in preferences, but with a button near it (you know, splitter panel style).

I like to have 2 windows open on a FullHD monitor, snapped to half of the screen each, and the site looks bogus when you disable the left nav bar - a huge chunk of vertical space is eaten up by the right widget with hot questions and related posts. I'd like to be able to collapse it, and not rely on automatic windows width-based layout auto-adjustment logic.

---

bug Also, the profile page doesn't auto-adjust itself to fit the window at half-FullHD width. There's way too much horizontal scroll to take it seriously as it is now.

Answer 3

status-review

OK, this is just ridiculous. Can you lower the vertical space wastage? Or just remove it altogether? Nobody really needs >20% of their viewing height to be taken up by this:

You could e.g. literally cut it in half just by moving the bottom row into the middle of the top row.

Answer 4

bugstatus-completed

After checked the "Hide left navigation" option in the preferences, the Meta Stack Exchange site header container is not aligned with it's top and bottom div.

Can be the <img src add with some spacing to align with the top and bottom divs when hide the left navigation.

Current behavior:

Expected behavior:

Answer 5

status-completed

I had to disable the left nav bar on both SO and this Meta.

Does this setting really need to be on a per-site basis? Can't it be that disabling the nav bar is a global setting accross the whole network?

Answer 6

bugstatus-completed

Posting feature-request/bug from comment:

Can you please add the tabination to the about-tag-page?

On every other tag page you see this tabination:

On the about-tag-page is no tabination:

This means that you are basically trapped from the info page and unable to return to the question page unless you figure out to click on the tag itself. This is (in my opinion) kind of unintuitive

---

Oh and this behaviour is new. Picture from SO:

Answer 7

status-completed

see Left nav is now sticky

Can we have an option to make the new sidebar sticky?

Not Sticky:

VS Sticky:

Answer 8

feature-requeststatus-declined

I understand that the new design may be good and necessary for some users, but it is really annoying for me, whatever my settings, to have to either press the menu button or to scroll to the top of the page before I can press of questions, tags or users.

Could we have a preference option to get back the old top bar, please?

---

Edit:

Shift+G brings up a list of keyboard shortcuts including ones to above-mentioned places, however, new users may not know this and it is not as convenient as the top bar:

Answer 9

bug status-planned

The top icons - inbox, achievements, review, etc are overflowing. I have to side scroll to see them.

Screenshot:

This is on mobile. Samsung Galaxy Trend S-75whatever, Chrome, Android 4.2.2.

Answer 10

bug status-completed

When not logged in, the banner here on MSE has z-index issues, it hides the popup menus:

(Easiest way to reproduce is browsing in private/guest mode)

Answer 11

bug

The ability to have "Disable top bar stickiness" unchecked and "Hide left navigation" checked is a wonderful feature. It keeps things similar to the way they are now.

With all the space freed up we have room to bring back the Rep to the top bar's avatar. This currently doesn't work for mobile devices with a high pixel density. On my Galaxy S9 with a reported resolution of 2768x1440, I see this in Firefox Mobile:

---

A possible workaround for large tablets - probably not desirable for a mobile phone:

• Go to Settings and set your Font size to huge.

• Go to "Developer Options", or use the 'Search Bar' and type "minimum".

• Set the "Minimum Width" to 980.

The result on a mobile phone is difficult to use; but the StackExchange site shows your Avatar, Reputation, and Badges (the same as a few months ago).

On a large tablet it might be OK (untested) but on a phone the keyboard is especially tiny (could probably adjust that in the APP) and other APPs may appear different.

The phone's UI doesn't expect this and things are tiny with incorrect spacing. Many things don't look very good, I set it back the way it was and will simply visit my SE Profile if I'm curious while we wait for this to be fixed. Probably not useful on a phone, someone whom is eagle eyed might prefer this.

I thought I'd mention this in case it helps someone.

Here's a screenshot of what it looks like, and the Setting screens:

Answer 12

Now that this is live, and I can't turn it off, I'll repeat my earlier disappointments. The left nav bar takes up entirely too much real estate for mostly useless links. I thought hiding the bar would help things, and now that it's live, I can see some problems with the approach.

Most of the left nav links are infrequently used. The "Questions" link, however, is probably my MOST frequently used link, and making that a two step process is really annoying.

Also, the "opt-out" for hiding the menu, and turning it into a hamburger, is sort of a secret. How is a new user supposed to know about this?? Even if a new user figures it out, the links that live under the hamburger are a mystery!! There isn't even a drop down on mouseover that would give someone not in on how the page works a clue about what's under there. A user should not have to know how a web site works to figure out how to use it.

So, where does that leave us?? I feel like I'm working with a UI that's significantly less functional than that UI I used to have. I'm not a web person, so I can't even pretend to understand (or, frankly, care) why the change was necessary.

The amazing thing is that just about all of the flaws were pointed out after about two minutes of beta!! This stuff should have been dealt with, instead of simply badly patched. It demonstrates not just a difference of opinions, but poor process.

As a last note, I'll add that this is SE, and the people here have a reputation of knowing what they're doing. I can't help but feel that a backward step like this hurts the brand.

Answer 13

bugstatus-planned

Due to Teams/Channels the left sidebar menu on Stack Overflow is already a little different from the rest of the sites (with Meta Stack Exchange currently being the only available example). But a significant difference that sticks out is that SO doesn't seem to have an "Unanswered" menu item, while MSE does:

This seems unrelated to Teams/Channels and thus seems to be an inconsistency in a UI overhaul that strives to largely unify the experience on the various SE sites.

Answer 14

The left pane adds very little to the functionality of the site, but it takes away much.

• SO design thus far has had a airy, open design. This left nav (especially the border line running through the page top to bottom) makes for a claustrophobic feel, and content feels quite boxed in.
• The Nav links were far functional at the top of the page. The teams could have very well been placed up there in the top nav as a dropdown.
• Symmetry has taken a hit with the left panel being much different than the right panel

Two questions with regard to the Teams menu:

1. Do you expect that users will have a long list of teams?
2. Does a user keep looking at the list of teams always even though only one is maybe selected right now?

Answer 15

Minor styling bug that I don't think anyone mentioned:

This was taken at 1000px x 676px. On question pages that have the "x questions" text, the row of buttons overlaps the featured box if the window is nearly at the point where the responsive style switches, but not quite there.

Answer 16

On mobile, username and picture of editors shown before authors, making it easy to assume wrong author if you don't look closely.

Example:

---

If you just skim and don't carefully look for "edited" or "answered", it's easy to assume that the first person listed is the one primarily associated with the answer. This should probably go the other way around.

I keep making this mistake both on questions and answers. I think this is a significant usability problem. We already have some confusion over this with new users mistaking the editor for the author — now we're going to have that for everyone.

Simply swapping the two would be a big help, but I think it should go even further — maybe don't show the user pic for the editor, or make it smaller somehow.

Answer 17

Late to the party but now as the theme went live on my favorite site (Ask Ubuntu) there are issues beyond of what I feared.

Often I have to work on small screens (office computer, netbook) where not much space for content is left if we deduce all windows decorations, top bars, bottom bars, side bars, and whatnot from the visible are:

This was already an issue with the old design but it sadly could not be improved with the new theme. The left side menu is a great thing. I like it a lot but it needs to hold many more items than now. Much of the top bar items could reside there.

So here are my suggestions for great improvements that could be achieved with only very little changes to the overall site design:

• Move the broad top bar with the site logo to the side menu to keep it sticky so that we still know on which site we are when scrolling down through questions.

• Leave Beta on the non-sticky colored top bar which would move away on scrolling to have the site logo small enough to fit the side menu.

• Newest, Featured, Frequent... go to a submenu on the "Questions" side menu entry. Even a dropdown could be considered there.

• The Ask Question button moves to the side menu where it would be sticky too. A good place appears to be e.g. directly under the site logo. By this the Ask button is accessible from everywhere.

• The question count goes to the title where All needs to be replaced by the display options we chose (e.g. Active, Newest, Unanswered)

To illustrate all this better here are screenshots from only few changes needed to the source:

Landing Page for Active Questions display

Same page scrolled down

An additional minor improvement was moving the search field a bit to the right to better align with the left side menu.

Answer 18

discussion

The "Ask Question" button now has a red border, red text and changes its background color to red when hovered over.

I find this a little irritating because I associate red buttons with actions I should be thinking over twice before executing them because they may have dangerous effects (which asking a question is not, in my opinion).

Is this on purpose so users think twice before they click this button? Or is there an other reason for the color change? I somehow liked the old black better and would like to know the reason for the change.

Answer 19

Cross-posted from Arqade's theming rollout upon request:

---

Is the old mobile site slated to be replaced by the responsive design any time soon? Because there are a couple of things I noticed when switching from old mobile to the full responsive site that are concerning

feature-request

1. There's too much going on in the top bar.

May just be a symptom of having mod tools, but there is no free space on the bar, no clear separation of areas. Could we maybe drop or combine some functionality here at mobile widths? For example:

• Drop or combine the SE logo content box into the site switcher or left-nav dropdown, and/or
• Combine the diamond and the blue flag notification, and/or
• Combine everything into Left nav except search, main (red) notifications and the site switcher

---

bug

2. The tag page 'Learn More' etc links get squished:

Can this wrap to another line instead?

---

feature-request

3. The question title text is too big on long questions

Potentially reduce the font size at mobile widths?

Answer 20

Measure for measure, we’re much too long

SUMMARY

We’re in flagrant violation of Bringhurst rule 2.1.2: Choose a comfortable measure.

ʀᴇʟᴀᴛᴇᴅ: Static, unchanging font size, leading, and measure incompatible with dynamics of responsive design

---

The desktop line measure is still much, much too long
for comfortable reading of continuous text in a variable-width
font. This is wrong on both serifed and sans sites alike.
We’re using lines 100 characters long, which is completely
unreadable except maybe in a fixed-width face.

        ^{(And again, without manual correction.)}

The desktop line measure is still much, much too long for comfortable reading of continuous text in a variable-width font. This is wrong on both serifed and sans sites alike. We’re using lines 100 characters long, which is completely unreadable except maybe in a fixed-width face.

        ^{(And again, in constant-width.)}

The desktop line measure is still much, much too long for comfortable reading of continuous text in a
variable-width font. This is wrong on both serifed and sans sites alike. We’re using lines 100 characters long,
which is completely unreadable except maybe in a fixed-width face.

Or for those of you who aren’t on the desktop site, that’s:

Demonstrations of Badness

This demo from Monica’s answer here is a good example of
what happens with a bad measure:

Example 1 of way-too-long lines

Example 2 of way-too-long lines

This is no better on those rare sites with a bit
of serifed text, as demonstrated by this ELU answer:

Thus Spake Bringhurst

In The Elements of Typographic Style, Robert Bringhurst writes:

2.1.2 Choose a comfortable measure.

Anything from 45 to 75 characters is widely regarded as a satis-
factory length of line for a single-column page set in a serifed
text face in a text size. The 66-character line (counting both
letters and spaces) is widely regarded as ideal. For multiple-
column work, a better average is 40 to 50 characters.
      If the type is well set and printed, lines of 85 or 90 charac-
ters will pose no problem in discontinuous tests, such as bibli-
ographies, or with generous leading, in footnotes. But even
with generous leading, a line that averages more than 76 or 80
characters is likely to be too long for continuous reading.

Or with serifs:

(Or course, you shouldn’t use hyphenation with a ragged margin,
but I’m trying to reproduce the book, which has a justified
right margin and thus some hyphenatinon.)

Demonstration of Goodness

For example, the New York Times uses a 66-character line:

Credit: “A Plum Tart That Keeps Its Charms Hidden”, Melissa Clark’s
regular “A Good Appetite” column from the August 31, 2018
print edition of The New York Times.

Let’s stop being so irresponsive

Notice how much easier the Times’ text is to read compared
with Monica’s or Sven’s? This is because we haven’t sized
the measure correctly. In other words, this is irresponsive
design, not the responsive design it’s purported to be.

The Times sets the font size and the measure in a way
that makes it easy to read no matter the viewport.

We don’t. We should.

Answer 21

bug

When I hover over the other menu items there's a hover effect, making the background gray

edit In the new menu there's only a very slight font color change, that I had to change my monitor settings for to be able to visually notice.

Could a hover effect be added?

Note, this is in the hamburger menu view.

Please make the hover effect consistent with the other hamburger menus by adding a background color change on hover.

Answer 22

There's a lot of whitespace in the top part of the page. I first noticed this on MSO, and filed a bug there, and was prompted to check out this thread by André Kool's comment there.

Not sure what's the proper etiquette here, so I'm just linking to my original post instead of re-posting here.

Answer 23

The "unanswered" page of any tag, e.g. c#, doesn't contain the tag definition part.

Newest c# https://stackoverflow.com/questions/tagged/c%23?sort=newest&pageSize=50

Unanswered c# https://stackoverflow.com/unanswered/tagged/c%23

The tab changes from

info | newest | featured | frequent | votes | active | unanswered

to

(all Questions) | my tags | newest | votes | no answers | all questions

• Why twice the "all questions"?
• Why are "featured", "frequent" and "active" gone?
• Why is only on unanswered the "my tags" visible?
• Why did "unanswered" get renamed to "no answers"?

The number of questions isn't displayed consistently:

Newest (without tag)

Unanswered (without tag)

Newest c#

Unanswered c#

Why does https://stackoverflow.com/questions?sort=newest (and all other tabs, besides "unanswered") have two ways to go to "unanswered" the item in the tab and the separate button "Answer questions"?

Because of this (I assume) there is also a rather unpleasant jump when switching around the tabs since the "unanswered" page doesn't have that button.

Answer 24

feature-request

Is there some reason those links cannot simply be moved to the top, as in the case of other sites (such as Server Fault, in the below screenshot)?

Now about the Stack Overflow page:

Do you have any statistics on how many users actually use those links in the left bar? By "use", I mean spend a reasonable amount of time on the target page, and not "oops, misclicked that, go back".

• If I had to take a guess, 99% users (and that's counting all users who access the site, not just users who log in) have no need to frequently visit "Tags", "Users", "Jobs".
• 99.9% users have no use for the "Create Team" link since clicking on that leads to a paywall, which will almost always be followed by hitting the Back button (or equivalently, closing the tab/window).

You probably don't need to put that many links in the left bar to pages that aren't frequently accessed. Of course, you have access to statistical usage data that I don't, so I hope you have already taken that into account.

Also, there is absolutely no need for three links to Stack Overflow on the left bar. (Although one of those links leads to stackoverflow.com/questions, but that doesn't really make much difference.) You might consider fixing that as well.

Moreover, since those links are already found at the bottom of the page, the left bar is pretty much redundant. There's also a fourth link to Stack Overflow there for some reason.

Answer 25

For me, when the left navigation bar is enabled, the content of the page is pushed off to the right, and a horizontal scrollbar appears. In other words, the width of the existing content to the right of the left navigation bar does not shrink in order to accommodate it.

I am using 64-bit Firefox 60.0.2 on Windows 10.

Answer 26

feature-request

One more request about the tag questions page: can we have an option to collapse the tag excerpt and related links? I know the c# tag excerpt by heart now, I don't need to have it occupy 25% of the screen height.

Answer 27

discussion

So, finally the Badges tab have been dropped? I earlier discussed Why do "Badges" have their own tab in the navigation?; now I don't find the tab for Badges in new navigation. Is it dropped due to redundancy or any other spacing issue or will be added later

Answer 28

feature-request

When you disable the left navigation menu, you see a menu icon at the left of the top bar. That icon has a right border that doesn't fit with the other elements in the top bar.

Could that border be removed?

With border:

An example without border:

Answer 29

Transformative left-nav

It would be transformative for regular users if the left-nav gave users customisation options such as by adding their own links etc., e.g. for meta, favourite chat rooms, the ability to pin questions by dragging them to there, the things they use most. Then it would become a joy to use.

Failing that it's at least be better the user has the ability to hide it, as it fills a lot of prime real estate with empty white space. But it should be clear on it, that it is, by some pin or x in the corner, rather than hidden elsewhere.

Answer 30

User's flags view on mobile stretches out too much

Which is probably related to responsive mobile still being worked on, but just in case.

Chrome 69.0.3497.100 from Google Play, phone running Android 5.1.