347

As you can see, Meta.SO looks a bit different today. Over the years I've gotten a lot of requests to "redesign" Stack Overflow. I've always felt SO's site design had good usability and was very functional. However, I did and do agree, aesthetically, it could use some polish.

Today's new Meta theme release is a preview of what the new SO main site theme will be. As you can see, it still feels like Stack Overflow. Most changes are for typographical consistency, white spacing and layout. It may take a little getting used to but hopefully if you give it a few days you'll like it better.

We've also refined the Stack Overflow logo slightly for better kerning and a more relaxed curve on the mark. We've updated site icons to svg (with png fallback) to finally get scalable retina support. I feel this is a better approach than using x2, x3..xN pngs since it's more maintainable.

Underneath the skin, I've been reworking our LESS/CSS structure as well. The newly refactored set up would allow us to fix SE Q&A sites' CSS bugs more efficiently and be a lot more bug free when we launch a new site.

We want your feedback. This is still a work in progress. There are going to be styling or CSS bugs, so if you find any please tag them with and so we can fix them as soon as possible.

77
  • 161
    Can we have the ugly meta logo back? Commented Nov 19, 2014 at 1:21
  • 83
    Is that really better kerning? The space in 'rf' seems too big, and the space in 'low' seems too small.
    – bmargulies
    Commented Nov 19, 2014 at 1:25
  • 18
    OMG change! I was a little startled when my refresh looked so different. Initial reaction is that I kind of miss the bolded titles, but having the text a little closer in size/weight does make it easier to read. Just don't go full on Metro (sorry, Microsoft design language). Commented Nov 19, 2014 at 1:28
  • 12
    Minor, but the badges are missing a hover effect. Is there supposed to be one?
    – animuson StaffMod
    Commented Nov 19, 2014 at 1:38
  • 11
    So it now lookz like pt.SO? I can't say I love the new design. Older was better.
    – nicael
    Commented Nov 19, 2014 at 4:23
  • 34
    Are you guys rebranding to Stackover Flow as well?
    – tmyklebu
    Commented Nov 19, 2014 at 4:53
  • 53
    Suggestion for site background: i.snag.gy/AOKxV.jpg
    – Jason C
    Commented Nov 19, 2014 at 6:37
  • 14
    previous logo was better i think..
    – Haris
    Commented Nov 19, 2014 at 8:59
  • 37
    Bog standard Courier for code, yuck. The main site uses Consolas, which is much better.
    – Jongware
    Commented Nov 19, 2014 at 11:29
  • 26
    it's so hard to read the comments. Could you increase the text font size? Commented Nov 19, 2014 at 12:03
  • 44
    When users upvoted comments the number beside it turned redder the higher it was. Was this feature scrapped?
    – TNT
    Commented Nov 19, 2014 at 13:55
  • 13
    Maybe my eyes are tired after a long day at the keyboard, or maybe it's just psychosomatic but... The comment font seems worse, maybe it's a different size or font or the anti-aliasing is different, but it definitely seems less readable.
    – Klors
    Commented Nov 19, 2014 at 18:31
  • 13
    Can I assume this just went live on SO? Commented Jan 16, 2015 at 2:59
  • 16
    Why did this go live on SO when there were apparently still so many issues (which didn’t get fixed on SO)? Also, can we get a new question to discuss this since this one is old and so overused already? It’s hard to navigate.
    – poke
    Commented Jan 16, 2015 at 7:06
  • 16
    I'll let my eyes speak: Pre update they didn't hurt, now they hurt when trying to read through the front page. Yes I am serious and I think it's a big issue.
    – Jite
    Commented Jan 16, 2015 at 13:54

85 Answers 85

1 2
3
5

The vertical margins between li > p and li in nested lists have never really been consistent on any site where I am active, which has been one of my greatest pet peeves when writing nested lists. Could this get a fix?

  • Margins are consistent if both the outer and inner list items are li > p, as expected:

    • Item

    • Item

  • Item

  • Margins are wonky towards the bottom if the inner list items are not li > p and the only workaround is to give all the inner items paragraphs, even if the inner items are single lines:

    • Item
    • Item
  • Item

This happens because p and li (well, :matches(.post-text, .wmd-preview) :matches(ul, ol) li anyway) have only bottom margins defined, and not top margins. I suspect this is for a good reason, so I won't ask for top margins. However, it should be as simple as either making the bottom margins equal or, possibly, making only li > p bottom margins the same as li.

5

I have a small bug that I think is one, Forwarded here by JasonC, from another thread: Google Chrome shows broken text on Stack Overflow

My Specs:

  • Running Chrome Version 39.0.2171.65 m
  • Windows 8.1
  • I have NO extra fonts installed and browsing with Zoom 100% (Original)

