16

My name is Stéphane and I'm the designer at Stack Exchange who made the design of this site. You may have noticed some updates to the design lately.

The updates are part of a SE network-wide update to a new base css framework (the code which display the design).

This network update allows us to:

  • Have sharper / more beautiful design on retina displays
  • Fix layout bugs
  • More easily add new features to all of our sites in the future

If you see any bugs please let us know in the form of answers (to this post) that illustrate one particular thing at a time.

Thanks!

| |
  • Has line-height been changed for text? Or am I just imaging that it's harder to read? The font family appears the same. – Scott Apr 3 '15 at 8:31
  • @Scott I think so, where exactly do you have trouble to read? – Stéphane Apr 3 '15 at 8:33
  • 5
    With all of these bug reports it might be nice to hear that in general the updated design feels more fresh and modernised, and both text and graphics definitely look sharper on my non-retina laptop screen. Nice work and thank you. – Dom Apr 8 '15 at 11:06
  • 11
    Reading all the issues below, I couldn't help thinking "wow, they must hate working on our site"... Thanks for all the hard work and for putting up with our nit-picking! – user56reinstatemonica8 Apr 13 '15 at 13:27

37 Answers 37

7

Who I am to think I can fool designers with PNGs? I converted them to SVGs. Everything is now crispy even if you zoom. It will be live after our next production build.


Seems that every redesigned site gets svgifyied voting arrows and The Star, while GD is left with the old pngs:

FixPleasE!

| |
  • 4
    Thanks, @Stéphane! :) – nicael Apr 3 '15 at 8:45
6

The bottom-left part of logo has quite a noticeable bug:

Please unbug it!

| |
  • 1
    How you find this :)))) – Lunaticbrain Apr 22 '15 at 7:31
  • 1
    ^ I was thinking to myself "Someone has a lot of free time!" @DevelopersPedia – Manly Apr 28 '15 at 16:59
5

The "ASK QUESTION" button has a pixelated border. It can't be unseen, please svgify.

| |
  • This one doesn’t seem to have been fixed yet… can we please have an svgificated Ask Question button too, @Stéphane? – Janus Bahs Jacquet Oct 24 '15 at 15:09
5

Thank you for your feedback, it's now fixed and will be live after our next production build.


Favorites answered question circle spacing is off. See it on https://graphicdesign.stackexchange.com/users/current/?tab=favorites

enter image description here

Same thing on Meta.

| |
4

Thank you for your feedback, it's now fixed and will be live after our next production build.


No luv for badges. Svgify please?

| |
  • @Stéphane thanks again, and when are you planning to build the next build? – nicael Apr 3 '15 at 15:42
  • I'm unsure about this, but probably pretty soon. – Stéphane Apr 3 '15 at 15:43
4

Adding tags or making an edit to a question's tags look like this on the main site and meta:

enter image description here

| |
  • 2
    Are you referring to the misalignment of the (x) and the text or something more? – Scott Apr 5 '15 at 19:35
  • 2
    The fact that it is not aligned equally from the top and bottom annoys me some as well. – veryRandomMe Apr 15 '15 at 2:15
4

Really stupid issue but still distracting.

When viewing a question, any question, the background wireframe logo/emblem placed its grey dots between the title and the content.

enter image description here

Depending upon the screen width, either one to two dots are seen as dark grey spots in the white space after the question title.

This is clearly not an important issue but.. I find these dots to be a distraction and I'm constantly visually pulled to them.

I thought maybe it was merely due to the vertical alignment of the emblem, however I can't find any solid reasoning for where, vertically, the emblem is placed. It doesn't line up horizontally to anything other than this space after the question title. Moving it down 5-10pix would A) remove this distraction and B) line it up with the navigation/site logo.

still not sure what I'm referring to???

enter image description here

I'm the first to admit that, yes, this is a very minute, cosmetic, almost dumb issue to bring up. Feel free to ignore it if desired.

| |
  • This one bugs me too... especially as the the browser size I use has the right-hand grey node right behind the Q of QUESTIONS, and it doesn't align but could... – user56reinstatemonica8 Apr 16 '15 at 10:06
  • It's also true for the grid behind the wireframe thing. Give the body a background-position: 0 5px; and the grid line aligns perfectly with the logo and links and the top and bottom grid lines have equal distance to the masthead and content box. body:before { background-position: 0 4px; } seems to fix the grey logo thing. – user56reinstatemonica8 Apr 21 '15 at 8:32
4

Thank you for your feedback, it's now fixed and will be live after our next production build.


Badge alignment and proximity issues

In various places the badges appear to be out of alignment, and they also appear to be closer to the number for the higher badge. Eg, the bronze badge is closer to the number of silver badges than the silver badge is.

enter image description here

enter image description here

enter image description here

| |
4

Our site buttons have inconsistent fonts. The "2-minute tour" button on the front page uses Open Sans, while other buttons on the site (newsletter signup, "Post Your Question", "Post Your Answer", all buttons in the review queue) use the UA default.

