12

My name is Kurtis and I'm a designer with Stack Exchange. You may have noticed some minor updates to the design of the site. The updates are part of a SE network-wide update to a new base css framework. The updates allow us to:

  • Use .svg sprites for retina displays
  • Fix layout bugs globally
  • More easily add new features to all of our sites in the future

We tried to maintain the essence of the original design while making updates. If you see any bugs please let us know.

Thanks!

Updates 03/09/2015

Thank you all for the feedback! We've pushed updates to the site and are adding the tag to your answers.

16
  • 1
    Oooh...so clean and pretty.
    – Kit Z. Fox Mod
    Mar 5, 2015 at 16:36
  • 9
    I am sorry, but the new design is... just wrong. It doesn't suit this site. It doesn't have enough weight it used to have... The style became too plain.
    – nicael
    Mar 5, 2015 at 19:40
  • 2
    A few hours ago you changed the comments typefaces to serif in both draft and final form. Now final form is sans serif, but draft is serif? What's going on?
    – bib
    Mar 5, 2015 at 21:42
  • Is there somewhere that the effect on moderation pages might be discussed? [If it's chat, ping me] Thanks
    – Andrew Leach Mod
    Mar 5, 2015 at 23:37
  • @AndrewLeach this is a great place to post that feedback. We've been working through feedback as it comes in. This site is so custom that it's bending our framework that works for 90% of the Stack Exchange network sites.
    – Kurtis Beavers
    Mar 5, 2015 at 23:40
  • The comments are now in Helvetica/sans both in draft and final, but both the “add comment” link and the comment drafts are quite a bit bigger than the final form, too. Both seem quite unnecessary and less than elegant to me.
    – Janus Bahs Jacquet
    Mar 6, 2015 at 0:45
  • 3
    I don't like the changes. It feels like the site has lost it's character. Maybe you could add some microtexture backgrounds?
    – curiousdannii
    Mar 6, 2015 at 11:46
  • 1
    The san serif vote count on an individual question is ugly and inconsistent with the serif vote count on the list of questions.
    – bib
    Mar 6, 2015 at 12:04
  • @Amphiteóth The border means that it has an accepted answer.
    – curiousdannii
    Mar 6, 2015 at 23:12
  • @curiousdannii Thank you, I didn't know/hadn't noticed!
    – user98955
    Mar 6, 2015 at 23:18
  • 6
    Everything looks kind of flat and lifeless, diminished and somewhat empty now. For example (a tiny example) why an obtuse triangle (to upvote comments) instead of a equilateral triangle? All the changes taken together feel wrong. It's jarring, not sleek. But I am not a graphic designer; I like the golden ratio. I'll get used to it. I'm sorry if this is too brusque.
    – anongoodnurse
    Mar 8, 2015 at 0:07
  • 2
    I can't explain and maybe there is something wrong with my eyesight, but I see the E in languagE & usagE as higher up than the rest of the font? Or is it the G which is smaller?
    – user98955
    Mar 8, 2015 at 22:31
  • @Amphiteóth I think you're right, they look 1 pixel higher to me.
    – curiousdannii
    Mar 9, 2015 at 3:38
  • 5
    Comments suddenly have big chunky lines between them, while answers still suffer from a very, very faint line between them. And the font in the comment edit box seems quite large compared to the actual comment font.
    – Frank
    Mar 9, 2015 at 15:32
  • 1
    @Frank My guess is that because it is so important that the font of what you are editing be legible to you if editing errors are to be avoided, they have embiggened the one in the edit box.
    – tchrist Mod
    Mar 9, 2015 at 23:19

15 Answers 15

Reset to default
17

  1. The question titles on the front page are no longer large enough: there's not enough differentiation between the title and the excerpt.

    This is likely to be because the font metrics for Georgia are different from Arial.

  2. The Meta site looks rather brown; the grey page background is probably necessary.

  3. Comments are in Georgia. Again, not enough differentiation.

  4. The favourite tags sidebar widget probably needs looking into: Favorite tags

  5. The "Add image" dialog isn't right: Add Image

  6. I really, really dislike the new font for the logo.

9
  • I agree that there are now sizing issues. I zoomed a level.
    – tchrist Mod
    Mar 5, 2015 at 16:28
  • 4
    +1 The logo is a disaster (it always was crap anyway) but now it looks like crap that's been hit with a stick.
    – Frank
    Mar 5, 2015 at 16:51
  • 4
    +1 for comments and the logo. I always rather liked the logo, but this new one is not nice. Also, were links here on Meta this rather eye-straining shade of orange before? Weren’t they the general ELU red just like on the main site?
    – Janus Bahs Jacquet
    Mar 5, 2015 at 17:42
  • On font metrics, more likely 'Helvetica Neue', Helvetica, Arial, sans-serif in that order, but your point stands.
    – tchrist Mod
    Mar 5, 2015 at 17:50
  • 3
    +1 for disliking all the same things as me. (To quote Mr. Horse: "No sir, I don't like it.")
    – Hellion
    Mar 5, 2015 at 18:05
  • +1 Especially the logo comment. It looks ragged and makes us look even more arcane and archaic than before.
    – bib
    Mar 5, 2015 at 18:08
  • 2
    And all the text on the site should use the typeface in Andrew Leach's avatar!
    – bib
    Mar 5, 2015 at 18:10
  • I think I'm going to disagree with at least one of @bib's comments. The old logo font was distressed too, but it was better designed and less higgledy-piggledy (see Robusto's screenshots). It also had a reassuring solidity because the "thins" weren't so thin. The user cards are just wrong: they were set in Georgia, and that rule appears to have been missed in the new CSS. Also, the spacing is off -- there's too much space at the top of a bordered user-card.
    – Andrew Leach Mod
    Mar 5, 2015 at 18:13
  • Maybe its just the shock of the reboot that has brought my attention to our ragged banner.
    – bib
    Mar 5, 2015 at 18:15
11

Just a small peeve, but it's been tripping me up since the update: the new horizontal rule between answers is very light and thin, and I'm starting to confuse whose answer I'm reading. Can that be thickened and darkened? At least so that the line separating answers is more pronounced than the line separating comments.

3
  • 2
    Indeed! It can under certain conditions be virtually invisible.
    – tchrist Mod
    Mar 9, 2015 at 3:11
  • 2
    Good call. We've darkened the line separating the comments and questions.
    – Kurtis Beavers
    Mar 10, 2015 at 0:51
  • 1
    @KurtisBeavers Could you add a bit more space too? The line is visible now, but the answers are frightfully scrunched up close to each other. A quick test for me has padding-top and padding-bottom at 40px (twice the current 20px) as a good, pleasant, clear spacing that also doesn’t take up too much space.
    – Janus Bahs Jacquet
    Mar 22, 2015 at 21:25
6

Me again.

In the old design, the "action links" all lined up on one line instead of being split over two, even with the "mod" menu and a number of close votes.

enter image description here

Now, it does where there are no close votes...

enter image description here

...but not where there are votes...

enter image description here

...and the vertical alignment with other text is not particularly good either.

This particular comparison shows up the difference in font sizes, styles (is there a reason the timestamps have changed font?) and the user card border. The spacing in the user card isn't even either: although I've removed user details here, the space between the border and "asked" is larger than the space at the bottom.

It's really surprising that the old graphics have been completely redrawn. Was it not possible simply to SVGise them as they were?

It all seems rather bland and characterless.

4
  • 1
    I really hate that there is a possibility of line breaking between close and (4). It’s too easy to miss at a quick glance. That should be in a nowrap span, or just use U+00A0 for the space.
    – tchrist Mod
    Mar 8, 2015 at 21:25
  • Related: bug report for the links-on-multiple-lines issue on Meta.SE: meta.stackexchange.com/q/215473/224428
    – senshin
    Mar 9, 2015 at 17:43
  • The alignment is now. The line break bug reported on Meta.SE should be fixed soon.
    – Kurtis Beavers
    Mar 10, 2015 at 0:53
  • It all seems rather bland and characterless. Fast forward to September 2018, the new theme is the definition of those two terms.
    – Mari-Lou A
    Sep 3, 2018 at 9:44
6

I mostly use the StackExchange mobile app, so the changes don't effect me much, so take this feedback for what it's worth.

That said, something bothers me about the new larger, emptier voting buttons. The old style seemed more solid to me; more real, like something I could interact with. The new ones seem more like design elements.

2
  • 6
    Also, the Favourite star has changed. A grey star is disabled; except it isn't. ELU's used to match its voting buttons, as most sites' do (a good example is christianity.SE). Are they all going to change to this bald style?
    – Andrew Leach Mod
    Mar 7, 2015 at 22:14
  • We've intentionally removed the circle around the favorite star. This is a convention that was inconsistent from site to site. The logic is that because the favorite action is not as important as upvoting or downvoting, we want to give it less visual weight and create a hierarchy of actions. The style of the new vote buttons matches the previous style, but we are making all of our voting buttons a consistent size to make it easier to release future feature.
    – Kurtis Beavers
    Mar 10, 2015 at 0:58
6

There’s a font bug here:

font bug demo

The two different instances of today are in different faces, with the active one being the odd man out. It should be set in Georgia like the rest of the site.

PS: Please don’t make that block an Helvetica/sans block: we like our text figures here, and would not part with them willingly. :) Yes, it is possible to select “lowercase” text figures instead of “uppercase” titling ones in other faces, but that requires fancier fonts than you can reasonably expect everyone to have.

6

Is the font switch for the red you link intentional? Shouldn’t it stay in the same font?

Improvement banner

5

I appreciate that you want to clean up your CSS. That's always the job I try to fob off onto someone else. ^)^

Here is a before-and-after look at what happened with ELU. Comments are now in Georgia, not Hevetica Neue, and the voting box has changed. There are some spacing and alignment issues as well.

Before

ELU Before

After

enter image description here

These don't really look intentional, but I could be wrong. (Anyway, you probably know all this already.)

4
  • Comments should be helvetica. That will be fixed in next round of updates.
    – Kurtis Beavers
    Mar 5, 2015 at 16:40
  • 1
    @KurtisBeavers The a.comment-user.owner class looks like it should remove the background.
    – Andrew Leach Mod
    Mar 5, 2015 at 16:46
  • Everything is in sad-face grey now. ;(
    – Mazura
    Mar 14, 2015 at 8:36
  • That's pretty cool. The update corrected it's to its. I didn't know CSS was sentient!
    – terdon
    Mar 19, 2015 at 15:47
5

Is it just my eyes or is there something wrong with the 'D' in the 'LINKED' and 'RELATED' sections.

This is from Chrome on Win7.

enter image description here

This one is from IE on Win7.

enter image description here

4
  • 1
    That’s a Microsoft bug, not a Stack Exchange bug: it looks just fine on normal operating systems.
    – tchrist Mod
    Mar 11, 2015 at 13:32
  • Firefox on Win7 looks fine. I reckon it's a Webkit bug.
    – Andrew Leach Mod
    Mar 11, 2015 at 13:36
  • 2
    I was pretty sure it didn't do this before the changes, but I can see in Robusto's answer (meta.english.stackexchange.com/a/6644/71783) with the before & after that it did. I wonder why it's only the D - I suppose I should ask on a different site.
    – Frank
    Mar 11, 2015 at 17:57
  • Frank, asking on a different site is always better.
    – Elberich Schneider
    Mar 18, 2015 at 2:24
4

When there are counts placed after an action like edit/close/delete etc, these can line break and appear on the wrong line, making it look like they apply to the wrong action:

example of confusion on instance counts

That should not be allowed to happen, because it is misleading. There it looks like the flag count is 1, but in fact, the delete count is one. I imagine one could either change the space between the action and the count into U+00A0 NO-BREAK SPACE, or else wrap the action and its count in some sort of nobreak span group.

In a way it’s a totally different problem, but when it is the owner themself who has edited their question, the edited portion presents itself as being part of the same set of action elements as the ones I just mentioned.

example of confusion on edited portion

I find that odd, since the previous problem triggered a break to keep them separate from each other even though it was the wrong break. But here it is not breaking at all, leading to a strange representation. It’s like there is an edited action just to the right of the unprotect action, which means you wind up having a row that looks like has edit ... edited.

2
  • 1
    The bug you're referring to has been reported here on Meta Stack Exchange meta.stackexchange.com/questions/215473/… . A fix is in the works.
    – Kurtis Beavers
    Mar 11, 2015 at 14:22
  • @KurtisBeavers Oh, I see. I had thought it was some new problem introduced by our changeover.
    – tchrist Mod
    Mar 11, 2015 at 22:52
4

Sidebar title height inconsistent

The handwriting graphic in the "Love this site?" sidebox forces its title section height to be larger than the other sidebar boxes. That being said, the whitespace it affords to the title text is preferred to the default, cramped view.

enter image description here

2
  • 2
    And the little images left and right of the title are different for the two boxes - but maybe they are supposed to be?
    – Frank
    Mar 19, 2015 at 3:59
  • 1
    I think the "Love this site" box is actually a replaceable advertisement, so it's individually drawn -- the other graphics are newly-SVGised. That said, I think the increased whitespace is better, too; and it matches the new feel.
    – Andrew Leach Mod
    Mar 20, 2015 at 14:29
2

Did we lose a dividing indicator between the end of one answer and the start of the next? Is it me, or do answers now seem to run together?

1
  • Depending on how your monitor is calibrated and the lighting of your viewing area, yes, it is perfectly possible that it has become invisible. It is exceedingly faint.
    – tchrist Mod
    Mar 9, 2015 at 3:20
2

I can barely see the up vote and down vote numbers on the main site. I don't have before and after to show as comparison.

In general, the readability on the main site is much worse than before. Meta looks a lot better though!

3
  • 2
    Robusto's screenshot shows they were bold-face and black; now they are normal-weight and grey.
    – Andrew Leach Mod
    Mar 14, 2015 at 10:35
  • @AndrewLeach They are also now spaced further apart vertically, which contributes to the perception of lightening them. This might also help some people not click the wrong one accidentally.
    – tchrist Mod
    Mar 14, 2015 at 15:15
  • @AndrewLeach Thank you! Yes, that is exactly what I meant. I would like black and/ or bold, rather than grey and normal-weight, please?
    – Ellie Kesselman
    Mar 15, 2015 at 12:18
2

I don't like the colour of the links, and they're too faint. Exactly what colour are they supposed to be? Tangerine? Not everyone has twenty-twenty vision, some of us do wear reading glasses.

3
  • On the main site or here on meta? The color switches depending on whether you have visited it or not, here between color #d58e10 and color #c18215. I don’t know what particular name for the various shades of orange you care to attach to those hex triplets, but your perception of the actual color will vary according to the background color it is presented against as well as your local monitor and lighting characteristics.
    – tchrist Mod
    Mar 9, 2015 at 3:42
  • 1
    @tchrist it's on meta. On the main site the links are almost a bright maroon/dark magenta :)
    – Mari-Lou A
    Mar 9, 2015 at 12:33
  • 2
    We've increased contrast in our meta link colors globally.
    – Kurtis Beavers
    Mar 18, 2015 at 1:04
1

I was looking at the EL&U tag wiki and noticed that there was a lot of blank space, but the main issue is the font size.

The font near label 1 is just fine, but it is a lot bigger than anything else. The font near label 2 is tiny. The body of the tag wiki is also tiny.

If the body font and header fonts were larger, maybe the label 1 area font wouldn't look so large in contrast? Also, the use of serif and sans-serif is really noticeable, due to the size contrast... maybe?

screen shot of EL&U tag wiki layout

I am using Google Chrome browser running Windows 7 on a desktop with a normal size screen, 18.4" and no magnification or changes to the fonts in my browser settings.

0

In the mobile Android app, when I check my "recent achievements, reputation, etc." icon and select one of my recent reputation changes, it takes me to a seemingly random point within the thread of the question. Should it not take me to my answer, if my recent update is to a vote on that answer? Likewise, should it not take me to the comment in question if I'm notified that someone is directing a comment to me?

You must log in to answer this question.

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