Left nav, responsive design, and theming next steps

Question

Those interested can now opt-in to beta testing new themes across the network. More details in Opt in to beta testing new themes

In the post entitled Ch-ch-ch-changes: Left nav, responsive design, & themes, I described a number of changes that are coming with the introduction of the left navigation bar. In addition to the navigation changes, we will be introducing responsive design and new theming across the Stack Exchange network of sites. See that post for the full details. This post will focus on updating the schedule for the release of these features and responding to some of the feedback from the previous post.

When will the changes be coming?

Current state - Left navigation is on for anyone who is in a Stack Overflow team.

Late April - Finish core implementation, addressing early feedback, enable responsive design for Stack Overflow for Teams beta users.

May - Address bugs and critical feedback

Early-June - Sneak peak on MSE. Deploy to Stack Overflow and MSO.

Late June - Address bugs and critical feedback. Gather feedback on preliminary site designs for 5-10 existing communities with custom designs.

Begin deployment for all users on sites with custom themes. Plan is to do this roughly by site age, though we reserve the right to vary the order due to implementation concerns. Outline process and timeline for sites without custom themes to get one.

July and beyond - Design, community review and deploy site themes to additional sites.

Response to feedback

We received a lot of great feedback in the last post. Below I've summarized the major themes/issues raised, will provide a short response, and will tag each one (status-planned, status-review, status-bydesign, status-declined, etc.) to indicate how we will be proceeding. There is still research and design work to come up with a full solution for the issues we are going to address.

Left navigation bar

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

Hide/collapse left nav status-completed

One of the biggest concerns was the amount of space that is taken up by the left nav. We're currently working on making the left nav collapsable. If you collapse it, then the left nav stays collapsed. When you click on the hamburger to access it the left nav comes up as an overlay and will dismiss when you make a choice or click away. Plan is that this will be remembered per site. For example you can keep it open on SO.com, but keep it collapsed on other sites.

Add more value in left nav status-planned

Implicit in much of the feedback was the idea that the left nav real estate is not delivering enough value per pixel. Based on the images we showed it was clear that for people who are not on SO.com or aren't in a team, the left nav is pretty empty. We have some great ideas for adding value here and have already started work on one. More specifics in an upcoming post.

A design exploration showing examples of features we could add/move to left nav.

Resize the left nav status-declined

Another idea mentioned was resizing the left nav to reduce the amount of space it takes. We looked at several models for this and didn't love any of them. Some of the best options require coming up with good iconography for each item and we know how much fun that is (review queue anyone?). Also, this is a lot more work than hide/collapse. So, we will start with hide/collapse first and evaluate how it works for everyone.

Left nav vs. site selector status-review

Monica raised a great issue about the relationship of left nav and the site selector. We agree that there is room for improvement here. We looked at some models that attempted to merge the two, but we couldn't get it right. Also, it felt like a radical change. So, we are keeping this one on the back burner for now, but will likely come back to review it.

Network site theming

Who gets a new theme? status-planned

Simple answer here is the Community team is working out the criteria for who (beyond graduated sites) will get themes. It's kinda silly that sites that have been around for years are still using the basic theme. One of the reasons for simplifying the theming is to enable more sites to get customized themes. Theming will still require support from TeamDAG for the forseeable future (no self service theming) and it will take time for us to work through the full list of sites, but the goal is to get themes to all sites that have proved themselves viable.

Fonts status-completed

Check out the resolution to this issue here: Fonts and the new Q&A theming

Specialized (e.g. MathJax) content status-planned

There are no plans to remove features to support specialized content. However, there may be special work to make it work well in a responsive design. That said, the goal is no change to the experience if your viewport is the same as today's min width and the left nav is hidden. On smaller viewports we will need to introduce a horizontal scrollbar if the custom elements can't be scaled down.

Badges status-planned

People love their badges. This was the top voted feedback. We will support the current custom badges and will do our best to create new badges for new themes.

Keep theming as it is today status-bydesign

Unsurprisingly, people also love their current themes and don't want to lose them. Given that highly themed sites are the minority and that the current theming level is unsustainable, we're going to have to disappoint here. In addition, things like voting and favorite buttons are a core part of the Q&A experience that should be shared across the network. It was a mistake that we ever allowed for those to be themed. So, while we will keep a more limited support for header graphics and colors, we won't be supporting the previous level of theming. The benefit is that most sites will have a theme, and theming for all sites will extend to the mobile experience. Of course, that is still strong medicine for the communities who have extensive themes under the old system.

Responsive design

