Ask Different new site theme is live

Question

We rolled out the new site theme for Ask Different. It is now live.

What new theme?

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).

Your help needed

You are one of the first sites to get a new, unified theme. I previously posted the designs for theme in meta. The feedback given to that post was considered prior to rolling out the theme. Please help us look for issues/bugs and post the details (including images where needed) as an answer below.

If you have concerns or issues regarding the left nav then this Meta Stack Exchange post is the right place for feedback. If you have issues with any functionality that is unrelated to the new theme, then please post a new question.

Answer 1

It's all very ugly, isn't it?

We've lost the nice Apple-specific font, by the looks of it, looks exactly like SuperUser now...
boxes round the headers, increasing the wasted space & drawing the eye away from the actual questions,
'Ask Question' stuck out all on its own
& lovely new yellow highlights for watched topics:/

Edit:
Long term I gave up on the yellow highlights altogether, unwatched all tags & ad-blocked the watched tag sections entirely. Too much yellow.

The themeless beta sites look better than the themed ones now

...and, after comments, I just noticed more 'loveliness'
not only do we have the permanent grey upvote/flag icons I already moaned about,
we also now have 1992-style underlined links !

BTW, I only 'watched' a topic to get rid of this mess...

& of course, I switched off the left-nav immediately.

Would it not have been better consolidating it with the already "full of random bits" right side?
It has precedent for being the space to fit all the bits that don't readily fit anywhere else - they have to go somewhere & that's as good as any, imo.

I did my own mockup... but it didn't take me long to realise all I was doing was putting most of it back where it was [& getting rid of the yellow] though I had to pull a lot of elements from the beta picture as they're gone from the site in their older form.

Answer 2

Having Arial before Helvetica in the font stack feels very wrong for an Apple-oriented website.

Answer 3

These changes have lost so many intricacies of the site.

Font

Arial doesn't fit at all with anything macOS. Helvetica is an improvement, but the system font is preferable on macOS.

html, body, .question-summary .question-hyperlink {
    font-family: -apple-system, "Helvetica Neue", sans-serif !important;
}

Tags

The tags don't have properly rounded corners any more, instantly losing the uniqueness of them to this site.

.post-tag {
    border-radius: 1em;
    padding: 6px 12px 5px;
}

Before vs After

Favourite tagged questions

The blue highlight has been replaced with some sort of yellow that doesn't fit with anything else on the site.

.tagged-interesting {
    background-color: #eaf5ff;
}

Before vs After

Shadows on non-overlapping elements

Why are these raised? Why so much whitespace?

.s-sidebarwidget {
    box-shadow: none;
}
.s-sidebarwidget--header {
    padding: 7px 14px;
}
.s-sidebarwidget--content {
    padding: 6px 14px;
}
.s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action), .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):visited {
    font-size: .9em;
    line-height: 1.4;
}

Before vs After

Answer 4

Ok. I like it, quite a lot - I get some have strong feelings on font faces, but the content so far is readable to me and the changes / animations are clear and useful to me. Especially the left side nav that can be on or off as I please. One minor quibble is an odd (to me) pixel shadow on the rainbow. I thought I had a problem with my screen initially until I realized that was intentional.

And the ff ligature and title kerning makes me swoon

---

1. I would probably compress the top and move the Ask Button up if I were still open to the idea of how much white space belongs at the top. It's always a fine line between dense enough and too dense, so I might change my mind after you tighten things up so this is an initial read.
2. I would definitely kill the question count for All Questions or have it inline “All 90,000 Questions” - that's way too prominent and takes up space that should either be totally free to cleanse the palette or used for content. Another suggestion is put that number in the ads section for people that don't turn off advertisements. By the time someone reaches that rep level - they don't need to know how numerous the pool of questions is today.
3. Once the Ask Button was up, I might send it right as well over the yellow stickie where guidance and help and notices live. You'll want some metrics on that button - I'm thinking it's going to get tapped a lot on iOS when people don't actually intend to ask a question.

Answer 5

Let the mayhem begin :-)

With the left nav bar turned off, the top of the screen looks a bit strange IMHO:

Maybe the distance between the top bar and the site logo/title is a bit too small, or there are just too many different fonts used in the various UI elements, or the white space around "Top Questions" is too big, hard to say.

Could one of the UI expert have a look at this?

Answer 6

To second bmike‘s idea of moving the „Ask Question“ button: At least on the iPad the button is in a very odd place if you look at a specific question.

Answer 7

status-planned

As a first impression, this is… what now?!

Four different header bars, an ad banner and a footer bar all competing for space, only the third of which tells me the site's actual title (Or is that another ad banner? I have no idea. 🤔), and the actual page content I came for starts somewhere halfway down the screen sandwiched between lots of stuff I don't immediately care about.

This is quite a mess IMO.