1

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.

  • 4
    Please note that a total of eleven upvotes on the first answer is a huge amount for this particular site--don't be lulled into the impression that this change doesn't have attention here. It's just that Meta here is particularly slow. – Vincent Nov 8 '18 at 10:45
  • @Vincent make that 14, and it wasn't the first xD – WELZ Nov 13 '18 at 13:02
  • 1
    Not a fan of the new design? Get your very own user styles here! @JonEricson: I suggest you take a look at this, maybe get your designers to have a look too. A personalised style for our site would be less than 300 lines of CSS. Actually less, I tweaked some things to my liking that weren't really necessary. – PieBie Dec 12 '18 at 9:28
20

This is com­par­a­tive­ly hard­er to read now. The left is the old site, the right is the new:

side by side of old vs new

No­tice how much dark­er and small­er the text is now! You’ve dropped the x-height by a whole bunch and picked a much dark­er color for the text. Dark­er text re­quires more lead­ing than light­er text does. Dit­to longer measures.

Here’s the dif­fer­ence in the ro­man set at the same size, with Open Sans first and Ari­al sec­ond:

arial-vs-open sans lowercase

Notice that the Arial is more compressed. It is also using tighter counters, not open ones. Arial is a low-contrast typeface, lacking the modulated stroke that Open Sans presents:

counter example

Because Arial has no italic, its oblique has the same metrics and letterforms as its roman has. But because Open Sans does have italic, the metrics and letterforms differ:

oblique vs italic demo

As you see, an italic is more compressed than its roman, but an oblique is not.

About the only thing switching to Arial buys you is that the square tittles probably look better using an old dot-matrix printer than the round ones in Open Sans may:

tittle comparison

Arial’s (some­what) small­er x-height and mark­ed­ly in­creased com­pres­sion means you’re now cram­ming even more let­ters to­geth­er on the same line un­der a mea­sure that was al­ready too long to start with and is even worse now. That makes it hard­er to read, and it comes off feel­ing un­so­phis­ti­cat­ed and brutish. Noth­ing says you don’t care about Graph­ic De­sign like giv­ing it a dense and hard-to-read lay­out like this. Look at how ug­ly the para­graphs are now com­pared to be­fore!

Ari­al makes a poor dis­play face due to its low con­trast when set large; it is al­so too dark over­all to make a good dis­play face. Ari­al al­so makes a poor cap­tion face due to the font met­rics push­ing the let­ters too close to­geth­er if you do not over­ride its let­terspac­ing a lit­tle bit to widen them out.

What Bring­hurst writes of Hel­veti­ca is just as true of Ari­al, with bold em­pha­sis mine:

Hel­veti­ca is a twen­ti­eth-cen­tu­ry Swiss re­vi­sion of a late nine­teenth cen­tu­ry Ger­man Real­ist face. ... The heavy, un­mod­u­lat­ed line and tiny aper­ture evoke an im­age of un­cul­ti­vat­ed strength, force, and per­sis­tence. The very light weights is­sued in re­cent years have done much to re­duce Hel­veti­ca’s coarse­ness but lit­tle to in­crease its read­abil­i­ty.

Ari­al is not as read­able a type­face as many oth­ers, par­tic­u­lar­ly set like this. It’s cer­tain­ly a lot worse than what we had. That’s be­cause the mea­sure is much too long and the lead­ing is much too tight, and the font is stuck at the very same size no mat­ter the view­port. That isn't re­spon­sive.

Look how with Open Sans, you can use smart quotes after an f glyph, but with Ar­ial you can­not, as shown on the ti­tle of this ques­tion:

smart quote bug

In his article on Why Helvetica is not great, Martin Silvertant writes:

