Please reconsider your decision on badges, and allow customisation per site?

One of my favourite features which sets sites apart is the wonderful range of badges we have across the network:

For me, these really give each site their own personality and character, and it would be great if they stay customisable.

Don't waste so much space on the left sidebar

Please, please, please, don't waste so much space on the left sidebar. Keep the left-sidebar as collapsible/slide-out/pop-over/drop-down. Don't have it visible 100% of the time. We care about questions and answers. We want to see Q & A. We don't want to waste a bunch of space on those controls.

Update:
A per-site user preference has been added which allows you to "Hide left navigation" on a per-site basis. You will need to go to your local preferences on each site and check the "Hide left navigation" preference. There's no stock way to set this preference network-wide. While I don't think this solves the issue, it does help.

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

Because I really don't like 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 an SE network-wide preference to "Hide left navigation". You will not need to set the preference on each individual site.

Can we at least select our fonts?

status-completed Check out the resolution to this question: Fonts and the new Q&A theming

I think the fonts give much of the feeling to a site, and may even affect usability. For instance, English.SE benefits from using a serif font to clearly distinguish letters and make IPA more readable. Likewise, Judaism.SE's serif font makes Hebrew phrases (which are very common there) look much better. And on Math.SE the serif font makes MathJax formulas blend in nicely.

This isn't to say that serif fonts should be the standard. Sans-serif is quite fine for StackOverflow and other coding related sites. Indeed TeX.SE benefits from its sans-serif to distinguish rendered TeX. Sites that use Unicode characters extensively, like Japanese.SE, will want to chose a suitable font too. The same applies to the code blocks of Codegolf.SE that often have to display special Unicode symbols for which the default font is inadequate.

List of sites that need an alternate font for reasons other than just wanting to be different

Non-Latin source texts

• Mi Yodeya (serif for Hebrew including vowels & other markers)

• Hermeneutics (serif for Hebrew and ancient Greek)

• Christianity (Hebrew + Greek)

• Islam (serif for Arabic esp. for diacritics)

• Hinduism

• Buddhism

• Literature (many scripts)

• English Language & Usage (Greek, occasionally Cyrillic)

Notation

• Code Golf (monospaced for programming languages with Unicode symbols)

• Math (serif to blend well with MathJax)

• RPG (serif to blend well with MathJax)

• Physics (serif to blend well with MathJax ─ feature request)

• Chemistry (serif for formulas with support for special chemistry symbols)

• Mathoverflow? (serif to blend well with MathJax)
  ^{already has styling, but have not chosen special font}

• Music? (font that has various music symbols)

• Mathematica? (font that supports its Private Use Area characters)

• HSM?

• TeX (monospaced to distinguish code from commentary)

IPA

• Linguistics

• English Language & Usage

• Constructed Languages

• Language Learning? (foreign scripts)

• English Language Learners?

Cyrillic

• Русский язык

• Russian Language

• Stack Overflow на русском

• Ukrainian Language

East-Asian

• Chinese Language

• Japanese Language

• スタック・オーバーフロー

• Korean Language

Feel free to edit this list to add other existing SE sites that need font support

Welp, that’s going to direly reduce my screen real estate devoted to actual Q&A

I have my browser set to use only half of my screen. Most sites work well this way. Stack Exchange has some of the right-hand navigation cut off, but I don’t need it on a regular basis, and I can see enough there to know when I should scroll over to get the rest.

A responsive design means that, instead of less-important material on the right getting cut off, real estate available to Q&A will be shrunk. Add in another section of navigation, now on the left side—where it won’t be cut off by the default scroll position—and the Q&A space seems likely to be quite limited for me. For reference, my <body> tag reads as having 1075 px in Chrome’s devtools right now.

Sure, it will be responsive, no more horizontal scrolling. Sure, most content is going to shrink down to match. But it means that the margins on the thing I actually care about 90% of the time are going to be that much tighter. Not wild about that; I will likely end up user-styling it away as much as possible.

