9
\$\begingroup\$

As part of implementing the new unified themes across the network, we're gradually rolling out updated site themes for each site. As of today, we have enabled your updated site theme for testing.

If you can't see it right now, that's by design! This is a very early test implementation of your design and we need your help finding issues with it before we make it live for everyone permanently. So, keep in mind, there will be things that need fixing! We'll address those things as we can.

If you'd like to review it, here's how:

How do I enable it?

Click here and check the "Beta test new themes" option. This will turn on the new theme for all sites that have one in testing, including this one. Here's more info on how to opt in. You can uncheck the box to revert to the older theme until the site is live for everyone. Note, while turning it on is immediate, it will take a few minutes to revert to the old view - but it will go through!

What type of feedback do we need?

On this post: Bugs related to this site's design elements

Please help us look for issues/bugs related to the theme design and how we have mapped the old theme to the new. This needs to be done within the limits of the new unified theme.

This could include colors of sections of the design or text, problems with JavaScript add-ons (if applicable), the logo or top banner appearance or other artwork.

You can also feel free to ask questions about the new layout if you're unsure how to navigate it.

On Meta Stack Exchange: General concerns about left nav or theming

There are some things that are definitely changing everywhere and can't really be adjusted on a per-site basis. A few of them include:

  • Top banner is shorter in height, so some artwork has to be adjusted along with some logos.
  • Left Navigation is active everywhere (but can be collapsed into a menu by visiting your site preferences - instructions here).
  • Responsive layout is active, which lets the site adjust as browser widths change - no side scrolling (some pages haven't been updated, yet, though). For now, if you prefer the scrolling, you can disable this by clicking the "disable responsiveness" link in the footer.
  • Many site elements including tags and voting arrows are standardized across the network.
  • Link underlining is active. In an effort to make links more visible, they are now being underlined.

If you have concerns or issues regarding the left nav or the overall approach we are taking to theming, then this Meta Stack Exchange post is the right place for feedback.

As I mentioned earlier, there are some unique design elements like voting arrows and tags that are being standardized in this process. Keeping these custom elements makes our ability to maintain the sites too complex and, while we're very sad to see them go, we're in a difficult position of needing to make the site designs work together so that we can continue to address feature requests and bugs that will make your Q&A experience better. This is addressed in a Meta Stack Exchange post if you want more detail.

What new themes?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background). To follow along with the rollout of these new themes, go here.

Thanks so much for your constructive feedback!

Oh, Who am I?

If you don't know me, I'm one of the Community Managers here at Stack Exchange. I'm here to listen to your input and convey it to our Design team for responses and fixes to bugs. I'll do my best to respond to your concerns and explain whether changes we've made are bugs that can be changed or if they're by design and why.

\$\endgroup\$

9 Answers 9

Reset to default
10
\$\begingroup\$

Generally, I like the new layout. I'm not fond of side bar menus because the cut into the main panel width & make the text there crowded, but as long as I can turn that off, it's okay.

As pointed out by others, the typography of the logos need some work. If I had to generalize, I'd say the typography for "Game Development" looks inconsistently 'weighted':

  • the vertical stem of the 'p' has different widths above & below the baseline
  • the line used for the 'hole' of the 'a' is right flush with the line used for its 'cap gap', but the line used for the 'hole' of the 'e' is not left flush with the line used for its 'foot gap'
  • the height for the horizontal cross piece of the 't' is narrower than any other horizontal strokes (the 'a' cap, 'e' footer
  • in general, the vertical strokes of the letters seem inconsistent

Here's a first pass edit:

enter image description here

There are still some issues:

  • The 'G' needs works - it doesn't seems quite as capitalized as the 'D'

  • the 'n' is a bit wide

  • the kerning isn't consistent

    Note: it seems we can't load .svg files - so this is a rendering & may not be pixel precise with the real file.

\$\endgroup\$
7
  • 2
    \$\begingroup\$ Great critique of the inconsistencies in the letters. \$\endgroup\$
    – Almo Mod
    Oct 30, 2018 at 17:12
  • 1
    \$\begingroup\$ @Almo Thanks. I suspect the font is a custom job - I tried to query it on identifont & fontsquirrel & nothing really came close. It shows promise, but needs some revisions. \$\endgroup\$
    – Pikalek
    Oct 30, 2018 at 18:27
  • 1
    \$\begingroup\$ Argh! You're right, now that I can see these things. In your revision, kerning can be improved around the "opm" and the "v" (tuck the e's in closer). \$\endgroup\$
    – doppelgreener
    Nov 1, 2018 at 15:17
  • 1
    \$\begingroup\$ @doppelgreener Yes, I agree with the 'opm' kerning. 'v's can be trickier due to the slope - not saying that something couldn't be done, just saying it's more challenging there. Not sure if it's their file or my editor, but when I opened it, it was laid out / grouped ... oddly. Further edits are likely to be far more time consuming than what I've so far. \$\endgroup\$
    – Pikalek
    Nov 1, 2018 at 15:30
  • \$\begingroup\$ Yeah, no expectation you update this further yourself. It's an excellent proof of concept. \$\endgroup\$
    – doppelgreener
    Nov 1, 2018 at 15:31
  • \$\begingroup\$ I like the inconsistency in the letters. I think it is a metaphor for game development itself, where nothing is 100% perfect. \$\endgroup\$
    – starikcetin
    Nov 13, 2018 at 18:09
  • \$\begingroup\$ We've rolled with these refinements. It'll go live in the next build. It looks great, nice work! \$\endgroup\$
    – Aaron Shekey
    Nov 29, 2018 at 23:14
8
\$\begingroup\$

Visited links just look like underlined text, which doesn't seem like great UX to me. Their hover effect is also almost indistinguishable from the default text color.

enter image description here

I didn't bother looking at the CSS, but I can't really tell if there even is a color difference there.

\$\endgroup\$
5
  • 2
    \$\begingroup\$ Good catch. Given some of the other problems users have had with links / buttons & colors, starting with a distinguishable coloring scheme would be preferable. \$\endgroup\$
    – Pikalek
    Oct 31, 2018 at 14:01
  • \$\begingroup\$ I agree that could be confusing except underlines aren't allowed in out Markdown other than as links. The standard on the sites is that unvisited links get slightly lighter on hover and darker on visit. \$\endgroup\$
    – Jon 'links in bio' Ericson
    Oct 31, 2018 at 20:37
  • 4
    \$\begingroup\$ I know that our markdown doesn't allow underlining, but not everyone might know that. I'd still expect links to stand out from text with also color, not just underline. \$\endgroup\$
    – user35344
    Nov 1, 2018 at 4:46
  • 5
    \$\begingroup\$ @JonEricson It would still be preferable for us to not have such a dull link color on mainsite. Most sites choose to have distinguished colors for links for good reason to help them stand out, on top of underlines or what have you. \$\endgroup\$
    – doppelgreener
    Nov 1, 2018 at 15:07
  • 5
    \$\begingroup\$ I'd agree, a stronger colour cue here would be useful. The meta theme's bright orange for unvisited and brown for visited remains clearly scannable in both states (though visited-hover lacks a visible change here too) \$\endgroup\$
    – DMGregory Mod
    Nov 1, 2018 at 15:07
5
\$\begingroup\$

The "META" text in the meta logo could be improved

header logo for game development meta

Maybe it's just me, but I feel like the text for “META” doesn't actually fit in well. It's super dark (being the only source of black in the header) and it's squared unlike all other text on the page. It strikes me as a bit like a first-draft pixel font games often have before later revision to style and color.

I think it'd be improved by:

  • using a dark grey we see in the bottom cube on the left, not pure black
  • getting very slight curves added to the letters, like the "Game Development" text has. The old game dev meta logo uses the same font for the "meta" text, this could do similar.

OTOH the fact that it resembles exactly what we put into our games at first is kinda funny, and I don't mind that.

If this isn't just me, I'd be curious what others think could/should be done to improve this text, if anything. Maybe even if it does look like first-draft text that's kind of perfect.

\$\endgroup\$
2
  • 2
    \$\begingroup\$ I'd say that the "D", "a" and "e" letters in "Game Development" look a bit out of place, because of the space difference inside the letters (the holes in the middl of the letters, don't really know how they are called..). \$\endgroup\$
    – user115399
    Oct 30, 2018 at 13:25
  • \$\begingroup\$ Sticking with the meta typeface, but I switched to the same gray as the cube. It'll go live in the next build. \$\endgroup\$
    – Aaron Shekey
    Nov 29, 2018 at 23:16
4
\$\begingroup\$

Overall, I like it (I love that the UFO/wireframe weirdness is gone; apologies to whomever made it but it just never did it for me)...

...Except for the logo text. The fact that some letters have holes and others just have lines where the holes should be (like the "a") makes me think of a badly-scaled piece of pixel art. It makes the weighting of various parts of the letters look very uneven, to me.

Also, on the main site the baseline for all the letters is four pixels above the nearest background grid line. On meta the baseline is six pixels above (probably because of the need to push it up to fit the "meta" tag underneath).

\$\endgroup\$
3
  • \$\begingroup\$ Spot-on about the holes/lines thing. \$\endgroup\$
    – Almo Mod
    Oct 30, 2018 at 15:35
  • \$\begingroup\$ I just noticed that the meta logo is a .svg - so maybe it's a scaling / rendering issue? \$\endgroup\$
    – Pikalek
    Oct 30, 2018 at 16:48
  • 1
    \$\begingroup\$ Arguably, "a badly-scaled piece of pixel art" is on-theme for the kinds of issues we help solve... ;) \$\endgroup\$
    – DMGregory Mod
    Nov 1, 2018 at 15:32
4
\$\begingroup\$

The ok button on the top left corner of the answer region at the bottom of the page looks a bit weird.

Maybe I'm the only one noticing this, maybe not, but I just wanted to report this since it looks a bit out of place.

I like the new style overall, there are just some things that could be improved, as previously explained by others.

\$\endgroup\$
7
  • \$\begingroup\$ I can't reproduce. What browser/OS are you seeing this on? \$\endgroup\$
    – Jon 'links in bio' Ericson
    Nov 16, 2018 at 18:43
  • \$\begingroup\$ @Jon Ericson I'm using Windows 10 and the Chrome browser \$\endgroup\$
    – user115399
    Nov 16, 2018 at 19:18
  • \$\begingroup\$ Hmmm... I still don't see it. Is it possible you have an extension that might interfere with this? (Seems unlikely, but you never know.) Maybe try changing window sizes in case it's related to the way the responsive design works? I'll put it in the list of things to look at, but it might not be something we can fix if we can't reproduce it. \$\endgroup\$
    – Jon 'links in bio' Ericson
    Nov 16, 2018 at 19:48
  • \$\begingroup\$ @Jon Ericson I don't seem to be able to make the "Your Answer" popup show up anymore.. \$\endgroup\$
    – user115399
    Nov 16, 2018 at 21:00
  • 1
    \$\begingroup\$ Ah. You need to have less reputation on the site. I tested by using a sockpuppet account I have just for this sort of thing. I could downvote you a few times. ;-) \$\endgroup\$
    – Jon 'links in bio' Ericson
    Nov 16, 2018 at 21:35
  • \$\begingroup\$ I'm 100% sure that it's not cause by any extension, since I didn't have any when testing the bew theme out on my other machine. \$\endgroup\$
    – user115399
    Nov 16, 2018 at 21:42
  • 1
    \$\begingroup\$ This has been mitigated, and should be live if you wanna check it out. \$\endgroup\$
    – Aaron Shekey
    Nov 29, 2018 at 23:17
3
\$\begingroup\$

Oh great, I can't turn it off.

[its off, but its on[1]

I'm glad that our various buttons are no longer "gray text on gray backgrounds against a soft gray site" but I wanted to compare the old and the new and I now can't toggle back and forth.

Yes, I hit F5 and ctrl-F5, I can't get the non-beta version back.

(Minor correction: some parts go back, like the up/down vote buttons)

I do see that we lost our banner though. :\

old banner

Hooray for every site on the network looking near ducking identical. Its my biggest criticism of the theme update and I will continue to berate that decision. I know exactly how much work it takes to maintain the codebase for things like the vote buttons (precisely zero, its the same svg file as the badges and site header).

\$\endgroup\$
4
  • \$\begingroup\$ Imo, good riddance to that banner, it looks very outdated. \$\endgroup\$
    – mr-matt
    Nov 19, 2018 at 7:30
  • \$\begingroup\$ @mr-matt Ok, fine, but is "no banner at all" better? \$\endgroup\$
    – Draco18s no longer trusts SE
    Nov 19, 2018 at 15:31
  • 2
    \$\begingroup\$ Well perhaps. It is nice to have a unique logo tho. I just wish it looked nicer. \$\endgroup\$
    – mr-matt
    Nov 19, 2018 at 17:05
  • 2
    \$\begingroup\$ @mr-matt And what isn't outdated? Waste of space and "slim" fonts, coupled with single page rendering? All of those seem horrible to me, and I'd love to turn it off. \$\endgroup\$
    – mid
    Dec 7, 2018 at 16:35
2
\$\begingroup\$

I know this is probably meant for bug feedback but I honestly think both the original and the new theme looks very outdated and bland.

I made a quick mock up. Thoughts?

enter image description here

A simple, clean and minimal design with a dark background.

\$\endgroup\$
1
  • \$\begingroup\$ Thanks for your contribution. You might want to include the specific fonts you used - for something like this, there might be licensing issues. Being able to ID the fonts can make it easier to determine their legal status & if necessary, find similar alternatives. \$\endgroup\$
    – Pikalek
    Nov 22, 2018 at 16:54
2
\$\begingroup\$

I have noticed a couple of bugs:

Multi-lines titles are split in weird spots:

enter image description here

I'm using Pale Moon as my web browser, and I get these issues:

  • When I click the flag on comments, the popup is positioned in a weird location; if I change the zoom of the page (using Ctrl+mouse wheel), the pop-up comes back in the center, if I wait a minute or two, the pop-up comes back in the center: bug: misplaced pop-up
  • This one seems to have been fixed in a recent update of Pale Moon: The timestamps of the comments do not show. If I hit F12 to debug the page, they show up, but they vanish again after a minute or two. bug: missing timestamps If I tell the browser to tell stackexchange.com sites that the useragent is Mozilla/5.0 (Windows NT 6.1; WOW64; rv:52.9) Gecko/20100101 Goanna/4.1 Firefox/52.9 PaleMoon/28.2.1 (using about:config in the address bar, with key general.useragent.override.stackexchange.com), the timestamps show up correctly.
\$\endgroup\$
2
  • \$\begingroup\$ The title wrap is a newly introduced bug. I'm not sure we support your browser, but I'll pass it along to our dev team. :-( \$\endgroup\$
    – Jon 'links in bio' Ericson
    Nov 22, 2018 at 5:49
  • \$\begingroup\$ Yeah, they pride themselves to be as much conformant to HTML specs, so I don't know if the issue comes from a bug on their part or from a way the HTML/CSS/JavaScript is done on stack exchange sites. \$\endgroup\$
    – Vaillancourt Mod
    Nov 22, 2018 at 14:00
1
\$\begingroup\$

It looks pretty good!

The site look and feel has stayed nearly the same in good ways.

Our UFOs have gone missing from the site header, but I don't actually miss those UFOs.

I also like the revamped site logo with the thickened text borders. It looks superb.

\$\endgroup\$

You must log in to answer this question.

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