The Bug: The overlapping of gray background over the @ symbol is a small spacing overlapping bug right? Picture:

enter image description here

1
  • I can also confirm that on 39.0.2171.65 m on Windows 7, the gray background behind the username extends above the descender on the previous line. My "@" does not hang as low as in this picture, but the gray square overlaps my "g" by one pixel in comments. I didn't notice this before, not sure if it is related to new font tweaks.
    – Jason C
    Commented Nov 23, 2014 at 17:51
5

The icon on this screenshot is clearly not in high DPI, so it looks blurry on Retina™ displays, for example. (Compare to the nearby text)
screenshot

(I'm using Firefox on OS X 10.10)

6
  • Would you mind uploading the screenshot to imgur using the image upload tool in the editor?
    – nhahtdh
    Commented Nov 24, 2014 at 8:58
  • @nhahtdh Done (2 more to go...) Commented Nov 24, 2014 at 9:38
  • 1
    That icon comes from a massive sprite sheet that contains all the icons for the entire network. I don't think you'll see that fixed any time soon, nor does it have anything to do with this new design.
    – animuson StaffMod
    Commented Nov 25, 2014 at 16:29
  • 1
    It looks blurry on all high-resolution displays, not just Apple devices/computers.
    – AStopher
    Commented Nov 25, 2014 at 16:39
  • @cybermonkey yes, of course! that's why I wrote "for example". Commented Nov 25, 2014 at 18:49
  • @animuson meta.stackoverflow.com/content/img/…
    – bjb568
    Commented Jan 18, 2015 at 0:15
5

Just thought I'd mention the broken tags when editing a question:

enter image description here

Also the misaligned 'Edit Summary' box, however this may have been intentional.

2
  • I reported this separately because it's not specific to this design, just much more prevalent.
    – animuson StaffMod
    Commented Nov 25, 2014 at 16:27
  • @animuson Interesting, I haven't seen this happen before.
    – AStopher
    Commented Nov 25, 2014 at 16:37
5

The "Help" icon of the questions/answers editor is middle-outside the editor on Firefox 35.0 (Mac OS X 10.10.1).

enter image description here

Good work anyway, I really enjoy the new color highlighting :-).

1
  • 1
    It's back again (on the wrong place). Firefox 36.0.1 on Windows.
    – TLama
    Commented Mar 14, 2015 at 20:24
3

The black top border on the sort menu-items is too dark and noticeable.

Please change it to the same color as the left/right borders. (or maybe just a tad darker)

enter image description here

0
3

Upvote/downvote stats in Linked/Related questions are a clutter. There has got to be a better way of displaying this.

An idea (ignore the code. Just run the code snippet):

* {
  font-family: Roboto;
  font-size: 12px;
  }
td {
  padding: 5px;
}
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<table style="width: 200px;">
  <tr>
    <td style="text-align: right;"><span style="color:green;">23</span><br/><span style="color:red">4</span>
    </td>
    <td>How to foo the bar in Foobaz?</td>
  </tr>
  <tr>
    <td style="text-align: right;"><span style="color:green;">4</span><br/><span style="color:red">-1</span>
    </td>
    <td>How to foo the bar?</td>
  </tr>
  <tr>
    <td style="text-align: right;"><span style="color:green;">1k+</span><br/><span style="color:red">11</span>
    </td>
    <td>How to foo the bar in Foobaz while having a fubar?</td>
  </tr>
  <tr>
    <td style="text-align: right;"><span style="color:green;">8</span>
    </td>
    <td>How to foo the bar?</td>
  </tr>
</table>


Please make "meta" part of the logo text same size as the rest of the text. Much like Stack Overflow Careers' logo.

Or, if you really want to have smaller text, make it a superscript.

(Ignore the font weights and colors. I hope you get the idea.)

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<p style="font-family: Roboto; font-size: 32px;"><span style="color:gray">stack</span><span style="font-weight: bold">overflow</span><span style="color: red">meta</span></p>

<p style="font-family: Roboto; font-size: 32px;"><span style="color:gray">stack</span><span style="font-weight: bold">overflow</span><sup><span style="color: red">meta</span></sup></p>

3

The old font is more readable to me, maybe the font used could be changed? Readability in the buttons, is also much better in old version.

I always think that less is more, so when you start adding unnecessary stuff to a page it becomes bloated. The old one is perfect, so why changing?

I think if you just create a pool and let everyone vote if the design should change or not, most people will vote against it. Most people don't like changes when it comes to websites, because they are used to it already.

My request, please don't change.

2
  • The new design is ok right now, it needs some fixes as the many answers show. Changes are not bad, especially when we can make those changes better incrementally. Commented Nov 20, 2014 at 15:13
  • @JonathanDrapeau they are bad when it hurts to try to read the new style
    – mmmmmm
    Commented Jan 16, 2015 at 17:59
