142

Thanks everyone for your feedback. The team has responded to feedback in the post Left nav, responsive design, and theming next steps . Check it out.

Ch-ch-ch-changes are coming. As you've hopefully read in our various posts on Teams, we are in the midst of some major work. We're introducing a new product, Teams (née channels), and doing the requisite research and design thinking to get it right. In addition, early on we realized that we have a unique opportunity to pay off technical debt that prevented us from serving Stack Exchange communities as well as we should have been.

As Donna alluded to in her blog post "Updating Navigation for Stack Overflow, Enterprise, and Stack Exchange Sites", we'd let our codebase and experiences fork and fragment. In the past, we would focus our efforts on Stackoverflow.com and consider network sites and Enterprise later. This lead to long delays in getting improvements from one to the the others. It also meant we were doing the same work over and over again (top bar anyone?). And, we didn't design things from end to end thinking about all of the permutations up front. As we started up on Teams we realized this had become untenable. This post will provide you some details around how 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.

Stack Overflow Q&A offerings (including Stack Exchange network sites) will be delivered via a unified codebase as a continuum of services. We will still have feature differentiation at times and the experience may be adjusted (for example Teams doesn't need the same level/type of moderation as public Stack Overflow) but it will be done intentionally in order to optimize the experience for the use case, not because we haven't gotten around to porting a feature to one of our products.

This is going to result in two key improvements for all of our users:

  • Greater experience consistency across the products
  • An increase in the velocity of bug fixes, improvements and new features

What changes are coming?

Left navigation (+ more)


We will be introducing a left navigation to the side of all Q&A experiences. As we looked at introducing Teams in the context of Stack Overflow it became obvious that we needed to review our overall information architecture. Donna covered the details in her blog post, so I won't revisit all that here. By adding the left nav we are gaining flexibility and scalability in our information architecture. And, though we know it's a bit of a departure from anything we've done in any of our products, this style of navigation is more amenable to making a responsive design a reality in the scope of our current and future offerings. see the GIF of our left nav and responsiveness in action

Stack Overflow with left nav

Stack Overflow + left nav


Responsive Design


People have wanted Q&A to have a responsive design for years and years. The addition of a left nav both requires and better enables a responsive design. So, we are deep in the process of creating a really great responsive site.

This will be done in stages:

  • First up is desktop (the mobile skin isn't going anywhere for now).
  • Common pages and experience get responsive treatment first. This includes question pages, ask a question, various question lists, search, user and tags
  • Once these are done we will release them for your enjoyment.
  • We will tackle the remaining experiences one by one and release them when they're ready. This includes profiles, review/mod tools, help center, etc.

Once all our pages are responsive we plan on doing some additional work to make sure everything works great on phones. At that point we will retire the mobile skin.

Stack Overflow in a small viewport (Click here to see it in action)

Stack Overflow with responsive design


Site theming


Every Q&A site has its own theme. But there is great inequality in the level of theming that we support. A few (~10) get Cadillac treatment, some (<50) are more like a Honda, while most (~100) are a Yugo. The reality is we created a theming system that we didn't have the design resources to fully support, thus the inequity. In addition, as currently defined, our theming gets in the way of releasing new features on the sites.

In order to deliver the left nav, responsive design and future improvements to all sites we've created a more standardized way to support theming. This will reduce the burden of supporting designs as we make Q&A improvements. The result is that most sites will see an improvement in the level of theming that they can get. While some sites will see a reduction. All of Q&A (Enterprise, Teams, etc) will standardize on this new theming scheme.

Example of a site theme (see more)


Illustration of a new site theme for magento.stackexchange.com


Details on theming (click image to zoom in)


Breakdown of themable elements


Takeaways

In the early days there were few rules for how theming worked. As a result, some are image heavy, with tons of customizations and some are very, very simple. The image above shows you what will be themable. However, there are several things that will now be standardized to follow the look and feel on Stack Overflow. Note: This primarily impacts the "Cadillac" sites.

Standardized items will include:

  • Navigation
  • Fonts
  • Buttons/Icons
  • Tags
  • Newsletter ads

The plan is to create designs for each of the sites that currently have themes and run those by the communities. We are starting that work this month (March 2018). Expect to see a meta post with details later in April. If you've been cleared for graduation but don't yet have a design, someone from the community team will be posting on your meta site in April to get some input so we can get your site themed based on your answers. We will start enabling the new design across the network in May.

When will you start seeing these changes?


Roll out plan

  • If you're in the beta for Teams, then you're seeing the left nav already and will see responsive changes later this month
  • We will start flighting these changes with SO user in April (there may be a way to opt-in)
  • We hope to roll out to everyone on SO in May
  • SE sites will start seeing them in May depending on the progress we make on themes

We know this was a lot to take in all at once, it's really three major things that are coupled together so tightly that we had to talk about it all in the same context. We know that many of you have strong, possibly mixed feelings after reading this, and we'd like your feedback. We're going to listen to everyone, discuss all of the input you provide and update here as we move forward.

Thank you for your time, thank you for your patience, and thank you in advance for remembering - we're human too.

  • 23
    This looks like fantastic stuff, I can't wait to see more of it rolled out! I probably shouldn't be reading too much into your brief example GIF, but I do want to note that responsive layouts don't need to have variable text-column widths, as they seem to in your mockup/example. If practical design-wise, it can be nicer to pick the component widths that are most readable/usable, and use variable padding to provide the flex between layout breakpoints. In particular, even if I maximize a window on my 4K screen, I should never got a 200-character wide text column: that's a readability disaster. – Jeremy Mar 12 '18 at 18:02
  • 9
    This looks great. But what about the recently vanished tag tabs on Stack Overflow? They were the best thing since sliced bread. – Konrad Rudolph Mar 12 '18 at 18:13
  • 19
    Teams... Teams.... Teams... this rings a bell. Bad bell. Something that failed. Those like me who are not new to Stack Overflow will always remember Teams as what Teams originally was. This is bad name for a new project. – Shadow The Curly Braced Wizard Mar 12 '18 at 20:03
  • 29
    Yeah.... Except I really dislike these changes tbh – K.Dᴀᴠɪs Mar 12 '18 at 20:48
  • 16
    "Every Q&A site has its own theme." cough cough – Mego Mar 12 '18 at 22:25
  • 12
    @Mego As I understand it, one advantage of the planned changes summarised in this post is that they'll enable newly graduated sites to get their designs faster - i.e. mitigate the very problem you're raising. – Rand al'Thor Mar 13 '18 at 0:17
  • 67
    I think you're trying to standardise too many of the things that give SE sites their own personality, and I suspect that those proposals will go down like a lead balloon with those communities that have put the effort in to heavily customise their sites. Nothing that you have posted above seems to provide any context as to why it is important to standardise those items. The restriction of fonts and graphics seems particularly petty, IMO. – Steven Rands Mar 13 '18 at 9:54
  • 37
    @StevenRands Standardizing the site design elements and layouts allows you to roll out changes very quickly across the network. Every time I ask for a new feature or a simple UI tweak, quick fixes become days-to-months of design work across multiple sites. Nothing get done. Dozens of sites have their own UI gotchas ("can't do that because {site x} will break"). Gross. If this lives up to its promise, it adds an agility to fix things quickly instead of letting "issues" get progressively worse until they finally justify the epic amount of work every change dictates. This is a good thing. – Robert Cartaino Mar 13 '18 at 16:18
  • 20
    @RobertCartaino Surely the goal should be to standardise things to improve the lives of developers whilst also retaining a suitable level of customisation for those sites that desire it? Of course there is a balance to be reached. However in my opinion these standardisation proposals swing too far in the "make the lives of devs easier" direction. Note that I am talking about the skinning/theming proposals, not the remainder of the layout changes described in the OP. – Steven Rands Mar 13 '18 at 16:56
  • 9
    Could you clarify that most (if not all) of the 100 "Yugo" sites are just the beta sites and don't get a custom theme at all. So, unless that's changing and beta sites are getting something, that "100" sites is really just one site design... right? – Catija Mar 14 '18 at 3:30
  • 59
    I'm going to repeat something here that I wrote in a mod chat a while: I'm frustrated, and I'm losing faith in Stack Exchange to be able to rise to the mission they've set themselves. When I see SE work on side project after side project, instead of helping individual sites succeed, it feels like they've given up. "There is nothing more we can do to help you. How about a new top bar?" – Aza Mar 14 '18 at 18:38
  • 20
    I dislike the extra space lost on the left - things are tight enough anyway. I cannot imagine how many lines of code are different for each site that has custom badges (maybe they can use graphic elements in the redesign). The "responsive" design looks to be neither responsive nor designed. For all appearances, once the redesign is complete it will look like a Junior High student created the site on Wix. SE should demand a refund from the contractor providing design services. – Gypsy Spellweaver Mar 15 '18 at 4:49
  • 38
    We don't need more clutter and "unifying" changes. Why are you trying to be some corporate network where everything is the same and nothing stands out with character. Let us focus on what we are here to do, Questions And Answers for people who need help in their profession. None of these changes help us do that, it really does the opposite. More effort should be spent on improving search and reducing duplicates and old information to make sure a user finds the most relevant to what they are actually looking for. – span Mar 16 '18 at 10:31
  • 18
    I deleted a few more comments here. Look, I quite empathize with the concerns a lot of you are raising, but you're not doing the cause any favors by being rude about it. Attacking individuals for trying to do their job here is a great way to get everything else you write ignored; making a reasoned argument for why something is a bad idea has at least a chance of doing some good. – Shog9 Mar 20 '18 at 0:04
  • 12
    I haven't been following this thread at all, @gnat. I'm here now because multiple users of those sites you purport to care about flagged the comments I deleted, and then reached out to me directly when they weren't deleted quickly enough. You & Masked think you're helping here, but I kinda suspect the folks who desperately need their fonts aren't thrilled about the strategy of continually denigrating the people who can, if convinced, keep those fonts around. – Shog9 Mar 20 '18 at 13:40

32 Answers 32

1

On Cadillacs, the Hondas, and the Yugos, I don't see the point of standardising on Yugos. As far as I know, the sites with the Cadillacs aren't pushing to get rid of them.

I'd suggest letting the Cadillac sites stay with what they already have. If designer-time and programmer-time is the issue, consider that it takes more resources to switch Cadillacs to Yugos than to leave the Cadillacs be. The designers did an excellent job with the Cadillac sites; the effort has been expended to good effect. Don't waste that effort.

-1

Let the user choose how to consume the content. If the goal is a unified style then select as the default style those features which percolate to the top in usage or votes that outsources the effort of exploration of styling to the wisdom of the Crowd on the Cloud. Still allow users to define and maintain styles applied on login.

I recommend fostering a community of sharing layouts and their advantages. This could be a new part of meta. This could be a new community subdomained style or theme or some other name that describes what is named.

The greatly varied input users are giving supports the idea that a user-style should be maintained. That is, if we can't learn from the beautiful implementation of the Web's foundational technologies to maximize accessibility by not restricting the user's agent. Attempting to restrict the user's ability to create and maintain a persistent style with which to consume the site is tantamount to restricting users' agents.

The site currently does an effective job restricting access to a graphical browser. Users have to learn enough about the technologies of the Web enough to develop a solution to consume this site via text. This feels horrendous.

Move the site to a minimal set of Web-Standards that prioritizes easy access via text that provides a foundation for the Web. Textual accessibility does not restrict ads. It rather refines the target market to whom ads are shown. Textual accessibility does not limit features. HTTP-headers may be utilized to select when a user wants the lightweight version of the site for data-transmission or viewing.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .