According to the changes outlined here: Left nav, responsive design, and theming next steps

We will probably be losing our voting buttons, fave button, possibly our use of Orbitron font, and reduced color/header image support.

Can we get a breakdown of what exactly we'll be losing? Or a time-frame on when we'll be able to see a development version of what we'll be losing?

  • 4
    On the bright side, we won't be losing our custom badge shapes. SE backed down on that one after very strong community feedback. (I know, I know, it's not much, but ...) – Rand al'Thor Apr 25 '18 at 21:36
  • 2
    @Randal'Thor What I find odd is that we'll lose custom vote buttons, but keep the badges, even though currently all those images are kept in the same sprite sheet. – user31178 Apr 26 '18 at 14:20
  • 4
    @CreationEdge 1) OMG. I never knew that was a thing, and that you can see all the customised buttons and stuff together like that. 2) I guess because people made more noise about custom badges and less about custom vote buttons. Maybe it's worth posting about this as an answer to the new main meta announcement? – Rand al'Thor Apr 26 '18 at 14:23
  • 2
    @Randal'Thor meta.stackexchange.com/questions/309349/… – user31178 Apr 26 '18 at 14:27
  • 1
    And now we know. Pretty much all of them – Valorum Sep 18 '18 at 23:50

Joe Friend kindly pointed us to the following example image in the comments of the Meta.SE answer:

Example image of Magneto Stack Exchange's new theme, with all descriptive text transcribed below.

Click to embiggen; the tiny text is legible.

Going through every bit of it obsessively, starting with the parts on the main question feed:

Subheader - background color or image.

Logo in subheader - image & possibly placement.

Body background color or repeatable image (pattern).

These three things together imply to me that we will (probably) get to keep the most recognizable bits of the theme largely intact. In particular, we will still have the starfield and one-winged angel thingy.

The footer is not visible in this example so it's unclear if we get to keep that.

Currently selected nav item colors and optionally left column background for edge cases like Gaming.SE.

This has to do with the left-nav. Looking at Gaming.SE, I have no idea what this is referring to, unless they just mean that they will allow it to have a blue background on that site. If so, I'm cautiously optimistic about our starfield here.

Primary buttons style.

The only visible "primary" button is "Ask question," and I'm not sure what the plural is supposed to mean here (possibly the Active / Featured / Hot /... tabs?). The other buttons which currently exist (Questions / Tags / Users /...) are going to be subsumed into the left-nav, so they're not talking about those. If we were Gaming.SE, I would be concerned about losing their cool-looking animated Ask Question button, but we don't have anything that weird, so this is (probably) fine.

Tags styling but simplified so sizing and shape is similar across network. Rounded corners are optional.

Our tags are boring anyway. Contrast Unix.SE, Emacs.SE, and Math.SE. This is probably a no-op for us.

Colors of links.

Refers to the main question feed. Questions will continue to be our peculiar shade of cyan.

On the question page:

Optionally some color accents, like dividers

Colors of links and optionally some other typography accent colors.

Meh. Orange links on meta are nice, I guess.

Finally, on to mobile:

Simplified styling for mobile:

  • No custom backgrounds
  • Smaller subheader with logo

There's not enough room for a custom background in this mockup. Shrinking the header is probably reasonable but we should make sure the logo scales down appropriately (and doesn't e.g. render the word "Fantasy" unreadable).

