Responsive Design Themes - What can sites customize and how can they get changes implemented?

Question

Update:

We've begun working on new site designs and the information below also applies to them. I've added a new section about it and adjusted some of the guidelines as they've changed a bit.

---

There have been a few questions here on MSE along with some on various child metas about how fixed/permanent the new site redesigns are. I'm posting a new question rather than answering so that we can have more real estate for dialogue (in answers) and because I was missing all of your pings from being on leave. So...

Are the current site designs permanent?

The answer to that is no. While the layout (where the elements are, the existence of the left navigation, etc) is fixed, we're happy to work with sites to get their specific designs/artwork more in line with what they want - within the layout restrictions - and understanding that it will take us a bit to get to the changes.

With the final transition of the entire network to Responsive Design on December 7th, we can start rolling out new features for the entire network - Custom Questions Lists and Saved Searches - and doing research into others, like updating user profiles to play nice with the new responsive layout, for example... but that doesn't mean we're done with the site designs - we have a bunch of graduated sites without designs and a backlog of very old beta sites that deserve some love and we're going to make time to improve designs on sites that already have them but are unhappy with how they turned out.

Our site doesn't have a design at all, what about us?

Graduated sites waiting on a design will start getting new designs - well - now. Anime's site design is in process as of April 2019 and the other nine sites currently in queue will be reached out to soon - and we'll also be reviewing any existing design discussions you may have had. The guidelines for what we'll be able to implement below apply to you, too! We're really excited to get these designs underway!

One note, while we love the majesty of sites like Worldbuilding, the time investment to create those illustrations is a bit beyond our scope moving forward. That doesn't mean all illustrations are out, though! We'll be looking to create designs more like those on The Workplace or themed background patterns like on Blender, or simple images like Travel.

Awesome! So, what can we customize?

What we're able to customize on a site isn't set in stone for the next 6-8 years but what we can implement now has been somewhat limited so that we could complete the network-wide rollout before Winter Bash (yet another feature that's simplified by this update!). Who knows, if you come up with a great idea now, we may come back to it in a year (or four) and say "yes". Even some of the things that are possible now weren't possible when we started this process, so this list of customizations is changing as we go.

Our main goal is to limit the amount of customization one site has so that the sites all have generally the same LESS/CSS base, making it less likely that changes to the network will harm a small subset of sites (or a single site), causing us to spend more time fixing bugs than working on new projects - which we have a huge backlog of we'd love to introduce to you. But, what this means is that if one site has an element, other sites can pretty easily add it.

For example, the Photography site's Photo of the Week box could be added to Graphic Design to show off the users' designs if that site wanted to host such a weekly contest.

Oooh, cool! I know what the site design needs - how do I ask for it?

I've been happy to participate in and respond to discussions about site theming across the network with the users who are interested in helping their sites get designs that better reflect their communities and allow them to be different from the rest of the network - which is one of the biggest complaints we've gotten. I understand it and I share your concerns and we want to help fix that.

If your site's users feel like there are ways we can help re-establish some degree of now-missing identity to your site, create a meta post and start talking about it on your site. Consider focusing your meta post on a specific part of the design - the background, the header content, the logo, etc. - as this will help limit the discussion so that it's not "everything is awful".

A few sites are currently discussing improvements to the design within these limitations and we're happy to see the collaboration and to work with the sites when we have the time to do so. Here are some examples:

• Database Administrators felt their new header design wasn't quite right, so they asked for ideas from the community on what would be a better representation.
• Science Fiction & Fantasy lost their dark theme and are brainstorming other options for their sidebar area that work with black text.
• Worldbuilding (they had their discussion before we redesigned the site and it really helped us know what was important to them).

My site seems to be missing something, but I'm not sure what - can I get an idea of what might be possible?

Look around at the sites that are currently in testing or live for examples of what we can implement. To save you some clicking, here are a few examples of specific elements that can be customized and to what degree:

Elements that appear on all sites:

• Header banners are required (you can't drop them entirely a'la Stack Overflow) and the dimensions are fixed but the content of them can be pretty varied. Do keep in mind that on some smaller screen widths (think mobile) elements like images are either dropped to not clash with the site logo or will be obscured by it. This is why some of the busier images seem to stop half-way across the screen when viewing on a desktop. Patterns or simple artwork is preferred here moving forward.
• Sidebars/backgrounds can have a light-colored solid, pattern/texture, or fade or even a combination. The left navigation text is black everywhere on the network and the navigation column does not have a separate color background, so the background must be light enough and without overly-distracting artwork so that it is of sufficient contrast and legible.
• Fonts are set network-wide with either a serif or sans-serif stack. Which fonts are in the stack may change as we're realizing the current stack isn't optimal for all of our sites, both technically and for design reasons.
• Colors can be customized to a degree (and many have been adjusted through this process). This includes buttons, OP indicator boxes, link colors (visited/unvisited), voting arrow colors, tag colors (background & text), question titles (in the questions list, not on question pages).

Specialty elements that are active on one or more sites but are not part of the standard theming:

• The Workplace (among other sites) - Artwork in footer.
• Photography - Photo of the Week box.
• Worldbuilding - their robot, Slartibotfast, was a major part of their site identity, so we were sure to incorporate it into the design by letting it float at the bottom of the page. Emphasis here is on the use of the floating element, not the artwork itself.

I'm sure I've left out some of the elements here. Feel welcome to use this post to point out anything I may have missed or to ask questions about what might be possible. I'll talk to the design team and get you answers.

Thanks so much! I know what I need now!

You're welcome! One other thing, when you start these discussions on your child meta sites, be sure to use the design tag so that we can find and track them easily.

Thanks so much for your time and effort - and your patience. We know this process has been hard and tiring and a lot of y'all have been disappointed (understatement of 2018?) with it.

Answer 1

While I'm actually surprised at how well you guys have been able to maintain the immersive feel of sites like World Building and RPG.SE (to be honest, the responsive theming turned out much better than I expected), I'm still disappointed we lost our themed voting/accept/favourite/etc. buttons. As a web developer I can think of several ways you could implement this with extreme ease so I'm struggling to understand the reasoning for removing them.

I'm not sure why I like them so much. I think it's the simple fact that without them, the page feels sort of... bland. Especially once you start scrolling, the only theming you can still see is the repeating background image, so it would be great to have the voting buttons keep that sense of theme flowing.

Answer 2

Is it possible for sites to include a couple of featured questions instead of a picture? Or should that be pushed as a completely different feature-request on Meta SE.

It will be a bit tricky to manage which questions end up there (since they select 1 picture for photography, but on post sites, there's enough space to fit a couple of questions). I know that there're already 'week' and 'month' tabs, but that's usually similar to a record of the last few HNQs (since it's decided by an algorithm), so it's likely that the communities don't really think of them as particularly high-quality posts.

It would be nice to have a place for members of the site to locally promote the best content of the previous month/week.

Answer 3

What about customization of the interesting questions color? It's yellow now, which is what SO uses, but excluding the bulletin box, some sites don't have yellow in the theme making it look rather ugly. Even worse, the interesting questions color is almost invisible on sites with yellow-based themes.

Is this an area that can be customized?

Answer 4

Let us turn off the hyperlink underlining, please =)