As Zach pointed out in chat, a more specific selector is required because browsers standardize input elements. The 2-minute tour is an anchor, the others are inputs.

2-minute tour button using Open Sans (anchor element):

anchor tag font-family style

Post Your Question button using Arial (input element):

input tag font-family style

| |
4

On the review section and posts section of our profile activity page, the vertical height spacing is off. This is caused by the date on the left side because of the difference in text.

This is how it is currently (in the review section):

enter image description here

They should be the same height according to other SE sites. For example, over on StackOverflow, each post is 57px high.

| |
  • It looks like that might be caused by the counter on the side. Looks like all with a static date have the same height and all with a dynamic date probably adapt to the size of the question. – Dom Apr 18 '15 at 14:00
  • @Dom It is indeed caused by that. Forgot to mention that :P Other sites have the same height for both – Zach Saucier Apr 18 '15 at 14:00
  • That is the best solution, +1. – Dom Apr 18 '15 at 14:04
4

I'm slightly color blind as far as blue/purple goes, however I seem to be unable to distinguish between the subtle greys used in the "accept answer" button.

enter image description here enter image description here

| |
  • Hi Mark, what exactly is your issue? Could you post screenshot? Is it 'similar' or just the same issue? – PieBie May 9 '17 at 7:48
  • @PieBie I've updated my "complaint" :-) Have a good day! – Mark Boulder May 9 '17 at 11:33
  • Ah, I do believe we've had this issue reported before. Let's see if we can find it again. – PieBie May 9 '17 at 11:40
  • 1
    here you are: could you weigh in on this thread? – PieBie May 9 '17 at 11:41
  • Will do @PieBie thanks a lot! – Mark Boulder May 9 '17 at 11:54
3

The position of the typography inside review buttons appears to be off:

enter image description here

also appears to be an overall issue with review area, example from a close question:

enter image description here

| |
3

Thank you for your feedback, it's now fixed and will be live after our next production build.


We've come across an issue with cockypup's profile which seems to be missing some rep events, causing the questions section to move to the right column and all the following modules switch their column positioning.

enter image description here

All the rest of the user profiles show 4 events and "view more" whereas his does not.

| |
  • 3
    Ooh. This is a weird one! – hairboat Apr 2 '15 at 23:31
3

Thank you for your feedback, it's now fixed and will be live after our next production build.


Are the review queue backgrounds supposed to be like this? They seem to be missing to me...

In the First Posts queue:

enter image description here

In the Low Quality Posts queue:

enter image description here

| |
3

