Just logged into GitHub, freaked out when I saw the redesign, and came straight here to say exactly this. It's unnatural eye movement to look wide for platform navigation, then narrow for README/repository navigation. This is outright bad design.

There was nothing wrong with GitHub's UI before, it was probably the closest thing to "perfect" I'd ever encountered.

Alongside that incredibly irritating "navigate to code definition" popup, it feels GitHub has too many designers with too little to do, so they're desperately scrounging around for things to change to fill their day. Either that, or there's some monetization angle (ala the Reddit redesign) that we haven't seen yet.

This is exactly the same what I'm thinking about: what's the purpose to redesign something which was good and familiar with something which is totally unpleasant. On a large monitor you have to move not only your eyes, but your head from left to right, from top to down just to find the relevant information, which on the old github was on the right place. Too bad there isn't an option to revert to the old design.

It seems to me Github from the Microsoft acquisition is going into a wrong direction.

I don't mean it's literally bad for your eyes - there may well be benefits to constantly shifting your gaze/focus/etc. I can't comment on that.

I'm talking about "natural" eye movement being a well-known design principle. This means that eyes very naturally follow a Z pattern that doesn't exceed the periphery of your focus. So if you load up a fresh page, your eyes will naturally look top left -> top right -> bottom left -> bottom right, bounded by your standard viewbox (which is about 800px-1200px wide at 96dpi and 1-2ft, the standard distance most people sit from their monitor). So you usually stick your most important information along that pattern. Anything outside this boundary requires an extra "look", which means a slight hesitation/delay on the part of the user. That's not to say the space is unusable, just that you put your most common/important features/information along this flow.

It's also not an ironclad rule, but it does work very well. When I went to the old GitHub, my eyes always followed the same pattern: repository name (top-left, to make sure I was on the right page), account (verifying that I'm logged in), branch, clone/download, then file list or more commonly, the README (bottom-left). It was a very quick, natural way to navigate a random GitHub page.

Now, I literally have to move my head to do this. The weighting also feels completely unbalanced, like there's too much information on the left it's all slanting in one direction.

I believe for eyesight it's important to change focus, i.e. the distance of the object you're looking to. Not sure if just moving your eyes help but looking up from the screen into the distance is certainly good for the eyes.

Ya, I didn't understand this design choice. For a while I've had some custom css which also extends the width of the main content on github as well because I've always found reading some github issues with logs in them challenging.

This is the css I'm running now to fix this, as well as extend the width of the main content. The 1600px is such that when using i3 and having my browser be half the screen it consumes most of the screen space on my 4k monitor.

    :root {
        --width: 1600px;
    }

    .container-xl {
        max-width: var(--width);
    }
    .pagehead {
        padding-left: calc(50% - (var(--width) / 2));
        padding-right: calc(50% - (var(--width) / 2));
    }

To center everything I added:

  .col-md-9 {
      width: 100%;
      margin-top: 1em;
  }

  .col-md-3 {
      width: 100% !important;
      margin-bottom: 1em;
  }

  .flex-md-row {
      flex-direction: column!important;
  }

  .flex-md-row {
      flex-direction: column-reverse!important;
  }

  .BorderGrid--spacious .BorderGrid-cell {
      padding-top: .2em;
      padding-bottom: .2em;
  }

  div.BorderGrid.BorderGrid--spacious > div:not(:first-child) {
      display: none;
  }

How can I use this code snippet? Apologies if it's obvious to everyone.

People have suggested extensions here, which is fine, but Firefox also supports this natively via custom css files that it can load for you on startup. They can be used for both styling Firefox itself and for modifying websites' styling.

https://superuser.com/a/319322/1173126 (be sure to read the comments of that answer too, these days you need to switch a flag in Ff settings to enable this feature)

You can use Stylus (https://addons.mozilla.org/en-US/firefox/addon/styl-us/) to add custom CSS to websites.

On Chrome, I use an extension called 'Stylebot'. Not sure about other platforms.

You can use Stylus on Firefox (and Chrome, too.)

Thank you, this works perfectly.

Agree completely. Feels like a huge step backwards. Maybe usage metrics show most users are using a much smaller window size, but the layout is all over the place on my 27" monitor (2560x1440).

> Maybe usage metrics show most users are using a much smaller window size, but the layout is all over the place on my 27" monitor (2560x1440).

Some of us like to code with git / bitbucket / gitlab side by side with our IDE so we can reference existing issues more directly while writing code. Which reminds me I need a better screen resolution... 1080p is so 2016.

The problem is your resolution. I have a 4K monitor and have Git/IDE side by side and the layout is a real problem.

It's 30cm/1ft between the Issues button and the main table.

This may not work for your specific case, but there are Github issues plugins for various IDEs that will show you the issues list right there in your IDE. I've found them very useful.

I remember this happened before several years ago in a previous redesign where the top menu would just stretch to fill the entire screen. It was later changed to one with a proper max width. I guess they forgot that lesson.

Ha, to me it is an improper max width. My biggest peeve with the GitHub web UI is the squished center pane.

I hate that it centers it with giant gutters wasting over half the width of a 4K monitor, should I choose to maximize a browser window. I'd much rather see everything shifted to the left. I'd even be OK with some soft margin still causing regular README text to wrap at a typical width.

But, if there are long code or raw text lines, or any embedded image or markdown table or other structure that is inherently wide, I want it to overflow and use that extra screen space, not get clipped into this ridiculously narrow bowling lane. That's my instinctual desire and the only reason I would expand the browser to full screen, and it is an utter disappointment to try that and be told, "no space for you."

Sorry but do you use full screen windows on a 4K monitor? I doubt any website is really designed to fill anything more than ~1400 horizontal logical pixels.

I don't usually. But if I do, it's because I just encountered something like super-wide content and I want to make use of that big screen. I don't do it because I'd really like to see someone's opinion about how all content should cram into a narrow viewport and have massive blank margins...

The current 13" Macboook Pro has a hardware resolution of 2560x1600. The screen resolution will be the same if you switch off display scaling. Pretty much everyone using one will have maximised windows because it's physically small.

You really need CSS that accounts for resolution and pixel density these days.

I do. In the age of various resolutions and screen sizes and css frameworks, websites can and should be designed to look reasonable on any number of horizontal logical pixels. If it isn't supposed to be wider than 1400px, that's what css's `max-width` is for.

Its much worse when you are using an ultrawide monitor. Before this change I can just look at the center of the monitor and see all important things, while now I can feel my eyeball moving trying to read everytihng

Yep, I have the exact same issue. I started to use the new design via their beta program, I had to stop after a few days because the content stretches from one side of my screen to the other. I hoped they would fix it before release.

Seems like a bug or probably an oversight. Don't think that was intended

I hope so. I just noticed their beta period ended.

I am not sure if they changed anything from how it was previously in the beta.

I don't think the new design is bad, it's just different. It's fine tbh, but these top bars are pretty bad on a big screen.

Hopefully they'll change that soon enough.

Except that MS Teams is designed exactly the same way.

I think they designed it using regular sized screens, works fine on my 13'' laptop.

Honestly - pretty refreshing, designers typically forget to test on low end monitors - not high end ones!

I feel my eyes having to move around a lot more due to the increased layout width.