3

Today, I'm trying to edit my existing tags, thus what is show me in "edit mode" enter image description here

Each favourite tags with two delete buttons, and yes, I am able to remove it by clicking any of the delete buttons.

P.S. When I refreshed the page it will changed to normal, but after sometime when I back, it'll have the same look as above.

3

Kerning seems off in the normal font in questions / answers. Not sure if it's the font, the css, or my browser (Chrome, Windows 7). Here's a few examples I found in the question and answers on this post.

the c and o in "icons"

between the c and k in "luck":

2
  • On mac Safari, that bottom part doesn't show the issue with kerning. i.sstatic.net/liUMh.png
    – user289086
    Commented Dec 16, 2014 at 21:20
  • @MichaelT font rendering on Macs is completely different than Windows, see joelonsoftware.com/items/2007/06/12.html. I can duplicate the problem on Windows 7 and Chrome. I also see it in IE10 but it's less severe. Commented Jan 16, 2015 at 22:19
3

I like the overall look of the new site, however one thing which is instantly causing an issue is that the background colour for questions "i might be interested in" is so faint that you can't instantly distinguish between them and the ones not interested in.

I'm talking about this:

enter image description here

It used to be so obvious which questions fell under the tags I've selected, now it's very difficult to see.

Taking the opacity off of the background will do it! or using the colour from "hot topics" :-)

3

The new style became "flat", like Android 5.0.

For instance the star button lost its' 3rd dimension. At the first look it looks like a piece of paper, but I am a fan of more 3d look despite that now clean, flat fashion becomes more popular.

The font itself is probably better in terms if readability.

1
  • 1
    The font sucks, at least the one I'm seeing a lot. It's a sanserif font with very little spacing between the letters and it has the same readability problem as ALL CAPS.
    – Hot Licks
    Commented Jan 16, 2015 at 21:43
3

The different coloring of visited vs non-visited links in the footer is unnecessarily conspicuous.

footer

  1. Turning visited links into gray gives the impression that you're done with the items. In turn, the remaining red links keep signaling "click me!" as if they are todo items, which they are not.

  2. The footer is there for navigation. As users are going to click through the navigation items many times whenever they need to do so, whether or not they visited the link before isn't vital information.

I suggest toning down the difference in a way similar to how it's done in the Beta theme: adjust the lightness/saturation while keeping the same hue.

Beta theme

3

What happend on the "User Profiles"?

enter image description here

1
  • 1
    yes this is a bug we're fixing
    – Jin Mod
    Commented Mar 5, 2015 at 16:40
2

On my iPad, there isn't enough padding on the sides, even in landscape mode.

The logo, title, votes, pagination, answer box, answer button, basically everything left-aligned is too far to the left.

Also, the search bar overflows the top bar.

Edit: just saw https://meta.stackoverflow.com/a/277223/3187556 reporting the left padding issue. Well, i still have the search bar report.

2

The top of the tabs seem a little close to the about me box on profiles:

enter image description here

2

The left section contains Home, Questions, Tags and Users

IMHO it seems to take up a lot of screen space especially if the post spans across multiple pages, it is blank white space which could be better served.

As a result of this the the actual content is cramped and now the similar questions and the right section also is fighting for this space.

Roughly around 1/6th of the width (left portion) is just white space, would be better to keep it on top like previously.

Note: I am no design expert, this is just a feedback as a user, thanks

Left side bar takes up a lot of space

1
  • Yes, thank you! It is cramping up good content. This could have been a drop down. When did we ever have an issue with "Questions", "Tags"? Commented Jun 14, 2018 at 9:42
1

The user who a bounty was awarded to is too large.

enter image description here

0

Consider reducing the padding and margin on tags (particularly the vertical padding). The current settings mean that tags increase the line-height unnecessarily. Some new settings might be:

.post-tags {
    padding:.1em .4em;
    margin:1px 2px 2px 0;
}

The difference is shown below (current on left, proposed on right):

Two text samples, one with current settings for tag padding and margins and the other with proposed changes.

1
  • 1
    Your proposal looks ugly and it doesn't strike you right away that it is a tag. Either way, it is not a new thing introduced by the recent change - the design for display of tag in post body has been like this for at least 2-3 years.
    – nhahtdh
    Commented Nov 27, 2014 at 9:08
0

Did something change with how the SO icons are presented or linked, other than the SVG upgrade mentioned? Basically right now none of the SO icons are coming through; my topbar is solid black except for the plain text and my gravatar image. The comment flags on this post don't show, unless I'm not able to see them anyway.

The reason for this I'm pretty sure is because of my company's web blocking firewall software, so I don't think it's really an SO problem. But is there anything I can point to in having them allow that could be preventing the sprites from loading or something?