Much of the feedback around responsive design comes from our reliance on a video that shows a WIP and doesn't capture real world usage. You really need to use it. That said, there is no doubt we will get some stuff wrong when it goes live. We will work through issues as we identify them.

Prioritize right column over left nav status-review

The real answer on this one is "kinda". If you collapse the left nav, then we effectively prioritize things in the way Monica suggests. However, if the left nav is pinned, then we will continue prioritizing it over the right sidebar. We are also going to look at how we integrate sidebar content into the main content area. Some of it does need to be prioritized appropriately instead of just being dropped to the bottom of the page. Professional-advice disclaimer (see Health, Law, and Mi Yodeya) is a great example of this type of an issue.

Don't squish the search bar into oblivion status-completed

Well, actually we completely squish it. Search bar drops to a search icon at narrow viewports. This lets us keep a full set of menus in place while supporting search.

Other issues

What about Area 51 and chat? status-bydesign

Poor Area 51 and chat (and SE.com to be honest). They never get the love. For now, they will stay as is. We simply don't have resources to address them. That said, there is so much the team would love to do here.

Again, thanks everyone for the feedback. I'll update the schedule above as we make progress or if any changes come up.

Answer 1

Thanks for considering the above changes; those are definitely an improvement.

However, I request one thing:

Keep error pages customizable per site

In other words, allow sites to choose the image that appears on the left side of the page for the different error pages (404 not found, 500 server error, and the captcha message). In my opinion, the 404 error page in particular adds a certain level of charm to the sites, and I don't want it to go away.

A quick note: this is not a request to restore the 404 polyglot on Stack Overflow. I understand that that request was declined, and I understand that the reason it was declined was that it was difficult to manage because different sites had different styles for the 404 page, and because the same 404 page was to be used on both public Stack Overflow and the several private versions.

However, I believe that at least the image on the left side of the page (if not the note, e.g. "we did, however, find this program" with the old 404 page) can be customized per site. For instance, Stack Overflow can keep its current UFO page, while Super User can swap it out for the person trying to peel open a computer, etc.

Is this possible?

Answer 2

On Science Fiction & Fantasy, we're wondering Exactly which features of SFF.SE's magnificent theme will we be losing?

And if there's go to be a timeline for the changes and if we'll get a preview beforehand or just have it turned on one day.

And what are the technical limitations behind the decision on the custom voting buttons when we're being allowed to keep the badges, considering they're all stored in the same sprite sheet already?

Answer 3

So, to try to state the obvious, and the less so...

For most part I think most sites won't look all that different (and cough I know you guys will keep the worldbuilding robot, right?).

I do think at this point the main point of unhappiness is the voting arrows.

. It was a mistake that we ever allowed for those to be themed.

It seemed a good idea at the time? Its also a design element people see all the time, and least seems like something that means a lot to people. While maybe less practical from a technical viewpoint, it might be worth seeing if a compromise is possible from a community happiness viewpoint.

As someone who uses a 4k monitor all the time, I'd also suggest that as suggested in another answer - using more of the screen on high res monitors would be a mistake. When I read on a 4k/27 inch monitor - I tend to turn text sizes waaaay up. Too much text per page is unreadable. But shrug there's actual UX people to tell you that ;). The current options seem ok.

Answer 4

Resizing doesn't need to mean new icons.

Thank you for making the left nav collapsible! As I noted in an answer there, that meets the real-estate need (albeit in large strokes). I personally don't expect to use the left nav much, so getting it out of my way probably works 98% of the time. That's pretty good!

But I think you might be over-thinking resizing. You noted that making the left nav resizable would require more design work on things like icons and how that never goes as smoothly as you intended. That would be true if you were automagically shrinking the nav. But the request was for user resizing, like on other sites that have a resizable TOC pane. The behavior I've seen pretty much everywhere is that users are responsible for self-inflicted reductions of legibility.

As a user, I don't need you to replace "tags" and "users" with icons if I make the pane too narrow; it's on me to deal with the fact that I can only see "T" and "U". If I dragged the divider between the two panes to change the relative size away from what you recommended, that doesn't have to be your problem.

Resizing might still not be important enough given collapse, but please don't reject it only because of the extra design hit.

Answer 5

What will change on Ask Ubuntu?

Currently we have an extra top bar with the same style as the Ubuntu website:

Will this be staying? How will responsiveness be handled here?

Answer 6

Integrated site selector and left nav

Left nav vs. site selector status-review

Monica raised a great issue about the relationship of left nav and the site selector. We agree that there is room for improvement here. We looked at some models that attempted to merge the two, but we couldn't get it right. Also, it felt like a radical change. So, we are keeping this one on the back burner for now, but will likely come back to review it.