Using the forward ticks (`) to designate something results in smaller text.

As you can see in this line of type. The text being emphasized is reduced. It's more noticeable at times based on content: MMMMMMM MMMMMMM MMMMM

I use the ticks to emphasize something. Often it is the content within the ticks which contains the imperative portion of an answer. Reducing it makes it more difficult to read and detracts from the purpose.

| |
  • 1
    I see that, But even as code, it's smaller, making the code more difficult to read. Why should inline code be smaller?? It would again, be an imperative part of an answer. That was my point. If anything, it should be easier to read. – Scott Apr 3 '15 at 23:02
  • And my use of "emphasis' may not have been the correct term to use. I use it similar to code in that I use it to call out application navigation (if not actual code). But it is a method of emphasizing a specific piece of text. – Scott Apr 3 '15 at 23:11
  • It doesn't look much smaller. It just looks monospace. – bjb568 Apr 10 '15 at 4:26
  • 1
    Oh, and please don't use it for emphasis. – bjb568 Apr 10 '15 at 4:26
  • My point is they are already used to emphasize. (call attention to, appear different than surrounding text, etc). Even as code it's as emphasis. Don't get hung up on the word "emphasize". I am not referring to use of the <em> tag or anything remotes similar to that. Sheesh, seems that one word is causing so much confusion. – Scott Apr 14 '15 at 16:19
3

Regarding a possible change which has occurred to line-height in question and answer text.

Adding this as an answer rather than a comment.

Hi Stéphane, It just seems as though all questions and answers have less line-height. It's not that noticeable until you start reading a long post. I was reviewing what i wrote here and it felt really compressed vertically. So much so that I had some minor difficulty tracking the lines horizontally while reading.

enter image description here

The above is, of course, an image and not 100% representational of the true text formatting.

Click the image to view this answer, or simply view any long answer or question on the main site.

I inspected the CSS and verified the font-family and size appear to be the same, but I don't remember what the previous line-height was. So, I'm not absolutely certain the line-height has been altered. I maybe perceiving a change when one has not occurred. It certainly feels like the line-height has been reduced.

Even this answer seems have a tighter line-height than I'm accustomed to.

| |
2

Uppercase Eyes in Titles

Just after posting my bug answer here I noticed that all i's are uppercase in my title. On clicking edit, it doesn't appear to be a problem with my writing:

enter image description here

It only appears with the smallest title (###) for me and looks correct at any zoom level greater than 100%.

| |
  • 2
    I think this may be a display issue with the browser you are using. I'm not seeing this here at all (other than in your screenshot). – Scott Apr 5 '15 at 19:36
  • Apparently Zach has also experienced this. It may still be an OS problem, but it's not completely localised. – Dom Apr 8 '15 at 10:55
  • 1
    Yes, I see this issue across both my Windows PCs on Chrome/FF but NOT IE when a quote is bold like in Dom's moderator questionnaire answer. See the image – Zach Saucier Apr 8 '15 at 14:40
2

Mod Tools -> Suggested Edit Stats

The stat number on the right appears to need some padding or margin above it.

enter image description here

| |
2

Accepted answers are two different colors. On the "all" and "posts" sections, the accepted answer posts have a .accept-answer-link class applied which has a color value of #508850 (like other sites). On the "accepts" section, each has a class of .answered-accepted which has a color value of #44baa2 (matches the coloring of GD much better).

Here they are side by side for comparison:

enter image description here

I'm not sure if this one is intentional or not, but it's kind of confusing as a user.

| |
2

Last Line Underflow

On the mobile site, the last line of my post inside a <sub> element is overlapping the previous line instead of flowing to a new line.

mobile site bug

This is reproducible using the mobile site on a desktop computer with the Chrome device emulator, tried both Nexus 5 (my phone) and iPhone 5 settings with same results.

It appears to be caused by the line-height:0; in the sub properties.

enter image description here

When I disable that property the issue is resolved.

| |
  • 4
    Dude. Those tabs. – JohnB Apr 20 '15 at 14:37
  • I must confess I'm a tab-hoarder lol, I can't describe just how bad it gets.. the above is child's play in comparison. :) – Dom Apr 20 '15 at 15:15
2

Mod tools -> New answers to old questions seems to be missing the proper right side container or content width.

enter image description here

Note user plaques floating off the content area.

I also noticed the user plague seems to center itself to the answer. To me, this looks odd with longer answers -- to have the user plaque just floating at the center of the height. It might be better to align it to the top of the answer. For really long answers it looks exceptionally odd to me currently.

enter image description here

| |
2

This is now fixed, it will be live after our next production build.


In the screen where the flagged posts show up for the mods, it seems the site's white background (that covers the grey graphic) is missing. It really looks like there's a </div> too many somewhere.

Screenshot follows:

enter image description here

Is this intentional? If not, please fix!

I'm on W7/FF.

| |
  • Thanks, @StéphaneMartin – Vincent Apr 30 '15 at 9:08
2

The spacing on the time for recent posts is off sometimes. I'm unsure as to what the exact cause is.

Look at the spacing between "answered" and "2 hours ago" below.

enter image description here

This has happened for me and other users repetitively but a page refresh fixes it.

| |
  • Yes, I've noticed this as well today on one of my answers however it is fixed now. – Hanna May 2 '15 at 22:39
  • I think this may be partyly due to a Chrome rendering issue – Zach Saucier Sep 18 '15 at 12:54
2

Site icons are not SVG on the "Hot Network Post", "Hot Network Questions" (on questions themselves), nor on the "Accounts"/"Communities" listings.

enter image description here

It'd be nice to see them as SVGs.

| |
2

It is now fixed, it will be live after our next production build.


Subscribed to tags on meta need a text color change......

enter image description here

And in the sidebar....

enter image description here

| |
2

The number 7 rendered with Open Sans on Windows is not the correct height at the font size used for the "top n% of category". I was able to fix it by changing the font size a little or by using a different font.

enter image description here

This also happens on vote count sometimes:

enter image description here

| |
  • 1
    But.. but... Open Sans is such a great font to read on the web :) – Scott Apr 10 '15 at 17:14
2

Side by side review comparison overlaps any images in question ....

enter image description here

Browser window width has nothing to do with this. I'm viewing at full width. The containers overlap.

| |
  • i know it's been a while, but could you double check if this is still an issue? – Paweł Apr 21 '16 at 10:11
2

The bar graph for rep isn't represented accurately for negative values.

enter image description here

One of those red bars is -268, one is -46, and one is -178... can you tell the difference visually?

Seems while the positive scale is correctly visually represented, the negative scale is not. Hover popups seem to be correct. It is merely the visual red bar which has no bearing on the actual negative value.

This isn't a big issue, but it is an inaccuracy in the display.

| |
2

It is now fixed, it will be live after our next production build.


Tag synonym pages are missing part of the backdrop:

Screenshot of tag synonym page

Related bug that's fixed elsewhere

| |
  • 1
    The button "suggest" doesn't seem to be well aligned vertically either. Thought I should mention it. – go-junta Sep 18 '15 at 5:08
1

I know that we had a similar one of these posted about the lines not lining up correctly in one of the logos someplace, but I've noticed another. The triangle's side protrudes slightly beyond the edge of the ellipse.

This is on the "Page Not Found" page.

enter image description here

| |

You must log in to answer this question.

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