Anyway, clearly no one user is going to sway you at this point; clearly you have the stats about how many users are likely to be affected (I remember seeing them when the ad size changes happened), but I wanted to point out that this isn’t going to be all joy and glitters.

An actual suggestion: collapse the left nav before taking anything away from Q&A

Make the “collapse point” demonstrated in the video identical to the current fixed width of the Q&A section (from the stylesheet, #questions,#answers{clear:both;width:728px}). In the video, the left navbar collapsed only after the Q&A section got to be what seemed much narrower than that, which means the left navbar is stealing real estate from Q&A. Stealing real estate from the Q&A is badwrong! Don’t do that.

...better yet, just make the navigation always collapsed. Or give us a user preference to make it so. Being able to toggle it collapsed or not, as suggested elsewhere, would be nice, but not if I have to do it every time the page loads.

Please don't be so restrictive on the theming

It's one of the things I love dearly about the SE sites. The in-depth theming really sets SE apart from other generic Q&A sites and gives each SE site a very strong identity and sense of community (don't underestimate the importance of that!). Take a look at RPG.SE, for instance:

That's beautiful. It will be a very sad day if we lose this. I hesitate to say this lest I cause us to miss out on some other theming feature, but at the very least, would it really be that hard to allow us to keep our themed voting/favourite buttons?

More specifically...

I'm only using RPG.SE as an example (because it's a great example), but if I had to pick three specific features I most want to keep they would be (in no particular order):

• The themed voting/favourite buttons
• The large header image (because a small image stuck inside the header won't be anywhere near as impactful)
• The imagery around the navigation buttons (though if the navigation is moving to the left side I'm not sure if that's relevant)

Special mention goes to the repeating background image, but since that's already a planned feature I'm not worried. Additionally this answer is intended to supplement Adám's fantastic post about the fonts.

Regarding mobile...

I rarely use SE on my phone, but looking at it now I'm rather disappointed with how very generic it looks. I'm assuming when the new site goes through for mobile it'll at least have custom colours. I would also want to see the same features as on PC but I suspect the large header image would have to be a much smaller cut-down version, and perhaps the repeating background image wouldn't be visible depending on how large the mobile screen is.

I'd need to know more about how the new site will look on mobile to be able to make any real suggestions, unfortunately.

Please reconsider your decision on voting buttons

The voting buttons are an ever-present aspect of a bunch of sites' graphical identity, and they pull a disproportionate amount of weight in making the theming feel like a complete skin rather than just some surface-level attributes. My main site has fairly bland voting arrows and they're really a joy to see in the sites that do have them.

It would be a real shame if these were lost:

Status: as per the follow-up thread, this is currently status-going-away, and indeed

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, you know... =(. I rather disagree with the "should be shared" aspect - instead, I see "site that has gorgeous voting buttons" as a strong indicator that I'm on a Stack Exchange site (with the associations that has regarding the quality of the content). But it appears that SE places less value on those aspects. Oh well.

On question pages, prioritize the right column over the left.

In the animated images, the right column always drops out first, and then eventually (as the window narrows) the left column is replaced by a toggle control. When looking at an individual question, though, the important stuff that isn't Q&A itself is on the right -- age, last active, and especially linked and related questions.

When I'm looking at a question I care about that stuff, not about other tags/users/etc over on the left. Please don't sacrifice the useful right-column information to the stuff we don't care about right at that moment from the left column.

And please don't do this by keeping both around and making the actual Q&A part unmanagably narrow. This is a case where the left column should be the first thing to get out of the way.

A broader change that I'd like, that would also accomplish this, would be to always make the left column collapsible, like in the narrow case in the animated images. If I can always collapse it -- because 95% of the time I'm not going to use it anyway -- then I automatically get the desired behavior on question pages.

Separate from my other answer, since that one is a bit of personal tragedy and this one is a more generally-significant issue:

How is MathJax going to be affected?

MathJax doesn’t really work responsively, can’t work responsively, so far as I know. As it is, you can easily define MathJax that extends past the space allotted to questions or answers, awkwardly sliding under the Featured On Meta box and Hot Network Questions. On a fixed design, a conscientious questioner or answerer could avoid that situation by making sure their MathJax doesn’t fill that space.

This comes up a lot on the RPG Stack, where \begin{array}-based tables are sometimes used, and sometimes get rather wide. For an example, this answer quotes a table copied from D&D 3.5e’s System Reference Document, and it just barely fits in the (currently fixed) width available on the desktop version of the site. A different fixed width could be accounted for by adding more lines and wrapping earlier, but MathJax requires doing that manually.

Another example is this answer, which has a table of various options meeting the criteria in question. Notably, a couple of the lines (the “citadel elite” and “prestige bard” entries) have manual line-breaks added to avoid extending into the right-hand navigation. For posterity, it looks like this:

If I remove those line breaks, our result is this:

You can see how Shattered Gates of Slaughtergarde is long enough to extend out into the Related questions section of the website, with the green box indicating 1 accepted answer for “Is it possible for a Cleric to catch up on spell levels not gained because of a prestige class?” covering the lower half of “rgard” in Slaughtergarde.

On the mobile version of that site, these wide tables cause a horizontal scrollbar. Not ideal, but workable. Nothing gets covered or blocked by other content, is the big thing, which does happen currently for over-wide MathJax content on the desktop version.

We are reunifying all our products (Stackoverflow.com, Stack Exchange network sites, Stack Overflow for Enterprise and now Stack Overflow for Teams) around a coherent design and single codebase.

Absent from this list is Area 51. Area 51 is an important area where all new sites are created - something critical to your business model.

As it stands, the site is very outdated - will it be included in the new codebase as well?

Notice the old navigation bar, the lack of global log on, a highly custom layout etc.

Allow me to be the first to say this is a pretty lame cop-out that has an obvious, albeit difficult programmatic solution.

Have you guys considered that cool themes might be one of the things that actually set you apart from other generic Q&A sites and having awesome and complete themes like what Jin dreamed up on Christianity.SE make for a better user experience than being able to see stuff when I shrink the web page?

Also, does a lack of an expectation of a cool theme (because something that looks like what I can do in 4 minutes on a wordpress blog is not cool) affect the morale of the core group of users on the newer sites? I don't think I would have tried half as hard on Christianity.SE if I knew that graduation meant "beta" is going away.

All I'm saying is you're sucking the leaven out of the cake and you probably will only wind up with flat cake, viewable on a tiny screen.

On a completely opposite note, is there a responsive design for big screens? Like 4K projections?

What is the semantic difference between left nav and the site selector? Should they be merged?

The new left nav includes a mix of site-specific stuff (tags, users) and teams. Teams are implemented as being site-specific, but from the beginning some of us have asked about (actual) teams that cross sites. You could imagine a team having a presence on SO and DBA and Server Fault, for example. Right now only SO gets teams, but if that expands beyond SO you're not going to want that group of people to need to go make three different SE teams.

Logically speaking, a team is a mini-site, not a subset of a site. Navigating between SO and a team is like navigating between sites.

Which raises the question of how this site selector is different from all other site selectors the site selector we already have.

Does it make sense to unify them? In fact, wasn't Jobs (then called Careers, I think) in the site selector on SO at one time?

This is a question, not a proposal. There's probably some piece of design intent or information architecture that I'm missing, that would make this all clear and logical if only I had that clue. If so, I'd like to learn it.

Don't squish search bar into oblivion

It seems like the top bar, particularly the search box, isn't really responsive at all (at least in your animation). This leads to the search bar being way too small as in this frame where all you can see is part of the S:

With regards to the Cadillacs, the Hondas, and the Yugos, I have wondered for a long time why we don't allow sites to theme themselves through their own metas. This would involve creating an allowable set of graphical elements (with constraints), and giving site moderators the ability to upload graphics and change color schemes.

Given reasonable constraints, this allows every community to design itself, while still allowing you (the SE devs) to unify your process. You will wind up with beautiful, clearly differentiated designs across the whole ecosystem, all without destroying any of the consistent, unified functionality that you are trying to create.

This new design is 164px wider due to the new left sidebar as far as I've seen from the Teams beta. Assuming that not everyone has SE open fullscreen in wide monitors, the site should still be as useable as now if the screen is only as wide as the current design. Wide high-resolution screens are pretty common now, but they're also really useful to put things side-by-side, so it doesn't mean that space is available.

The right sidebar is more important in some contexts than the left one, but you're hiding it first in the responsive design. Monica Cellio already mentioned aspects of this, but I'll add a bit more on this.

The left sidebar contains the links to the homepage, the questions list, tags, users and jobs (ignoring Teams for now, as most users won't have that). That some really important links like the homepage and questions, and some that are likely used much less like tags and users. It feels like a lot of wasted space for the few truly important functions there.

The right sidebar is a mix of extremely useful items like favorite tags, and expendable stuff like Hot Network Questions. It also contains e.g. the "How to ask" section on the Ask Question page, and likely some other useful stuff on other pages I can't think of right now. The favorite tags element is probably the navigation tool I use the most often on sites where I have multiple favorites defined. On a few sites, the right column contains a professional-advice disclaimer that is very important to the members of those communities.

In your new design, the sidebar is hidden early, and in this case it really shouldn't contain any elements that are very important. Currently you have two sidebars which both contain important elements, and that means important stuff gets hidden the moment your window is narrower than the maximum width of the new design.

If you decide to stay mostly with the design as proposed, I think the non-fluff elements of the right sidebar should either be moved, or have alternative forms once the design gets too narrow for the sidebar. Otherwise the site becomes far less usable on narrow windows.

I actually like the idea of the left menu bar, especially with modern desktop/widescreen displays, but agree it should be collapsible. It's a waste of real estate the moment someone uses more than one window (or does something nutty like this) - which is someone working on a problem is going to do. That's an extreme case, but it gets worse if say, someone's snapping 4 windows to a screen or more.

That said, this feels like a great chance to flatten out navigation to the other parts of the site - things like meta and chat feel like a more natural fit for the new side bar - and it's worth considering if they could go there, especially with sites without teams/channels. It's kind of odd to have to go to a little icon in the corner, meant for site switching, for things integral to the site.

And while I do get why getting rid of as much site customisation as possible - I do feel that those, badges and icons go a long way towards 'distinctiveness' - and these are important to people. While from a technical perspective - it's probably simpler, I think the special badges, icons and such are worth keeping from the perspective of the community. Changes should, hopefully add on to, rather than delete things that folks are used to.

Also, once these changes are decided on (I do hope some of the input here's taken!) could we have an "official" walkthrough of them, like I did for the 2017 new top bar on MSU? It's a much more significant set of changes than the top bar, and there will be many people going EEEK!

As noted, this is a terrible idea. The left sidebar is not what this site needs, it is a step back, we may as well just start making geocities websites and pretend like its the early 2000's again if this is the direction that design is going.

PLEASE do not use this approach. It is dangerous to damage the flagship product in order to test the channels feature, and this would be damaging. It would literally be removing a large section of the most prominent part of the viewing screen. Put simply, this change will make the site harder to use.

While I'm happy to hear about this update and the beautiful responsiveness of the redesigned sites, I've got to disagree on some of your design choices. Some of these have already been covered by other answers, but I'm just stating my opinion here.

1. Why standardize everything? Things like fonts, badges, up/down vote arrows and custom banners are the best part of each SE site and make each one of them different and peculiar. The first time I took a look around I was amazed about the dedication in creating such sites with their own personality, and it would be a shame to lose it. Please, don't throw these details away! Don't make SE look like a boring collection of identical sites.

2. A non-collapsible left navigation bar for things like "Users", "Jobs" and "Tags"? Why? You know how many times a day I use those pages? Zero. I don't really remember the last time I visited one of those, so I don't understand why anyone would like to have all that space cut off to just hold useless links. Not to talk about the little space left for the actual body of the site, which looks suffocated by the presence of left and right bars. Looking at the GIF you guys provided as a demo of the responsiveness of the site made it even clearer: if I have a ~500px or ~1000px screen width there is no difference in the size of the actual body of the site, because on one hand the left bar is gone but the screen is narrow, on the other the screen is wider but the sidebar eats out the additional space. What am I supposed to do? Write my own user styles to get rid of those bars? I have a wide screen because I like to do more than one thing at a time, and use more than one program at a time, not because I want to use my browser full screen and have web pages fill all the existing space with content.

3. The top navigation bar looks way too clumsy on narrow displays. There are two million icons and a search bar the size of a grain of rice, plus a menu button which only contains the same left navigation bar you have on wider displays. Why collapse everything up to the point the top bar is just a mess full of icons? Why not move some of those in the menu instead? Icons like "Help Center" and "Other SE sites" are basically up there only to waste space. I personally clicked them maybe twice in my lifetime.

   EDIT: looks like Joe already acknowledged this, and changes will be made to the currently proposed style.

How will the changes to design affect chat?

Chat rooms that belong to a certain site also get a theme when the site gets a design. Will this still be the case?

The main problem I see with left navigation is that I don't see anything of value in that left nav bar. I don't see anything I would ever actually need to click on. Yet this is being given priority over the right side, which I use all the time. In fact, the entire reason I've said I wanted responsive design was so that the right side bar never goes off the screen.

We're here to read questions and give answers (and vice versa). Not teams (whatever that even means), not jobs, and not to check out users. And, if I'm interested in a particular tag, I'll search for it. Everything in that left nav bar seems entirely useless to me.

My current plan is just to manually hide that bar if you force it on me. It seems to just be wasting space. I hope you will make this unnecessary by moving the stuff from the right into the left bar, if you're going to add it.

Two things:

1. Please don't make the sidebar appear to be way bigger than the content actually inside it:

The way it is designed now makes it look like it is going to take up 33% of the screen, while the links only take up a portion of that apparent area. Combine that with the fact that it is stuck to the left edge of the questions area, and it gives the feeling of a super cramped view. As someone else said before, this is not 1990s Geocities. Move the sidebar to the left side of the viewport (sticky menus should be on the outer edge of the viewport, not the outer edge of the content).

At the very least, if you won't do that, let us collapse it to some icons and no text; like Makyen (and others) have said, we want to see Q&A. Stack Overflow is a Q&A site. All your other offerings and business models depend on users coming to SO for a quality Q&A experience. So take care of that first.

2. And I really can't stress this enough. Don't ignore chat

   Chat does not resize correctly shows that chat is in a dire need of a responsive layout fix.

A number of Stack Exchange sites have specialized support for non-standard types of post formatting. For example, on Japanese.SE we have some custom JavaScript to add ruby to our posts. We've used this all over our site, and without it the site will essentially break.

Since site customization is being reduced, I'm nervous that these might get hit with the feature removal bat as well. Could you please reassure us and let us know that these site-specific customizations are not going away as part of the redesign?

Since you guys are overhauling this system, can I make one small request? Allow any user to use the base SO theme on any site. I personally think that it is a lot cleaner than the other themes, and I quite like how it looks.

I made userscript that replaced all the css files with SO's files and it turned out to be fairly easy at the moment with the current HTML architecture since you guys helpfully used the same naming convention for all your css files. With the new system, it will likely be easier. However, if this was baked into the new themes, that would be even better.

Specifically what I'm thinking is that there would be an option in site settings that is just a checkbox like [_] Use Stack Overflow Theme. If checked, then on page load, the server pulls in the SO.css files instead of site specific ones, and Bob's your uncle.

Would this be feasible to implement?

Standardizing classes, elements, names and what not to allow for unlimited styling choices "A good thing"™, forcing every site to look/work/feel the same is "A terrible thing"™, just as terrible as 80 column code blocks and having more than 66% of the screen white on either side of a 16/9 monitor.

Imagine how much wasted space is on my Ultrawide 21/9 monitors.

Is MathJax staying as-is?

Relevant, yet not the same. Given all those major changes that are coming, perhaps it's time to leave MathJax behind and move to a newer and faster service (e.g. Katex), or is it too much work to do for too little gain? Swapping services might indeed be a bit of an overhead, but it might be worth it in the long run.

The Jobs and Teams sections won't be present on non-SO sites, right?

I honestly hope that Jobs and Teams won't be there on other SE sites. If that's the case though, what is that big navigation bar going to be populated with, apart from Users, Tags and Home?

General remarks about the impact on user experience

As other answers to this thread noted, standardizing everything impacts user experience dramatically, albeit improving the loading time of the page infinitesimally. I don't think it's worth it sacrificing so many nice, small things that make the overall site more friendly to the user. While I do agree with standardizing things like navigation, giving up on vote buttons, fonts and badges is just too much.

Apart from this, the leading navigation bar should really be collapsable, given that it's not really relevant for everyone and it really takes a lot of space.

I don't understand why so much time, effort, and real estate went into a menu I almost NEVER click on, when it could be going to information I read.

It's unclear how this affects sites in beta?

As someone who partcipates a lot on a "Yugo site" I welcome the interest in this design being changed. But it's not clear how this affects all the beta sites like ours? Can we have more details on what's actually happening here?

• Will all beta sites still be "beta" branded?
• What will this look like, etc?
• How does it affect the chances of actually getting out of beta?

I assume the reason for not collapsing the left-bar is to draw visibility to Teams and increase conversion rate. The reason for standardizing design is to save on development/design costs.

Thank you.

No sarcasm. Any way you can stay (become?) profitable without lowering your ad quality or charging me money is fine by me. Stack Overflow provides a valuable service free of charge. Stack Overflow needs to make money to continue providing said service.

There's no such thing as a free lunch and I think this path forward is better than the alternatives.

I'm not sure if you posted the right picture. There seems to be a large amount of excess padding on the left, most likely due to a problem with the CSS style causing it to display vertically instead of horizontally (highlighted in red).

It's surprisingly obvious that this left padding when added to the current column we have on the right exceeds the width of the valuable content in the middle.

I've gone and hidden this left-padding to illustrate how StackExchange could look if this pressure were to be alleviated. Notice how the content in the middle becomes more prominent:

I apologize for resizing the images I've linked. I wanted to ensure that they would fit within the small space in the middle without too much distortion.

Please announce this prominently to users BEFORE it changes

Ok. This is a bit late, but Today I got the 'June 2018' UI change. I always need some time to adjust, and it would make my life a lot easier if I was greeted with a popup / hint / link somewhere explaining the changes; and ways to change stuff back (if possible).

When Google makes bigger UI changes, it almost always explains the changes or even announce the changes so they don't hit that hard when they arrive.

Could you please, please, please next time announce (in the face) it before it happens?

For example: to switch to the 'new' UI:

Since the changes of the design I can no longer vote the review lists, specially if I do not want to vote for approve.
The buttons do not scroll with the page but freeze on the screen when you scroll.

I already had this on a computer with a smaller screen, now I also have it on my full size laptop.
It would help if the buttons would be fixed to the page, so they scroll with the page underneath, but better still to have them on the left of the page, which is always accessible.