I was imagining something like this (but with unified styling and fonts, of course):

Make each of "public", "teams", and "communities" collapsible, and add access to all communities like we have now (link and search box), and you get an integrated "layered" approach of site, teams tied to that site, and site as part of a larger group. Everything you need to understand where you are with respect to all of these pieces is collected in one place. Because it's collapsible, it doesn't need to get in the way if a user doesn't care -- maybe you only ever participate on SO and don't care about that other stuff, or maybe your primary interest is your team and you don't care about SO users and tags, or maybe your primary interest is SO but you're also part of a small team -- or maybe you aren't an SO user at all but you participate on a bunch of other sites every day. This last group is ill-served by left nav today but could be well-served by it with this change.

Combined with the left nav being collapsible (thanks!), this would make the left nav a souped-up site selector and so much more -- that gets out of the way when you don't need it, just like the hamburger menu today.

Answer 7

I would like to contribute to the voting/favourite/accept button discussion with a little alternative that might be some kind of middle-ground. I too would prefer to simply let the sites keep their customized buttons, but if there's really no way to unite this with the goal of having a more standardized Q&A experience, you might at least want to consider giving them some room with regards to the colours of these buttons.

We all know stars are yellow and checkmarks are green. But even within those limits there's a already a broad spectrum of colours used for these buttons all across SE. Keeping those (and maybe even coming up with new ones for new designs) might be a comprise to still have a bit of customization there. And I'd even go as far as saying that the colours of those buttons matching to the rest of the site's colour palette might even be visually more important than some highly elaborate vector graphic.

This would also be much less of a design hassle, since you can (and actually should) often just pick from the site design's already existing individual colour palette (within a broad standard, of course, like "green" ticks and "yellow" stars, ...) without too much effort involved. At the same time you would have them still geometrically support whatever standardized Q&A experience you want to propagate.

Answer 8

How will the theme changes affect something like the Hot Network Questions list?

I've often found that while browsing the network through this sidebar, the theme inconsistencies grow more apparent. While I don't have a problem with different icons for upvoting and downvoting, my major issue is with the colours chosen for the links in the Hot Network Questions list. Since the colour of visited/non-visited links changes per site, it can be difficult to figure out which links have been visited already.

An example of this: Here is what the Hot Network Questions look like on Stack Overflow. Visited links are darker blue and non visited links are lighter blue. This is fairly standard and easy to parse.

Conversely, on Music Stack Exchange, visited links are lighter (the top link in the below image) and non visited links are darker. This means that every time I try to use the Hot Network Questions list through Music.SE, I have to think extra hard about which links I've already visited. In addition, the smaller amount of contrast in the links means it's harder to scan than on other sites.

I've used Music.SE as an example here as it's the worst I've come across in my opinion, but there are issues with other sites as well. With the colours of the links changing so often from site to site, it does induce some additional cognitive load to parse these.

So, can we keep this sidebar consistent?

Answer 9

Sticky Left Sidebar

At the moment the menu bar across the top is sticky, which is great if you get to the end of a long page and want to get back to home or something.

The left nav at the moment (in it's SO Teams iteration) scrolls with the page, which is ok at the moment, because there's not a lot in it. But as you go "adding value" to it I can see it becoming annoying to have to keep scrolling back up. So having it sticky would be great.

If it becomes longer than the page (especially if the SE sites selector gets added to it - I have a user on all the sites I think, so the "My CommunitiesW bit would be quite large), then it should independently scroll - as in have it's own scrollbar.

Answer 10

Can we turn off responsive design?

I use a 900px-wide browser window on the desktop. This used to work quite well, with the Hot Network Questions and such partially offscreen. When I wanted to access them, I would just scroll over to the right.

However, now the main content is squished to make room for the right rail, which I usually don't need. To fix this, can we have a (ideally per-browser cookie-based) setting to turn off the responsive design?

Update: There is apparently a "Disable Responsiveness" link in the footer. However, even with it disabled, the question search results are still in a smaller font than the normal list. This does not happen on other sites without responsiveness, e.g. Worldbuilding. This seems to have been fixed, but it would still be nice to make this setting apply network-wide, not individually on every site.

Answer 11

Most of discussion was dedicated to responsive design. As I understand responsiveness is discussed here only for mobile (and maybe tablet) devices, but this is not complete responsiveness, because we have laptops and monitors (sometimes with 1440p or 4k resolution).

As described in answer for status-declined question "Can SO have a fluid vs. fixed-width layout?" 50% of space for Full HD resolution is wasted. Situation is even worse for 1440p or 4k displays. Can we have fluid layout for everything bigger than tablet?