XL Layout for docs

[wackerow]

Having looked at this more closely, I'd recommend a few tweaks to solve the XL-width issue–whilst keeping a good reading (and aesthetic) experience for the user.

First screen: 1920x1080

After 1504px, I recommend moving away from the main content being slightly left-aligned. This allows for a more conventional 'reading focused mode' to begin–whereby the content will have an equal margin on either side of it.

From my experiments in Figma, the width of the Contents should remain at 640px until it hits 1920 width. At this point, I'd suggest increasing the width of the content to 700px to make the content look more appropriate for larger screen sizes–without damaging the reading experience.

Second screen: 2560x1440

Expanding the entire view to fit XL screens is difficult to get right; the navigation often ends up too far away from the main content and ultimately, one thing will always suffer.

Hope this is of some use. Let me know your thoughts/comments ✌️

Originally posted by @Scott1UP in https://github.com/ethereum/ethereum-org-website/pull/2671#issuecomment-917183413

---

Resurfacing this feature request as a new issue and opening up to anyone who would like to contribute, using the above design concept as a guide. (Original issue #1780)

[howdyAnkit]

Hi, @minimalsm @wackerow can I get assigned for this?

[minimalsm]

Hey @howdyAnkit thanks for offering to help on this! I've assigned you. Any questions feel free to ping here or on Discord. 👍

[wackerow]

Hey @Scott1UP, was wondering if you wouldn't mind providing some clarity on the above. @howdyAnkit (Hey!) has offered to help out with this, but I think it does need a little clarification of how this should transition from a medium sized screen all the way to the extra wide.

• Right now the max page width is set to 1504px (+4rem total padding)... are we suggesting this expands after a certain screen width on the docs pages? If so, should it have an absolute max anymore? I would think not, and we could just expand the width proportionally.

• The max content width is currently set to 640px (+8rem total padding)... This container is also left aligned at the moment. Thoughts on how to transition this from left-aligned to centered (should we start expanding the left padding at some breakpoint?)

• Similarly, at what breakpoint should the content start expanding to a max of 700px... I would expect the transition to be smooth.

Thanks for stepping up @howdyAnkit, we'll try to get some clarity here

[Scott1UP]

Hey @wackerow 👋🏼 Thanks for the questions and hopefully my answers can bring some clarity. I'll preface this response with the disclaimer that I am not a web developer by day, so my knowledge of the correct terminology can be a bit flaky at times...

1. Yes. Based on the tests I ran at 1920x1080 and 2560x1440, it would make sense to increase the width of the docs pages. In my designs, I found a maximum width of 1920px was sufficient even at the 2560x1440 resolution–however, I'll defer to your knowledge on the best way of implementing that same feel from a technical perspective. As long as we are hitting the goals of this issue and improving the experience for the user, I'm happy.

2. Going beyond the current 1504px page width, if expanding the left padding to be proportional to the right will give us our 'reading focused' feel on the main content, then this is the method we should use. Again, I'll defer to your and @howdyAnkit expertise.

3. After 1504px width, the main content area should start a slow expansion up to its maximum width of 700px. In my designs, I noted this maximum to be reached at 1920px page width.

Thanks @wackerow and @howdyAnkit

[howdyAnkit]

Yeah, I agree expanding the left padding to be proportional to the right will give us our 'reading focused' feel on the main content. also In my view, the padding to the left and right for the screen sizes for 2560x1440 seems to be enough for both screen sizes 1920x1080 and 2560x1440.

should we increase the width of the container? @wackerow and @Scott1UP?

I'll just attach a small PR so we can better understand do we really need to increase the width of the container

[MicahZoltu]

For accessibility reasons, and to comply with responsive design principals, I recommend filling the width of the browser. A user may have their font size increased for readability reasons, and artificially constraining the page to a fixed number of pixels in the center of the screen will result in the text becoming less readable.

If people prefer to read with a slimmer width, they have full control over the size of their browser and can simply reduce the width to where they are comfortable. Similarly, if people want more space (and they have a large enough monitor) they can choose to widen the window. By having a fixed width (of any value), you are taking control away from the user and forcing a particular preference on them rather than allowing them to assert/apply their own preferences.

[wackerow]

Issue has run stale and current design system is being implemented which does not contain plans for this. Going to close this issue out; can re-address in future as needed with further design iteration.