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.

  • 5
    Can we have an option to turn it off? – Matt Aug 9 at 17:38
  • I’m giving it a spin on mobile. Wheeee! More changes are likely on the desktop version I presume. – bmike Aug 9 at 19:15
  • 8
    If we don't like the design should we downvote this? – JBis Aug 10 at 3:05
  • Also didn't we use to have shadows around images. Not if they are white its difficult to see when we go from webpage → image. – JBis Aug 10 at 12:54

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.

enter image description here

The themeless beta sites look better than the themed ones now

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

  • 1
    Note that the themeless beta will look like Programming Puzzles & Code Golf (the only beta site currently on trial) – Andrew T. Aug 9 at 16:06
  • 4
    Ah... so just as bad :/ I bet the guys on Graphic Design will have kittens when it goes live on there. They currently have a nice font too, not the hideous squashed thing we've now been dumped with. – Tetsujin Aug 9 at 16:15
  • I disagree - it's all lovely - the design is clean and crisp and there is light and space. What I wouldn't argue with is if your criticism is actually about less functional - and I'm certainly going to need to unlearn some habits and let my brain adjust to the new flow. Any change will be disruptive, but I'm thinking this will be better in the end for me but I can see how some might never prefer the changed flow. – bmike Aug 10 at 11:49
  • 4
    @bmike - Honestly, I really hate it. The new font is crushed & blurry compared to the old. The left nav is a waste of space & once removed, removes functionality. The entire header is larger & more distracting because of the jumble of elements, yet contains less info/links. I have to say the recent top bar - the black bar - is much better than before, with the burger menu etc, but this new layout is not a forward step, it's a backward step. – Tetsujin Aug 10 at 12:07
  • 1
    The "Ask Question" button should probably be a bit more obvious than in your mockup. – nohillside Aug 10 at 12:25
  • Left Nav function is in the hamburger menu when you hide it. It’s good to have opinions and express them - this is the place for very honest feedback. +1 Also - the burger menu animation is pretty slick but I can’t tell someone they’re wrong if they hate that visual effect and take it as affect. – bmike Aug 10 at 14:37
  • @bmike - ugh, I didn't see that... & that's not the burger menu I meant. I was talking about the top right-most icon, which is kind of an SE-burger...thingy. – Tetsujin Aug 10 at 20:13

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

  • 3
    Even better, the system font San Francisco – grg Aug 10 at 19:33

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

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.

enter image description here

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.

enter image description here

Let the mayhem begin :-)

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

enter image description here

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?

  • Would you like a custom “Cadillac” layout like the photo page to consume the white space around “Top Questions”? photo.stackexchange.com – bmike Aug 9 at 22:31
  • 1
    @bmike looks much better, yes! – nohillside Aug 10 at 4:48

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.

enter image description here

  • I find I'm hitting the ask button a lot in the new layout when I have no intention of asking. Time will tell if I'm just trained to not poke near where it used to be or if in fact this new design makes it too easy to tap or brush that button - especially on iOS – bmike Aug 10 at 11:44

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

whatnow?

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.

You must log in to answer this question.

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