10

Just want to give you a heads up that I pushed some design tweaks to our dev server. The changes will go live after our next production build. Visually it should "feel" the same as the old site with slight layout adjustments.

We are moving the site's CSS to a newly refactored LESS system, so that it's easier for us to fix SE network CSS bugs globally and launch new features in the future. This update should retro-actively fix most of the old design bugs. If you see any new ones, or old ones not yet fixed, please post an answer here to let me know!

3
  • 6
    So much white space... total waste of my monitor size. Do you guys realize some people use SE with a computer?
    – Franck Dernoncourt
    Mar 24, 2015 at 1:16
  • 2
    @FranckDernoncourt Agreed. Try it out on an 11" Chromebook for maximum effect!
    – fredley
    Mar 24, 2015 at 22:03
  • Poke @Jin: Any updates on these bugs?
    – Private Pansy
    Apr 23, 2015 at 0:31

9 Answers 9

Reset to default
24

The amount of whitespace in the new layout seems excessive. This is especially apparent anytime a header is involved. The space above and below the question title, for instance, is more than 1x the height of the text. It also reduces the information density on important pages, like question listing, quite dramatically. Compare:

with a tweaked version with less whitespace

A (very non scientific) count on the number of questions displayed shows about 15% more questions displayed just by reducing the padding around each question slightly (I've also slightly increased the font size on the counters)

The top of the voting arrow on the left side now sits below the top of the first line of text. I think it looks better if it was above, or aligned flush with the top of the text.

The top tabs (.mainnavs) is misaligned by 1px, as seen in the screenshots above. This is observed in Firefox and IE, but not Chrome.

2
  • 17
    It's like Google Mail all over again. Needs a 'Compact' option for powerusers.
    – fredley
    Mar 23, 2015 at 15:04
  • 1
    Did the font size shrink or was that a visual illusion because of the extra space? Somehow your tweak pic feels more readable than the main page.
    – Troyen
    Mar 24, 2015 at 19:12
21

Meta featured tags are not looking so hot, I think it's because they're visited links:

enter image description here

3
  • Strange, I don't see that on any browsers I use. Maybe it's a mod thing? (Jin doesn't seem to have a diamond here)
    – Private Pansy
    Mar 23, 2015 at 13:49
  • 1
    @PrivatePansy Have you visited the link?
    – fredley
    Mar 23, 2015 at 13:50
  • Ah yes, :visited links. Hah, can't believe I missed that. Speaking of which, :hover on tags are also broken on Meta
    – Private Pansy
    Mar 23, 2015 at 13:51
14

Flag box seems to inherit transparency from parent post, and has bad z-order when that post is greyed out:

See the badness

This doesn't seem to effect regular posts, just those that have hit the downvote/negative score threshold.

1
  • The inherited transparency is a relatively old issue that's independent from the CSS. The z-index bug is new though, I think
    – Private Pansy
    Mar 23, 2015 at 23:48
11

Mod Tools

Flag count is in the wrong place, and the user info on the right hand side is too spaced out.

enter image description here

Users page, visited link in count should be white:

enter image description here

It's even worse on meta:

enter image description here

Same page, counts not centered:

enter image description here

History page, too much space at the top, and the count on the left hand side is not centered with the text:

enter image description here

These two colours are too similar:

enter image description here

Locked posts counter doesn't have a style:

enter image description here

Flag handling dialog could do with some padding/margin TLC:

enter image description here

and the decline action buttons could do with better spacing/weighting:

enter image description here

These numbers on the user page aren't good either:

enter image description here

and neither is this alignment:

enter image description here

This has been Your Peek At Mod Tools.

4
  • our Mod tools section's html and its css class calls are a bit of a mess. I'll be fixing these. thanks for the bug reports
    – Jin
    Mar 23, 2015 at 13:49
  • 1
    @Jin I knew the work was janitorial in nature, but I wasn't expecting the whole back-room aesthetic too :-P
    – fredley
    Mar 23, 2015 at 13:52
  • 1
    ha funny you used the word "janitorial." I've been calling myself a "CSS janitor" for the past few months as I convert old sites to the new LESS set up, while fixing bugs.
    – Jin
    Mar 23, 2015 at 13:53
  • @Jin Sounds fun, though I'm more of a Sass man myself!
    – fredley
    Mar 23, 2015 at 14:20
9

The review buttons feel too big. And now that I'm typing this, so does the font in the answer edit box. In fact, as pointed out by @PrivatePansy, everything feels too big and airy. What's the opposite of claustrophobia? Because I'm feeling it now.

1
7

Tabs are placed one pixel too low:

Look at that placement :O

It's not terribad when none of them are selected, but it's really noticeable when, say, the Users tab is selected.

3
  • 1
    It only happens in IE and Firefox, but not Chrome. I'm guessing it's a pixel rounding issue, but I'm still looking for where it came from
    – Private Pansy
    Mar 23, 2015 at 23:47
  • yes, I was using Firefox when I saw this.
    – MBraedley
    Mar 23, 2015 at 23:48
  • Looks normal in Opera as well.
    – Kodama
    Mar 28, 2015 at 9:19
6

The line between answers is barely visible, at least on my monitor.

enter image description here

6

Not sure about how many people feel the same but I liked the grey highlighting on the Hot-Topic and Featured meta posts.

enter image description here

I'd really like to see some kind of highlighting here to distinguish the hot meta posts from the hot network topics. (Probably light blue for meta.SE and light grey for meta.gaming.SE ?)

2

Visited links are still too dark. They blend in with the surrounding black text. This was brought up in 2012, and the color has not changed since. Here's another picture to demonstrate:

enter image description here

You must log in to answer this question.

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