I strong­ly sus­pect that if Hel­veti­ca is your fa­vorite type­face, you sim­ply haven’t seen a lot of pro­fes­sion­al type­faces. Type­faces like Triv­ia Grotesk, Voice, Bu­lo, Six­ta, Adelle Sans, Ar­gu­men­tum, Supria Sans and Air Soft are cer­tain­ly not for ev­ery project, but they’re very at­trac­tive grotesque type­faces. Grotesque isn’t my per­son­al fa­vorite style though (but per­son­al pref­er­ence shouldn’t mat­ter much when con­sid­er­ing a type­face for a project); I’m very fond of hu­man­ist sans type­faces and type­faces with some quirks. Type­faces like Win­co, Ideal Sans, Sonus, Tabac Sans (Fig­ure 8), An­des, Un­i­man and Karmi­na Sans are ab­so­lute­ly amaz­ing to me. Speak­ing of quirks, I still ad­mire the clas­sic Gill Sans.

Again, the same words there spo­ken of Hel­veti­ca ap­ply in equal mea­sure to Ari­al.

Please have some respect for the Graphic Design SE site and give it the professional typography treatment which GD of all possible SE sites so richly deserves. Other­wise you might as well mi­grate all GD site con­tent to Stack Over­flow. It sure looks like you al­ready have. :-(

Please use a hu­man­ist sans, not a neo-gro­tesque one, and prefer­ably one with a re­al ital­ic like Open Sans has, not just a lame oblique like Ari­al has. Bet­ter yet, sim­ply put the old typeface back so it doesn’t look so un­so­phis­ti­cat­ed and bru­tish the way it does now.

  • 8
    I am not a font purist and confess to using designer-deprecated fonts not too deep in my font stacks. But I wish I could +1 this a few more times. – Vincent Oct 30 '18 at 10:39
16

To be honest, you should have known you were going to catch some wind asking a bunch of designers about a design you're forcing on them. So here goes my honest feedback. Some of it is constructive, some isn't, deal with it.

  • Why all the borders everywhere? They just make the design heavier, and don't add anything.
  • Please give us at least our colour back. The blue is just not right together with the logo.
  • Everything feels really cramped. Give the design some air, let it breathe.
  • Box-shadows? What is this, 2006?
  • There are three different styles for tabs, this is a bit excessive in my opinion.
  • Arial is just a horrible typeface, please give us back our Open Sans.

I took the liberty of adapting the current designs to my liking. I stayed within the constraints of the current design as much as possible. For example, I kept the sidebar, since that is here to stay. All changes were done in the DevTools of my browser, so they're not complex to do and don't require extra files or anything like that. Below an overview, I've also noted the things I've changed in do far as they are not mentioned above.

Homepage

  • I've given the logo the love it deserves.
  • The yellow in the meta featured box is just not right.
  • There's at least six shades of grey on the page. It's really confusing, not to mention hell for people who cannot see contrast very well.
  • Notice how things that are important (titles, buttons) actually stand out.

enter image description here

Question page

  • The question and the comments now look like text instead of blocks of black.
  • Again, the yellow of the Meta box was just not necessary.
  • Notice how the scores of the related questions now line up with those questions.
  • There's just a bit more space between the question and the right bar, so they don't feel so jammed against each other.

enter image description here

User page

  • I still feel this is cramped, but since it's a dashboard I'm willing to make some allowances here.
  • I did add some spacing in the top boxes.
  • Notice how the important bits (like the titles) now stand out a bit more.

enter image description here


PS: Here's a link to the original images because imgur absolutely destroyed them during compression.

  • You may have put a bit too much of the pink in our site (in your mockups), our site is full of some other wonderful colors as well. – WELZ Oct 30 '18 at 17:39
  • I don't mind honest feedback. This answer is an example of what I hoped for when posting here. – Jon Ericson Oct 30 '18 at 19:42
  • 1
    @WELZ I just swapped the blue for our red. If it's a lot, it's because the blue was also a lot. I think it's easiest for the developers to just swap one colour with another when theming. – PieBie Oct 30 '18 at 20:04
  • 2
    frantically starts searching for the 'bounty' function, then realises this is Meta. – Vincent Oct 30 '18 at 22:25
  • 1
    Your appreciation is all the bounty I need @Vincent. – PieBie Oct 31 '18 at 6:38
9

My eyes really hurt when trying to read questions, Arial is very harsh as compared with our current font of Open Sans.


Our site really enjoys Open Sans. Check out this post post from Scott back when it was introduced.

Also keep in mind that lots of posts will get reformatted incorrectly with the new font, see this comment

  • 3
    Could you rephrase this in a way that's more constructive? I've documented the current reasoning for our font selection, but it would help to have more details about what makes Open Sans more usable for this community than Arial. – Jon Ericson Oct 29 '18 at 20:38
  • 7
    @JonEricson I’ve tried to an­swer that be­low. Open Sans has a larg­er x-height than Ari­al. It is al­so a lighter type­face. That means that your para­graphs are now even more cramped than they were and the page col­or is off. (By col­or, I mean this in the sense that it is used by ty­pog­ra­phers: ”the dark­ness of the type as set in mass” per Bring­hurst.) The lead­ing is wrong and the mea­sure is wrong. That is the tech­ni­cal rea­son. The aes­thet­ic rea­son is that it says you don't care about graph­ic de­sign on the Graph­ic De­sign site, put­ting the lie to its name. – tchrist Oct 29 '18 at 21:59
  • The most recent edit is an improvement, but what is it about the design announcement meta post genre that requires insults against the designers? I'da thought this community would understand what it's like to get this sorta feedback. @tchrist: I don't understand why you undercut your answer with the stuff about how we don't care about design. If we don't care, why should bother with the rest of the argument? And if, by some bizarre coincidence, we do care, why go out of your way to alienate us? Instead of pearls before swine or lobbing a shame grenade, what's wrong with tried and true reason? – Jon Ericson Oct 30 '18 at 1:20
  • 4
    @JonEricson When I see indications the guys doing this show an appreciation for typography not just CSS configs, I promise to lavish accolades of public praise from every rooftop. Most web designers get no formal training in typography at all. Your guys work under constraints ($$$?) I have no knowledge of. It may also be that I suffer from special disabilities that make me a uniquely bad judge, like having eyes that are too old, having too wide a screen, or being too fussy. I fully confess to delusional resentment that I've been dismissed for not viewing SE sites in Microsoft-colored glasses. – tchrist Oct 30 '18 at 2:53
  • 6
    @JonEricson Why woiuld we even attempt to have a reasonable discussion? Your post is pretty clear in stating that: A) You value more your own comfort than users comfort. B) You are not going to be serving the font anyway! So how can you expect us to be constructive under those conditions. There is no way we can attack those points constructively or in any other way because your in fact declaring to ignore the community. – joojaa Oct 30 '18 at 8:12
  • 7
    Woah guys settle down. I don't want to have to flag comments on here. @JonEricson your comment towards tchrist is out of line. He never once insulted the designers. Tchrist stated "that [the use of Arial] says you don't care about design." That is not an insult, it is a critique of the use of Arial; and one that many designers agree with. – Ryan Oct 30 '18 at 18:12
