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

feature-request

Personally, I'm not a fan of the border at the right. It gives the questions a bit of a boxed-in look, and I think it looks nicer without it. Especially when scrolling down a lot, I think it looks nicer without a border, also because the left sidebar doesn't have one.

With:

Without:

Answer 2

When I answer a question now, the width of the preview I see below the answer box is not correct. The actual answer that gets displayed when I post it will be narrower than the preview, so blocks of code may gain scroll bars that I wasn't expecting.

For instance, this fits on one line in the preview but it may need a scroll bar when I actually post it

I hope this is only a bug with the answer preview. It would be really bad if the width of all code blocks was actually changed, since that would break a ton of old answers that used to use all the width available (for things like comments at the end of lines), but now they're too wide.

Answer 3

Can you make the "Hide left navigation" the default setting?

That way, users who don't login (including users who have accounts but use private browsing mode) don't have to see the left bar, and users who want to see it can always enable it from the settings.

Answer 4

status-completed

Hide Left nav everywhere with a global preference

Even after changing preference. Nav bar is still there:

Answer 5

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.

(Perhaps this should have been a comment - perhaps it's even been discussed above and I didn't follow instructions before posting - but felt I had to vent right away.)

Edit with more information.

Someone kindly pinged me to tell me about the button on the upper left that gives me navigation (back to questions). Thanks.

Next beef. The question list (without the nav bar) lists hot network questions on the right, as it used to and should. But they now take up nearly half the screen width. If I increase font size (Firefox) to trade for a willingness to scroll the question font increases (good) and the hot question list disappears entirely ...

Answer 6

Yet another whitespace issue, mobile edition

On phones, when viewing a question, the question (and answer) bodies are indented to make room for the voting buttons to the left. This is not a complaint about that -- yeah, I'd like to do better there while retaining access to the mod tools, but this post is about a consequence of that: comments.

In the desktop view comments are indented such that their scores (if present) align with the edge of the post body. There's room for that in the desktop view. On a phone, it makes lines too short in comments, which means I can view fewer comments at a time and have to scroll more. On phones where real-estate is limited, can we please align the comments with the post body? That'll still leave plenty of room for comment votes/flags.

Answer 7

feature-request accessibility

Make the #content element a main landmark.

The main landmark will help screen reader users jump straight to the main content. It lets screen reader users skip past header and navigation. NVDA screen reader users can for example press D three times to skip to the header landmark, then to the main nav landmark, then to the main content landmark.