3
  • For whatever it's worth, this is a message I get in Chrome Dev Tools: Resource interpreted as Image but transferred with MIME type text/xml: "http://cdn.sstatic.net/img/share-sprite-new.svg?v=7966d6d82b78". Commented Nov 26, 2014 at 19:30
  • I'm looking through any old missed reports - I can't repro this though, are you still seeing the issue? If so which OS/Chrome version?
    – Nick Craver Mod
    Commented Jan 18, 2015 at 13:36
  • Thanks for the comment! I actually created a question with more details (meta.stackoverflow.com/q/281337/278763), but it looks like it's probably my corporate firewall blocking something. I'm not sure yet what to request of our admins to change, but that explains it. Commented Jan 19, 2015 at 16:19
0

On mobile device (iPhone 6) the SO and navigation icon is kind a broken...enter image description here (not sure if I toggle the nav or reload the page)

2
  • 1
    How is it broken?
    – Jin Mod
    Commented Aug 15, 2016 at 15:56
  • @Jin it shows an icon and half a icon.. is that not broken?
    – caramba
    Commented Aug 15, 2016 at 15:56
0

When I search for a bunch of tags, now they appear at the top of the page in a really big font.

I tried to find a screenshot for the older design, but I'm unable to. I remember that the tags were displayed on the side, without this huuuuge title.

I think this help a lot with the clarity for shorter queries, but there could be a limit. E.g. If the header would take >50% of the screen, either summarize the search, use a smaller font, revert to the old side option, ...

You should be able to see it for yourself by visiting the same link.

search for multiple tags

7
  • 9
    You just answered a 3 years old questions ^ ^
    – Adam
    Commented Jun 13, 2018 at 10:32
  • @Adam Damn, I just searched in meta for "new stack overflow design", this feedback showed, and I don't even know why I thought it was related... This will show me to look at the details! Thanks for the heads-up, I'll try to hone my searching skills and look for the relevant post.
    – Jofre
    Commented Jun 13, 2018 at 10:35
  • Funny how a lot of the same complaints come up though... People are really sensitive to white space :). Commented Jun 13, 2018 at 17:34
  • In case someone comes here, this looks to be the proper thread.
    – Jofre
    Commented Jun 13, 2018 at 18:35
  • 2
    Also meta.stackoverflow.com/q/369366/2960971 on meta.SO is directly about it (and not locked so you can actually respond/vote). Commented Jun 14, 2018 at 13:18
  • @IncredibleHat True! I don't know what's going on with my searching skills. I think I need a vacation...
    – Jofre
    Commented Jun 14, 2018 at 13:51
  • Its ok, I didn't find that either when I was looking for other people annoyed by the header change. I ended up 'fixing' it using adblockplus (in chrome) and simply blocking that specific h1 element. Others fixed it in firefox with a css override. Not sure how to fix it in Edge, or Opera. Commented Jun 14, 2018 at 15:25
-6

The older questions have 'ask' should also tell months along with years ago, For e.g see this screenshot belowenter image description here:

Questions was asked in Dec 2010. So it is 3 years and 11 months old. And asked is saying 3 years ago. It should say 3 years 11 months ago!

Thanks

4
  • 7
    But how is it related to design update?
    – nicael
    Commented Nov 23, 2014 at 10:52
  • Also, does this really matter that much? It is close enough to the real date.
    – user2961646
    Commented Nov 24, 2014 at 6:27
  • 2
    it would have been close to real date if it said 4 years ago. As it is 3 years and 11 months old. so saying 3 years old is not close to real date.
    – user2603796
    Commented Nov 24, 2014 at 6:45
  • Hard to get ones shorts in a twist about this issue.
    – Hot Licks
    Commented Jan 16, 2015 at 21:45
-7

Make the links blue with a line under them. Visited links can be purple.

This is a developer site so those are the correct colors for it.

Even more awesome would be to remove the colors from everything and use the system colors.

If you are still coding in a text editor with a white background you simply haven't done enough of it. Switching from a dark editor to a stack overflow page is like someone is pointing a spotlight in your face. What is up with that? Am I being interrogated here? lol

The idea behind the bright white is to render the rest of the room invisible to the user, this is not something we need here. There are no products to be sold.

System fonts, system colors and system buttons. Make a nice design using padding, lines and icons but leave the rest the way the visitor likes it. If people don't have the system colors configured it looks precisely the way it looks now. The shocking reality is that developers who did configure it know what they like better than any design team. A truly terrifying idea I know, sorry to be the one to bring the bad news. lol

I know you have your own ideas about design but surely the fact I know what you like better than you is irrefutable at this point. hhahaha

good luck & keep up the good work!

-9

If Header is fixed then it will be good, because if some comments are posted we will note be aware.

1 2
3

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