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

1. Why is the search field so small?

   bug status-completed

   Meta SO:

   

   SO (aka old situation) for comparison:

   

2. Also I find it annoying that the menu isn't always in the screen anymore (while there is plenty of space).

   feature-request status-completed

Left nav is now sticky

Now you either have to scroll up or open the hamburger menu first:

It used to always be available on the top like this:

3. Collapsing the menu doesn't really give you more space. I would expect the main part of the screen would use the space of the menu when it is collapsed.

   status-declined

Answer 2

feature-request status-completed (see Meta Stack Overflow)

My first impression of the left nav was pretty negative. All I saw there were links I didn't care about, and any time I went to a question list, the first thing I saw on every load was the navbar, and as I was reading through the questions, my focus kept switching to the new navbar on the left. I'm sure a lot of that was because it was new, but it kept happening, and it was frustrating. Disabling it made me feel better about it.

Now, however, after discussing it for a bit, testing it, messing around with it, I do think the only real problem I had with it was I felt like it was distracting me, pulling my attention away from what I was looking for. I found that one small change made all the difference for me, and that was giving the body of the page a background color. It didn't matter what color it was, as long as it put the primary content of the page into a separate box from the navbar on the left, it no longer distracted me. Here I just pulled the background from the header and added missing borders.

I can of course make this change myself later via a userscript if it doesn't go live, but that's my suggestion.

Answer 3

That menu has a lot of whitespace; I mean a lot.

And yet even with my rather large browser window it pushes the content to the right slightly. I'm guessing it's so darn big to accommodate large team names; but this still feel really excessive.

I expected it to hug the actual side of the screen.

GIF of the content jumping when nav is introduced (fullscreen, 1920x1080, Edge):

Answer 4

feature-request

In my opinion, I think the highlight on the tabs should be on the left side. It flows better, because, like most other tab highlights in the UI, they flow top => down or left => right (at least for LTR languages)

Additionally, the highlight bar butting up against a single pixel gray vertical line is jarring and distracting depending on the content in the center panel.

When on the left, it still highlights the tab, doesn't look like a scrollbar (as per the comments), and doesn't clash with the vertical line content separator. The only difference is it pushes the text in the tab in by the width of the border, so the words don't exactly line up.

Current:

Tweaked:

Answer 5

Sacrificing more of my screen real estate for showing things I do not need is not an improvement.

Even with the left bar switched off (thanks for this option, as such) I now see 40% of my right margin occupied by things which were previously hidden away in the margin.

Here is the Stack Overflow start page as of today:

I mean ... seriously!?

Promoting navigation aids and advertising over actual content is not "responsive" at all in my book.

The left bar adds insult to injury by doing the same on the left-hand side. I can understand how menus make some things slightly less discoverable (and frankly, the menu design on this site is really not transparent, consistent, or logical) but putting trainer wheels on everyone's bikes just because there are some beginners who cannot yet ride without them is a terrible design.

I like Kevin B's proposal to move the left bar into the top bar; having the main content assaulted from both margins is a losing proposition, whereas having stuff tucked away at the top (and ideally scrollable out of sight ... though that too is now a tick box you have to discover in your preferences!) so you can get your designated window filled with the actual content you want to look at would work pretty well. If you have to make the top bar higher or more complex to accommodate proper menus, so be it.

Answer 6

feature-request

YAWC (yet another whitespace complaint)

When viewing a Question page on mobile, it feels like there is too much whitespace under the voting buttons, and especially to the left of comments. Here is a screenshot to demonstrate:

Compare this with the mobile theme, which has no whitespace since the voting buttons are positioned next to the question title:

Would it be possible to move the voting buttons to be next to the question title when the viewport is at a mobile size?

Answer 7

status-declined

We considered this, but have some features coming that will need the space.

#1: I suggest that we shrink the navbar in width to about the width of the longest item ("Questions" in this case).