(Not all screen reader users know about this ability, and most sites don't implement it, so this should be done in conjunction with skip links, not instead of them.)

Specifically, change it from:

• <div id="content">

to either one of these:

• <div role="main" id="content">
• <main role="main" id="content">

The Main element is a HTML5 semantic element, and effectively identical to <div role="main"> so either one works fine.

Writing <main role="main"> is something we do for IE11 compatibility. (In all other browsers it's redundant.) IE11 came out with support for the main role but without support for the main element, which it treats as unknown but stylable. See Can I Use: HTML5 Semantic Elements. If you use the main element you'll also want to add the following CSS line to your page to tell IE how to render the element: main { display: block; }

Answer 8

Search button overlaps right nav

Similar to this answer about how adding a comment overlays right nav, and this one with edits, and yet another one with another set of buttons.

Firefox 62.0, Windows 10, happens (roughly) between 1001px and 1136px wide: resizing the window makes the search button from the search results overlays the right nav.

On Meta...

Stack Overflow...

And SFF, and others with the new theme:

I don't know if it's relevant but apparently it also happens on job searches, per this post on MSO, but that was another browser and not the exact same button - never used job search on SO, don't know how it behaves.

Answer 9

I'm not sure if this bug has been reported or not (honestly I've looked at only half of the response post here): the badge notification graphics clash with the frame beneath it as shown in my screen grab, across all browser zooms (shown below are 110%, 50%, 200%).

My system is MacBook Pro laptop with a 2880x1880 screen by default mimicking 1440x900, running OS X El Capitan version 10.11.6, and the browser is Google Chrome version 69.0.3497.100 (Official Build) (64-bit).

---

---

Answer 10

accessibility

Process Objection

I think this issue underlies a lot of the other ones we're seeing. Several of the issues raised on my "home" stack (RPG.SE) with regards to poor contrast, items distinguished by color only, etc., garnered the response "that's a valid concern and we'll look at that when we start thinking about accesssibility issues, after the new layout is completely rolled out." While I appreciate that it is on the agenda in the first place, the appropriate time to be thinking about accessibility is day 1, before planning, let alone making, any changes.

Answer 11

Is the minimal width of the page on chat.stackexchange.com and chat.stackoverflow.com gonna be considered in the redesign?

---

Here's a userscript that resolves this issue: Fix chat.SE and chat.SO main page minimum width

Answer 12

The preference to hide the left sidebar really wasn't as useful as I initially thought. The main issue is that it hides some actions I used very often behind two clicks, instead of only the one click needed previously. By far the most common page I want to navigate to is the "Questions" page, to view the newest questions on the site. On SO another common action is to switch to my Team instead of the main site.

My initial expectation was that this preference would simply move those items back to the kind of horizontal menu we have on classic SE sites. But instead it hides everything behind a hamburger menu.

There's plenty of space in the header for MSE, and on SO there's even less vertical space occupied as there is only the top bar, and no header below it. I think switching the sidebar to a horizontal menu if the "hide left navigation" is checked would be a large improvement over the unconditional hamburger menu. This trades width against height, and not width against an additional click every time.

Answer 13

I have a suggestion for improving the usefulness of the left-hand nav bar. There are complaints about there being too many "hamburger-like" menu buttons. I suggest to remove the community one, and put it in the left-hand navigation bar.

This is what SO looks like for me today:

It would be easy to add links to other pages in the SE network under the "Public" heading (sorry for the very awful mock-up, UIs is not what I do):

There could be an additional button there to customize which links are shown (for those folks who make accounts on all SE sites, you know who you are).

EDIT: My thoughts mirror the ones expressed in this answer to the "Ch-ch-changes" post.

Answer 14

Ok, here is a stylish script to fix a lot of the problems:
https://userstyles.org/styles/161460/se-left-nav-scroll-with-page
Screenshot:

Improved:

• Sticky to top
• Grey background
• Simpler hierarchy

A lot of the code was copied from here.

Answer 15

status-completed

Left nav appears to misbehave on the Stack Overflow /jobs page in Edge (41.16299.15.0) browser

The side navbar seems to float into the job search results area when the window width exceeds approximately 1274px. See screenshots below -

Width at 1920px -

In Firefox it looks fine -

(Apologies in advance if this is a duplicate - I did search but couldn't find anything)

Answer 16

bug

Hopefully this has not been posted yet, but the website is really going to great lengths to want me to accept an answer. The following image demonstrates it all.

---

In case I did not make my feedback clear enough, the text circled in the image displaced the vote/answer/view counters from where they should have been shown.

Answer 17

I think the left-bar should be collapsed by default as most logged in or anonymous user will see the same thing there. Also currently IMO it distracts the main question view. Or at the very least- as you resize the window down, the sidebar should be the first one to collapse. Currently the right hand panel moves to the bottom which is the second most important piece in this page (after the question).

I'm only talking about the question page. Other pages look brilliant with the sidebar. It's just in the question page where this new sidebar hurts my eye.

Answer 18

bugstatus-completed

From the left navigation, if I select Unanswered option I can see the Questions and Unanswered options are selected.

I hope it should be highlight the Unanswered option only. It causes confusion which tab we are in now.

When hide the left navigation:

With the left navigation:

Answer 19

First of all: +1 from me! The sidebar on the left is great. It makes the main column more centered and thus it is significantly better for comfortable reading (on a wide screen). Seriously - a bigger left margin is a remedy to the former layout.

Though I have a pair of minor suggestions.
.

Right sidebar & resizing the window ("responsive design")

Currently the right sidebar moves towards center when shrinking the window and then at some point - woop! it just dissapears. I see, this is kind of "responsive design". But is it possible to make it the other way: say if I shrink the window width, it would be better if the right sidebar at some moment starts to just 'clip' under the border. I mean it will just be clipping by the window border more and more when shrinking the window. And then, when it is away, the main column starts to shrink 'adaptively'.

Maybe it is hard to implement, but I beleive the users who need smaller views will much appreciate that. And there will be less rearrangement happening on the screen when resizing the window.

Also, the gap between the main column and the right sidebar is still too small. Please add ~ 15 pixels more spacing.
.

Maybe add something useful to the new sidebar?

Consider adding e.g. "My profile" and "Other SE sites" to the left sidebar - anyway there is a lot of space.

feature-request

Answer 20

I can't review edits in mobile properly

When I click an edit (1) link I get this popup centered in my screen. I cannot pan left to see what was removed or access any controls on the left side to change the view. I can pan right to see the full review and buttons, but that's not enough to be able to conduct a proper edit review.

Answer 21

bug moderator-tools

After I create a community event, I see this jumble of text:

The event view, which used to be multi-line, is now pushed into a table. That table must still fit within the (responsive) width of the pane. URLs are inherently long, and some event names are too. And the timing text is verbose. Result: lots of unfortunate line wrap (while there's extra room below), and the links are smooshed into the last column where they're harder to see.

For comparison, here is what this page looks like on a site with the old design:¹

Here the table is replaced with rows of text. The event name is on a line by itself. The next line contains the URL. Below that are the date information and who created it. Below that are the links. The display actually takes a little less vertical space than the tabular view, in addition to being much easier to read.

Could we have the line-based layout instead of the table layout on this page?

This bug was also reported on the post about beta/unthemed sites, but it exists on other sites with the new design so I'm raising it here too.

---

¹ The Workplace is the last site where (a) the new design hasn't been done yet and (b) I have a diamond so I could do this test.

Answer 22

"Hide left navigation" does not actually hide the left navigation. Either hide it or rename the setting.

Answer 23

The search bar does not align with page contents and this is driving my design OCD crazy.

Answer 24

I can't upload images on mobile

I get the option to hit the image upload button, but when I hit that button and choose my image, here's what I see next:

I cannot pan left or right or zoom out. The upload button is off screen. I can't reach it to upload my image.

Instead I have to switch on viewing this site in desktop mode in my mobile browser, and do my image upload that way:

Answer 25

Just bite the bullet and build a platform level capability to support user templating similar to React. I don’t mean be like React specifically, or that complex really; I mean any kind of template syntax that makes it relatively easy layout the page and components and very simple theming with a high level syntax.

This would be a ridiculous and unnecessarily flexible feature for most sites, but this is a a developer site. People would love it and use it.

They wouldn’t even have to know the syntax, because they could just browse and copy an existing well designed and refined template from the ecosystem that would instantly appear without even any official support.

Answer 26

In the left window the navigation thing is on. See how much unused space it steals from the main content of the site? I wanted to reclaim it fully by disabling the left side column. Instead even more space got stolen by the right side column which was hidden before but then appeared (in the right window).

Some (in the comments to this post) argue that the right sidebar needs its own space and it's fair how it steals that much space for itself. That's not what I wanted in this example, but I agree that sometimes that's what you'd want.

I think we can meet halfway by creating a vertical bar or a toggle button which collapses the right side widget when you want the questions to take up all the window space.