Other things we know and don't know:

  • We will be keeping our badges.
  • We will be losing our voting, accept, and favorite buttons.
  • Fonts are a definite "maybe." Orbitron in particular appears on the Ask Question button, and the only thing we know about that is that we get to "style" the button in some unspecified manner. The other buttons are moving to left-nav and will probably lose their fonts in the process.
    • However, if they do let us keep Orbitron for Ask Question, they might also let us use it for Active / Featured / Hot /... as well.
    • There is no indication that we can style fixed text like "Top Questions," but they're still thinking about it so who knows.
  • Updated 2018-06-12: The official word on fonts is:

    As mentioned, for most sites this means no change. However, 15 sites [including SFF.SE] use a custom font not included in the Stack Overflow font stack. Even these sites will see a very small difference. A few sites, will see a bigger change since they use a funky little font called for body or navigation (rare.)

    • When discussing SFF.SE specifically, this link was provided. Between the link and the above quote (which I'm having difficulty deciphering), I believe this means we are moving to Arial.
  • Based on the example image, it looks like we're going to lose vote/answer/view counts and accepted status (i.e. they will be replaced with a generic boxy style). There does not appear to be any official word on this at this time.
  • 13
    "We will be losing our voting, accept, and favorite buttons." That's a damn shame. Those, along with the background and header logo, are what make a Stack instantly recognisable for me. They really feel like an important part of our site. – SQB Apr 30 '18 at 10:58

You will lose the custom graphics and custom size of the upvote, downvote, favorite question and accept buttons next to posts. The custom graphics is specific to Sci Fi SE, and there's a recolored version specific to Sci Fi Meta. I have a customization that you can enable to get the traditional vote button graphics and size, with detailed instructions if you're using Firefox.

Note though that in exchange, with the new design, you gain custom recoloring of the simple triangular upvote and downvote buttons, in their active state on Sci Fi SE (but not on Sci Fi Meta).

You will also lose the per-site customized badge shapes.

You will lose the custom recoloring of certain smaller icons on the sites, eg. the icon for upvoting or flagging a comment, or the collapse/expand arrow icons used in many lists in auxiliary information pages such as the reputation changes page.

Note that in exchange, with the new design, you gain custom recoloring for some of those icons, such as the upvote comment in active state, on both Sci Fi SE and Sci Fi SE Meta, with different colors on the two sites.

Example image for the recolored buttons in the new design. Sci Fi on the left hand side, and the buttons on a typical non-meta SE site* on the right hand side.

(example on Sci Fi)(example on typical site)

We also gained something more important than the easily replacable vote buttons. This is something that web designers call “responsive design”, only done well instead of abused. (“Responsive design” is a very stupid word, but its meaning isn't bad.)

Responsive design means that the design isn't tailored to one particular target user, but instead the site is customized for multiple different user environments, especially different browser window sizes, and it will detect them automatically and choose the best design for the particular user. The reason why that term gained a derogative connotation is that many web designers abused the capability for evil (this happens with almost every tool web designers get). But the Stack Exchange overlords didn't. In an unprecedented move, they actually implemented responsive design correctly. (I'm not saying that it's perfect, but it's almost impossible to get it perfect.)

To see an example for how it's done well, enable the new design, then resize the browser window to narrower, to simulate how you'd see the site on a narrow upright mobile phone screen. You will see that the right sidebar will disappear. The right sidebar is nice, but it does not contain any elements essential for navigation. You will also see that in the top bar, the search box will be collapsed to a search icon, and your reputation will disappear. Note how the search function is still available, and so is every other functionality of the top bar. You can still view your reputation by viewing your user page with the user page icon, which is still on the top bar.

Now resize your window to even narrower. You will see that the left sidebar also disappears, but its functionality is still availble in the popdown menu from the menu icon on the left of the top bar. The “StackExchange” label also disappears from the top bar.

In both of these cases, the interface has adapted for the narrower screen, but all the important functionality of the website still remains available. (Web designers sometimes use the buzzword “responsive design” for this, but they shouldn't IMO.)

This means that users who must use narrower screens, either because of vision problems (zooming the screen to very large sizes so they can read it), or because they're on a mobile phone will be able to use the site better. This is important for those users. Such web design used to be hard or impossible, but it became possible (but still hard) after some new developments in browsers.

Most websites aren't like that. They either don't use the new browser capabilities to adapt to different window size, or worse, abuse it and react to it by making the site bad. In the first kind of websites, when viewed on narrower displays, it is common to see some elements of websites overlap or disappear, so that important navigation controls will become unaccessible. (I will not link to any bad examples here.) In the second case, the website deliberately adapts to narrower screens by changing the design, but it does so by removing the interface for some important functionality of the site. (A website I don't want to name, in the name of responsive design, deliberately hid the interface option for changing your login password unless you're using a very wide browser window.)

In my eyes, these changes are much more important than the custom vote button graphics, or anything else we will lose with this update. It's a good tradeoff: while the site will become uglier for some old users, it will also become more usable for some new users who were previously unable to use Sci Fi SE for no fault of their own. I think that gaining those new users to the community is important, and if you're an established user used to the old design, please give a thought to that and reconsider this.

Keeping a website working and testing it is hard work. You can see even from the above example how you have to test the site in various unusual browsing environments. The SE designers don't have infinite time available for maintaining the site, and I think their time is better spent now than they used to be on custom backgrounds and the Orbitus font. I'm not saying that you have to enjoy the new site design, or that you personally will necessarily gain something from it. I'm not saying that the new design is perfect. But please appreciate what it will do to new users.

(I cross-posted this second part of the answer to a new Sci Fi Meta question.)

*Sorry, “typical site” is a stupid in-joke that you might not understand. I'll explain it at the risk of spoiling it. There was a certain infamous old TV ad for a washing machine chemical, which showed a side-by-side example of white clothes washed several times with their brand of chemicals versus “typical” chemicals of the same sort. I'm saying “chemical” because I'm not sure if it was a detergent or rinse aid. This ad wasn't unique, other ads of the era also compared their brand to “typical” brand. Such ads were popular targets of mocking, and gained memetic status because of that. One particular ad that said not “typical” but “new washing detergent” became actually famous, because of a parody ad done by a professional in Hungarian TV, in which the guy in the ad called something inanimate (the clothes, the bottle of washing detergent, the washing machine, I can't recall) on a challenge by addressing to it from afar as if it could respond. That a professional could do such a parody shows just how memetic those comparison ads already were.

You must log in to answer this question.