I want it because the button I most frequently will be "Questions". Hence, I will only use 25% of the bar, so I want thing I will use rarely to take up as little space as possible. And I don't want to do 2 clicks to get there.

#2: Make sidebar position: fixed; for quicker access

status-completed

Left nav is now sticky

Currently when we scroll to the bottom of the page and the horizontal bar is sticky I can "refresh" questions section by making a single click on "Questions" in navbar:

But the new sidebar gets hidden on scroll down and now we are no longer a single click away from the "Questions" section, but position: fixed can fix that:

And when both changes above are applied, together with the suggestion about grey background from another answer, we get small, convenient sidebar:

#3: Replace sidebar text with icons

status-declined

We considered this approach but it is very hard to find icons that are easily identifiable to a large majority of people.

... or we could make such an option available to be toggled in user preferences.

This will further improve allocation of space.

---

Answer 8

feature-requeststatus-review

Instead of adding a "hide" option in user settings, have you considered making the sidebar toggleable with a button instead?

Advantages of a togglable sidebar:

• Site maintains a consistent look and feel between users.
• More intuitive than searching through settings menus¹.
• Doesn't require changing site-specific preferences on each community.
• Guests can hide/show the sidebar without needing to login.
• Fewer preferences help keep the options menu simple.

^{1Currently, disabling the sidebar involves navigating through User Profile → Edit Profile & Settings → Preferences → Navigation → Hide left navigation.}

Answer 9

feature-request