It just looks awful, and it plays off horribly when there's MathJax inside the link. (Which, yes, does happen fairly often, and it's not superfluous either.) It's a single-line change to the CSS and it should have minimal interaction with the rest of the page.

I understand, of course, that the decision to use underlining was driven by accessibility concerns, as stated in this previous answer, but that was basically a non-answer. I would propose, instead, that the dev team provides a clear set of criteria for the concerns that lead to a site's hyperlink CSS to fail the existing accessibility tests, so then sites have the option to propose a re-colouring (which no longer needs underlining) or keep the underlining.

Or, if that doesn't cut it, then please provide (either here or in the linked thread) a better explanation of what the concerns are: please work with us in solving that problem, and we can find a solution that isn't ugly and which doesn't conflict with the site's functionality.

Answer 5

On the front page, next to each question appears the number of answers to this question in a little box. The appearance of the box varies depending on whether there are no answers to the question, answers but no accepted answer, or an accepted answer. In the new theme, the color of the box in these three states is not customizable.

On mathoverflow, we used to have a different color scheme for these boxes. Here's a screenshot by Carlo Beenakker (see there for more discussion of this feature as well):

This color scheme had a lot going for it:

1. It made unanswered questions jump out more. In the current scheme, it's the answered and accepted questions which jump off the page -- the "dead" ones so to speak, which is kind of backwards.

2. The vote counts / answer counts / view counts are one of the most commonly-recurring screen elements on the front page, so customizing them added a good bit to the unique feel of Mathoverflow.

3. This seems like a very generic customization that many sites could potentially be interested in using, especially in light of (2).

This customization is not currently supported, but it used to go quite some way in defining the distinctive look of Mathoverflow, and I think it could go some way toward adding character to other sites if it were re-implemented and sites were interested in using it.

Naively, it ought to be pretty straightforward to implement -- simply make a the color of a certain screen element defined at the site level rather than hardcoded. After all, the color already changes based on whether or not there are answers and whether or not there are accepted answers, so there don't need to be any substantive changes to the programming logic.

EDIT: As pointed out by Martin below, this color scheme is also relevant to the question / answer lists on user pages, in addition to the front page.

---

Here are a couple of screenshots to illustrate how this customization used to add some color to the environment a la (2) above. Here's what the front page of Mathoverflow looks like now when you scroll down:

And here's what it used to look like (courtesy of the Wayback machine):

To me, the new version is rather colorless compared to the old one. I find it striking that even though Mathoverflow had a plain white background in the old theme, this one customization saved the site from looking colorless.

Answer 6

Allow for customization of buttons.

Like the Ask Question and the buttons in Review. (also Ask Question, Post Your Answer etc.)

Old:

New:

Note that there was a slight shadow (which I thought looked really nice).

Color is important as well, on Graphic Design (images above) we used to have a lot more of that pinkish color, now that seems to have been almost entirely replaced by the blue.

Our site really seems to have been stripped of it's identity (font, colors, layout etc.) and seems a lot more generic-like - similar to Stack Overflow or Meta or Super User.

Answer 7

I've been on a hiatus from SE, so please forgive me if this was covered in a different thread and I somehow missed it, but is it at all possible to have a permanent link to the homepage of the current site in the header? I'm not on a computer with graphics editing software right now, but something along the lines of a small logo-shaped button between the "StackExchange" logo and the search bar would be nice.

As it stands, I don't really understand the purpose of the StackExchange logo button: it doesn't take me to the StackExchange homepage and it doesn't take me to the current site's homepage, which are the two expected behaviors I could think of. Instead, it merely creates a pop-up that requires a second click to close/navigate away from, the sole content of which is irrelevant after reading once.

Currently, when you scroll down the page and want to return to the homepage of the site, we have to click a low-contrast "Home" link in the upper-middle of the page --- this is visually difficult to hit because it's low-contrast and doesn't have a hard border (e.g. the browser boundary).

Answer 8

On Mathoverflow, accepted answers get distinct background color. I find this really good, and miss this feature on other sites. Is there something wrong with keeping it?

As suggested by Martin, let me place a sample snapshot

Answer 9

When can smaller sites like Pets have some custom changes?

An official request to have the same feature as Photography. Can we have a photo of the Pet of The WeeK?