6

Rendering Regression Bug

The site’s old style sheet had this bit of CSS:

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: url('img/pattern.png?v=157ec8bfa05b');
    background-position: top left;
    background-repeat: repeat;
    background-color: #FFF
}

But the new one lacks those first two crit­i­cal lines. I sus­pect they were delet­ed by ca­su­al ac­ci­dent, but we need them.

The orig­i­nal de­sign­er of the site theme put those first two lines in be­cause they are ᴄ ʀ ɪ ᴛ ɪ ᴄ ᴀ ʟ to al­low light-on-dark text to ren­der cor­rect­ly un­der (for ex­am­ple) Chrome or Fire­fox.

This may be par­tic­u­lar­ly bad on Macs, so if the peo­ple eval­u­at­ing what the site looks like are on­ly us­ing In­ter­net Ex­plor­er un­der Win­dows, they wouldn’t even re­al­ize they’d messed some­thing up that used to work right on this site. That might al­so ex­plain why they think they should set so black a type­face with such a small font size, long mea­sure, and tight lead­ing: they don’t re­al­ize how black it is.

Demonstration

To il­lus­trate how aw­ful this ef­fect is, here are pairs of rows where the odd-num­bered rows are left at the de­fault and the even-num­bered rows have the two spe­cial CSS di­rec­tives ap­plied to them:

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

Here’s a small re­pro case:

<html>
<head>
<style>
p.smooth-right {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p.smooth-wrong {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
</style>
</head>
<body style="font-family: Georgia; color: white; background-color: red">
  <p class="smooth-wrong">1. This is regular smoothed wrong.</p>
  <p class="smooth-right">2. This is regular smoothed right.</p>
  <p class="smooth-wrong"><b>3. This is bold smoothed wrong.</b></p>
  <p class="smooth-right"><b>4. This is bold smoothed right.</b></p>
</body>
</html>

Which looks like this on Chrome on a Mac:

demo of small case for Chrome

And like this un­der Fire­fox on a Mac:

demo of small case for Firefox

On a Win­dows box, the even- and odd-num­bered lines are iden­ti­cal whether ren­dered in Fire­fox, Chrome, or In­ter­net Ex­plor­er. On a Mac, the odd-num­bered line are just grossly overweight (the reg­u­lar be­comes a bold, the bold be­comes a black) whene­ver you have light text on a dark field un­less you add those two mag­ic CSS di­rec­tives.


More Extensive Samples

Here’s a close-up of the prob­lem, where the top pair is the ren­der­ing on a Mac and the bot­tom pair is the ren­der­ing on Win­dows — both on the same mon­i­tor. The first line is the de­fault view on the Mac, and this is the one that isn’t right. The oth­er three look pret­ty much the same as each oth­er.

Mac on top, Windows on bottom

close-up of problem

No­tice how in that top-most row where it’s much too bold, the three bold cells in par­tic­u­lar have se­ri­ous prob­lems. Th­ese are columns 1, 4, and 5. The coun­ters have been re­duced to mere pin­pricks; for ex­am­ple, look at the bot­tom of the low­er­case a, the top of the up­per­case A, or the top of the low­er­case e. This is more like a black’s 900 weight than a bold’s 700 weight. All the let­ters are run to­geth­er too tight­ly be­cause the font met­rics are not de­signed for this sort of cap­tion-sized use, let alone as a black not a bold. More on than in a sep­a­rate post.

Chrome on Mac, set in Arial

Chrome on Mac, set in Arial

Firefox on Mac, set in Arial

Firefox on Mac, set in Arial

No­tice how dif­fer­ent the odd-num­bered rows are from the even-num­bered rows, par­tic­u­lar­ly when you have light-col­ored text set against a dark­er back­ground col­or. The reg­u­lar text comes out look­ing like it’s bold, and the bold text is much much too dark, re­al­ly a black not a bold in ty­pog­ra­pher­ese.

This is no better in Georgia, either.

Chrome on Mac, set in Georgia

This is even worse at the teen­sy tiny sizes you tend to pick for these in places where you use white text against a dark­er back­ground, like for but­tons and for scores, or up in the top bar:

Chrome on Mac, set in Arial (small)

Chrome on Mac, set in Arial (small)

Chrome on Mac, set in Georgia (small)

Chrome on Mac, set in Georgia (small)

As you see, this all looks com­plete­ly aw­ful if you al­low the de­fault font smooth­ing to have its way with you on a Mac. It is all much too hard to read. Plus you are us­ing Win­dows fonts on a Mac, so even cor­rect­ed they still come out way too dark com­pared with us­ing Mac fonts on a Mac. That is an­oth­er rea­son to use Open Sans not Ari­al here.

Summary

Please, please add (re­store) these two CSS lines to ev­ery sin­gle Stack Ex­change site on the en­tire net­work:

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
  • How might I reproduce this? I'm not sure I understand what you mean by "light-on-dark text". (For what it's worth, quite a few of us are using Macs. Maybe a screenshot comparison would help us see the problem?) – Jon Ericson Nov 16 '18 at 18:54
  • @JonEricson I’ve added screen­shots show­ing the prob­lem. Ba­si­cal­ly, all the light text set against the dark­er back­grounds in the but­tons and UI el­e­ments like Add Com­ment or the high­light­ed scores or any­thing in the top bar now looks com­plete­ly aw­ful on a Mac be­cause you took out those two im­por­tant CSS lines. They need to be on ev­ery site across the whole net­work, not just here. – tchrist Nov 17 '18 at 19:01
  • 1
    I'll bring this up with the design team. I hadn't made the connection between the buttons and light-on-dark text. I can see the problem as I type this. That said, I do see articles such as this one that recommend against universally applying these settings. Seems like maybe it would be better to apply it only on the text that needs it so that dark-on-light text (which includes nearly all user-created content) benefits from subpixel rendering where available. – Jon Ericson Nov 18 '18 at 8:23
6

If you're not going to listen to our feedback at all, constructive or no, you might as well not ask it.

  • 1
    We've been working through feedback and we're not done yet. – Jon Ericson Dec 7 '18 at 18:22
  • 2
    @JonEricson if you aren't done, why would you forcefully roll it out? Leave it as an option that can be toggled on/off. – WELZ Dec 7 '18 at 19:02
  • Obviously, I don't mean you, but SE. – WELZ Dec 7 '18 at 19:03
  • 2
    @WELZ: The pressing reason right now is that we have Winter Bash coming soon. Even so, we need to push the changes at some point or we won't really be iterating in any meaningful way. As more users experience the new design, we learn more about how people use it and that informs changes we'll make in the future. Waiting until everyone is satisfied with the design is a recipe for stagnation. (By the way, I did press the button to roll out the change everywhere for everyone this morning. So I'll take that blame. ;-) – Jon Ericson Dec 7 '18 at 19:37
  • @JonEricson ok let me know by email once your done, since i cant see it on the site anymore. – joojaa Dec 7 '18 at 20:46
  • @joojaa: So the whole point is that design work is dynamic. As the needs of the sites and available features change, so will the design. If we ever stop working on site design, I probably won't be around to tell you about it. – Jon Ericson Dec 7 '18 at 20:50
  • 8
    @JonEricson yeah but you could have done that without making my eyes bleed. Its a bit like saying im sorry all your cars crash, but we need to crash your cars inorder to sell new ones – joojaa Dec 7 '18 at 20:52
  • @joojaa: I don't follow the analogy at all. Is it possible to make the same point with less hyperbole? – Jon Ericson Dec 7 '18 at 21:09
  • 5
    Yes, you do get the point, otherwise you cannot ask for the same point with less hyperbole. You're just not listening. – Maarten Bodewes Dec 8 '18 at 10:28
  • 1
    @MaartenBodewes: So, um, the point is you all are very angry with us? Yes, I got that part. For whatever reason, I expected the feedback from this particular site would not be of the "my eyes bleed" variety. – Jon Ericson Dec 11 '18 at 18:43
  • 2
    @JonEricson I understand you're getting a little jaded with all the negative feedback. But please be nice. People, like me, lash out because they feel you're radically changing, without their input, something they've put tens or hundreds of hours of free time into. Is it so unfair that we relay our opinions somewhat bluntly? Imho, you could use some more empathy and understanding, even though you may feel you've shown a lot already. – Vincent Dec 12 '18 at 8:15
  • 2
    May I direct you to something our PM wrote early in this process? I'm just the messenger, but I dread the feedback on these posts. Imagine if I were the one who was doing the work and making the decisions! The truth is I was opposed to these changes myself when the planning began last year. But now that we have started down this path, I figure we might as well make the best of things. And to me, that means showing respect to the people who are doing the work. Otherwise, how can we expect them to listen? – Jon Ericson Dec 12 '18 at 20:23
  • 1
    @JonEricson Maarten is right. You are completely missing the point and are not listening. Farewell. – Vincent Dec 13 '18 at 6:44
2

Good para­graphs re­flows now

One thing does look bet­ter: the para­graph re­flows when you change your win­dow size.

Look in par­tic­u­lar at what hap­pens to the para­graphs here when you slow­ly nar­row or broad­en the win­dow width: the right-hand edges change dy­nam­i­cal­ly.

You can test this out by look­ing at my three an­swers here to this meta-ques­tion.

We’re still us­ing the same lead­ing and font size no mat­ter the con­tain­er, though, so what looks good on desk­top doesn’t look good on cell­phones, and vice ver­sa. But they said they have not yet got­ten to the non-desk­top site.

You must log in to answer this question.

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