As a front end developer it really pains me to see such a schoolboy error from the likes of the Stack Exchange team.

Please change this:

enter image description here

To this:

enter image description here

It took me 20 seconds in devtools to rearrange this html, you're wasting vertical space and it looks bad compared to before.

I guess it's been done for responsive reasons, but I think from desktop screen width upwards you can fit everything on one line.

  • 3
    Its great that I have a 34 inch monitor and SO sizes to 1024x768.....
    – ΩmegaMan
    Jun 13 '18 at 1:25
  • 3
    Not saying things can't be improved, but things are always easy until they aren't. Most of those question lists have information that shows in the "blank" space. And, as you mention, this works well for full width viewports, not so much for smaller ones.
    – Joe Friend
    Jun 13 '18 at 2:02
  • yep I know how annoying making a responsive design work can be, but I think it wouldn't be very much extra code to add this to desktop viewports. I'll write the media query myself even lol
    – Pixelomo
    Jun 13 '18 at 2:32
  • 4
    It feels like the new layout was made just for people on mobile. But imo 99% of all users use stackoverflow on a normal monitor at work or home. Jun 13 '18 at 8:07
  • 1
    I don't like the new stackoverflow desktop view.
    – K.Sopheak
    Jun 13 '18 at 8:39
  • @TimSchmelter yep I can't remember the last time I looked at SO on my phone
    – Pixelomo
    Jun 13 '18 at 23:42

I'm not saying this can't be fixed, but please remember that this design is responsive, at least partially to cater to users on screens that are smaller. Moving that content up is a solution but it makes it so that the page can't collapse as much before losing the right sidebar. On top of that, we'd lose some page consistency, which is usually a good thing. Below are some illustrations of this, using MSO as an example.

For example:

Here's the site's minimum page width with both sidebars:

Minimum page width with both sidebars, much less white space, tabs are too long to fit between "Top Questions" header and "Ask Question" button

As you can see, there's not sufficient room between "Top Questions" and "Ask Question" to fit the four tabs "active", "hot", "week", "month".

Collapsing further than this shoves the right sidebar to the bottom of the page... which is (I'm guessing) why the "Ask Question" button isn't in the right sidebar any more.

Here's what the page looks like when it's just a touch narrower:

After the right sidebar pops to the bottom of the page, there's a lot of white space again

If you test this yourself, you'll find the entire right sidebar is hanging out between the page content and the footer.

If a solution can be found that still allows users the full site content - both left and right sidebars and the main page content - that'd be great but I do understand why they made the decision they did about the placement of these tabs.

This gets even more complicated when you're on search results pages, which add the number of results next to the tabs, more tabs, and longer text than "Top Questions".

For example, here's a tag search result for :

Full width page view shows much more usage of whitespace when content is something other than the Top Questions view

And, at the narrower page width, this still looks really nice and full, as the long search header wraps to a second line along with the "questions" text moving below the quantity of results:

Narrow width page view shows good wrapping and limited whitespace

So, for consistency between the different pages, I'm not actually sure there's a better solution. Yes, it does look a bit barren on the Top Questions page at wider views but everywhere else it looks good with just enough white space to separate the areas of the header.

  • lots of good points, I wonder though if the title were moved up on to it's own row and then the tabs + ask a question shared the next row they'd fit on small responsive widths
    – Pixelomo
    Jun 13 '18 at 2:57

How about something like this?

enter image description here

Since "active / hot / week / month" modifies "Top Questions," I agree that they should be next to each other.

You must log in to answer this question.

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