Once again the design completely ignores people who use small screens or who use a window interface :(

This is the new MSO at 816px (on my system, YMMV), with the left sidebar disabled:

This is a bit too narrow for me though. I'd rather have a window that's half the width of my monitor, which on the machine I'm posting on right now is 1920. But widen the window to 817px and beyond, and it breaks down (or breaks up?):

WHY???

I'm not even sure whether the narrow-screen behavior is intended or not. I guess an accommodation for mobile devices? Please keep it! Please, please keep it!

And please make the right side-bar collapsible, like the left side-bar is**. This shouldn't be a preference, it should be a button that you click (with a discoverable keyboard shortcut, of course).

feature-request

By the way, collapsing the left sidebar shouldn't be a user preference. Its desirability depends on the window width, so it should be possible to toggle it on a window by window basis. I think a decent compromise would be to make it a hidden preference that you can quickly toggle on the page, possibly a cookie-based rather than account-based preference since optimum window size tends to be device-dependent.

Answer 10

feature-requeststatus-completed

see Left nav is now sticky

I wouldn't normally request a per-user feature as it's a lot of work, but as you already have the per-user options for navigation, can we have an option to make the new left nav fixed?

So it will always be there when scrolling (or not if preferred).

With the option already present to "disable top bar stickiness", this new requested feature will allow users to select their preferred menu to always be visible to be clicked. Or both if preferred.

Answer 11

status-planned

The current behavior is a bit a of a hack that we need to clean up. I think the direction we will move is: * some things (possibly the asked/viewed/active meta data) will get integrated into the post itself * some things get moved to the bottom (related) * and some things get dropped altogether (hot posts)

You mentioned the site is now responsive. At first glance, I love that you hid the right sidebar at smaller resolutions and then I realized... nope, you just moved it to the bottom of the page:

Is this really the intended design on smaller resolutions?

Answer 12

feature-request status-completed

Please reduce the amount of space tags take at the top, and add clear indicators for different tags.

This:

is plain horrible. I've lost about 30% of the vertical space on my (small) second monitor purely on tags.

Answer 13

bug status-completed

You've changed the color of the 'Ask Question' button on the 'active' tab:

but not on the other tabs, like hot:

and the /questions page, as @rene noted on MSO.

Answer 14

feature-request status-completed

See Hide Left nav everywhere with a global preference

Left nav pin/unpin should be a global, cross-site pref

I set the preference to collapse the left side bar (“Hide left navigation”) via Meta Stack Overflow, and it's working there. But on Stack Overflow and Meta Stack Exchange, the left side bar is not collapsed and the preference checkbox in my profile is unticked.

User interface preferences should obviously not depend on the site. I'm not going to edit my profile on over a hundred site!

Yes, I know this is an old bug, keyboard shortcuts have had the same problem for years. So please solve it already!

Answer 15

Add Help, Meta and Chat links into the sidebar.

feature-request status-review

The site switcher contains some pretty major site navigation features. I'd classify them as equally important as being able to navigate to users and tags, if not more important or more likely to be used.

What if we added these to the sidebar?

New: “Chat” and “Help” added at the bottom (the help link with its help icon to help users find it); "Meta Stack Overflow" added beneath the Stack Overflow link.

These weren't previously listed alongside Questions/Tags/Users/Jobs because that was a horizontal menu with limited space. Now we've got a vertical menu that doesn't have the same constraints.

Add My Communities as well feature-request

(I've just seen Monica Cellio also mentioned this as part of her feature request, but I think it makes sense to leave this here too whilst I'm talking about adding site switcher content to the sidebar.)

We could even move the My Communities section of the site switcher into the sidebar. It'll be appearing on every site, right? So now I can move around to other sites this way.

I'm not sure how I'd execute “More Stack Exchange communities” since we wouldn't want a list of all 200+ communities showing up in the sidebar, but if we added that section & functionality into the sidebar too, it would make the site switcher obsolete.

A valid counter-argument for this section is to consciously keep the sidebar limited to navigating locally within the one stack exchange site, and keep the site switcher for the task of navigating to other sites.

Answer 16

feature-request - Make the horizontal scroll bar optional. In other words, option for enabling and disabling responsiveness.

There have been concerns from users with high resolution monitors this, this and this. My answer is from point of view from a low resolution.

Space taken by Q&A is reduced

In one of the previous posts, Ch-ch-ch-changes: Left nav, responsive design, & themes Joe Friend has explained this responsive design is a result of long requests from users having low resolution devices. There is also a statement in the question

This benefits people who have lower resolution devices or like to have multiple windows in view.

But in practice, it is not benefiting. There are some issues.

I use a device with low resolution (1024x768). This is how it looks to me.

The right side bar is squeezed into a single window which makes the content (Q&A) sandwiched between left navigation bar and right side bar. They take very less space. The new responsive design fits everything in a single window. This squeezed As a result, the space taken by the right side bar didn't change but the space occupied by Q&A on the screen has decreased.

In the current design, the main focus is on Q&A. We can scroll with the help of horizontal scroll bar the missed part in the right side bar. The space taken by Q&A is not affected at all. So, that should be continued. At least there should be an option to select it.

The look of the question is also damaged. If the question is edited by a user other than OP, the editor's avatar and OP's avatar shows in vertically rather than side by side.

Only option we have to avoid this is to disable navigation bar. In a previous post entitled Left nav, responsive design, and theming next steps, you wrote,

We are committed to the left nav, but based on your feedback we'll be addressing some key concerns.

If the bar is always disabled, it is as good as not having it at all. If this left nav is only limited to users with high resolution devices, the goal of having a nav bar is not achieved. I hope having horizontal scroll bar will solve this problem.

More problems with right side bar:

bugstatus-completed When the left navigation bar is enabled, users are not be able to comment properly. "Add comment" overlaps with the Hot Network questions.

We all are humans (well, most of us), we make mistakes. If we click on any o Hot Network question mistakenly while clicking on "Add comment", it takes us to a different site. We should get back to the comment and write it again. It is a waste of time. Not only it's an issue of time management, it doesn't good.

This effect can be minimized to some extent if the navigation bar is disabled. But there is an overlap of "Add comment" with the Hot question bar. Add comment button touches the site icons in Hot Network Questions. It doesn't look good.

From 1024x768 resolution screen, Browser: Firefox updated version. Also reproduced with Google Chrome updated version OS: Windows 7

status-planned We still have a scroll bar in the profile page in the new responsive design just like the old design.

Some user reported it as a bug but that should not be removed. I request that sort of behavior for the devices with low resolution. Users with higher resolution do not see this scroll bar at all as the current design and responsive design fits within a single window. So, there would not be a problem for them. It will be helpful for us.

Regarding sticky Topbar, it is an excellent choice.

The left navigation bar is almost empty. It would be great if more options are added into it. Home and Questions are the ones many visit. Add more frequently visited options in the left navigation bar.

That's all from me at the moment.

Answer 17

rant

I use a vertical display for my browser (so 1080 px wide), see screenshot for the aspect of SO in my browser.

While wide margins are probably fine on wide displays, here the amount of margins on both sides really reduces (and vertically squeezes) any content, to the point that only about 30% of the screen is used - that feels like a waste. I'll definitely disable the left navigation, but if you want the website to be responsive, I'd recommend to start removing margins at wider displays than now.

---

feature-request user cards next to each other.

I think there is somewhat of a misconception around responsiveness. Just making things more vertical doesn't make necessarily make them better on a less wide screen. What you want is wider content, better use of space.

On the same screenshot, you can see that the editor usercard is now vertically stacked with the author usercard. This wastes even more space, even though there is more than enough space to fit them horizontally. And again, this is a copious waste of space.

Answer 18

feature-requeststatus-declined

There are some coming features that need the extra space, so we can't make it more narrow. Making adjustable is complex and we won't be doing that at this time.

Can we narrow the right column in smaller viewports without removing it entirely?

Below around 800px the right column moves to the bottom of the page, which is good for phones but loses some important information (question stats, professional disclaimer, community bulletin). As soon as the right column appears, though, it grabs something like 300-320px of width. If that kicks in at about 800 px, that's around 40% of the width, which is too large a proportion for a page that should be focused on the Q&A. I'm browsing at about 1100px right now and it still looks a little greedy. All of this is with the left nav already collapsed, to be clear.

Most of this content would fit just fine at a smaller width; mostly it's text and that can wrap. In fact, it worked fine at, if I recall correctly, 220px for years before being widened to accommodate standard ad sizes. On sites without this change, part of my right column is behind a scrollbar and that's fine; it's lower-priority content, after all. But responsive design means "make it all fit, no horizontal scrolling".

I don't begrudge the ads; in fact, I look at them (or, on sites that don't yet have this change, most of the width of them and I'll scroll if it's something I haven't seen before). But I'd like the right column to be less dominant on smaller viewports. Is there some way to meet both needs? Is there some place to put the ads so that they're fully visible without claiming that entire slice of vertical space? Do we have the option to change the width of the column partway down, so that after the ad we can shrink HNQ and give Q&A more space? I'm just brainstorming here, not proposing a specific solution.

Answer 19

I don't like the enormous amount of space at the top of the Question list pages (home page and /questions).

vs

I use a 19" monitor for my normal browsing, and on that size, that's pushing the questions even further down the page.

I could see splitting it up like it is as the width of the page gets smaller, but at full width, that's a lot of unused space. The original mockup is below, but it's missing tabs.

Answer 20

bugstatus-completed

When editing a question at certain viewport sizes, the textboxes for the title, edit summary, and tags extend into the sidebar. This also happens for the edit summary when editing answers. See screenshot below.

Answer 21

The new left navigation on Stack Overflow seems to be over-complicated due to Teams, despite not being a Teams user. The "Stack Overflow" link below "PUBLIC" actually takes you to /questions. Shouldn't it be called "All Questions" instead, otherwise you have two "Stack Overflow" links on the same page that take you to different pages?

Finally, I was informed in another MSE post that the SO link with the globe icon is actually at a higher indentation level than Tags, Users and Jobs. The globe icon makes them look to be at the same level of indentation. Is it necessary?

As a non-Teams user, I would love the simplified look of this example I have created:

Or even the following to keep the public/teams separation if absolutely necessary:

Answer 22

bugstatus-completed

The voting buttons on Meta Stack Exchange don't fit to the site design's individual colour palette. Whereas they previously were light blue, as fitting to MSE's colour palette, they now seem to use the orange from Stack Overflow's design:

I know their shape has been unified to the default arrow in an effort to standardize the sites' theming. However, the colour mismtach is rather unpleasant since it is in stark contrast to the rest of the site's visual impression.

This has been brought up in previous feedback iterations, but it had been hinted that at least the button's colour would be based on the sites' existing design and themes. So maybe this is just a bug.

Answer 23

feature-requeststatus-completed

completed the fixed part of this, scrolling coming soon. Left nav is now sticky

I'm not a fan of the left nav, but I love the way that YouTube does it: http://youtube.com.

Two things that make it great:

1. It actually hugs the extreme left side of the window, preserving space for content.
2. The left nav is fixed and can be scrolled independently of the main content.

So if we got to have a left nav, might I suggest that you just straight-up copy YouTube's design? That would be great IMO.

One thing to note about YouTube's design is that if you resize the window, you will notice that the left nav collapses very easily. It allows for a LOT more space for content than the responsive design here. I think that is a complaint that many people have made so far.

It just feels too squished with the left nav AND right sidebar. I think the left nav should collapse BEFORE it even affects the old max-width. So you should really only see it if you have the whitespace there to accommodate it (for example, if you are on widescreen monitor and the window is maximized, which is fairly common). But if not, it should be collapsed.

Answer 24

bugstatus-norepro

On mobile (iOS Safari), the /review page is already responsive, but there's something wrong with the achievements dialog: Teams icons are not shown in the daily summary, and the spacing/padding/alignment of the items is off as well:

This is how it looks like on desktop:

Answer 25

Let me be brutally honest, I much rather the current site.

First, (I do not use SE on mobile, however) how is left-nav more mobile friendly?

Secondly, how is left-nav a better user experience? Even if the menu does not scroll?

Answer 26

feature-request

I don't know much about history web design, or whether "responsive" is equivalent to "the user shouldn't have to scroll to the right or zoom out". But I don't like this change.

This (screenshot is at 30%) is readable on my phone held at a typical distance, being one to one and a half feet from my face:

But alas, that's the Desktop view of my mobile browser (Firefox), which has its own problems.

And I can't zoom out any further. On mobile it looks like this:

And I can't zoom out again. I can read this very clearly at, I kid you not, at one and a half meter (that's about five Freedom Units) distance from my phone.

The feature request: please don't do responsive like this. Let me zoom out to get more text on my screen.

Answer 27

bug status-completed

I visited Stack Overflow on my tablet for the first time, and was met with this:

Not exactly the world's most welcoming landing page, is it? And yes, as others have noted, it's readable from a distance of about six feet on a seven-inch tablet.

Answer 28

Userscript to move the left-sidebar into the topbar network-wide _{^{( Stack Apps ) ( install ) ( GitHub )}}

Because I really don't like the space wasted by the left-sidebar, I created Left-sidebar in the Topbar, which moves the left-sidebar into the topbar on all SE sites which have the left-sidebar, regardless of the preference set on each individual site. Installing this userscript is equivalent to having selecting a SE network-wide preference to "Hide left navigation". You will not need to set the preference on each individual site.

Answer 29

bugstatus-completed

The bottom of tag pages is a bit clunky on small viewports – the "legend" and the "tag synonym" links might benefit from a line break between them:

Answer 30

All of this is unnecessary. The white space reserved for the left nav keeps stealing screen real state long after the left nav is no longer in sight. Why? Why do you think that this is needed? SO has many problems but the UI it's not really one of them (until you go and change it and make it a problem).

Btw, "Hide navigation" it's not working for me.