theodinproject
theodinproject copied to clipboard
TheOdinProject
Discussion: Lesson Page Layout
We've received feedback on discord about the recent lesson page layout changes making the content harder to read. Link to that discussion - https://discord.com/channels/505093832157691914/1000388686690648104
I wanted to open up this issue to collect any more feedback.
Reasoning behind the changes
There were two goals with the layout changes.
The first goal was to align the contents of the page with the confines of the top navbar edges. This was what the page looked like before:
The lesson table of contents sidebar was out of alignment with the top navbar, making it look out of place.
The second goal was to move the lesson table of contents to the right of the lesson content where it is tucked out of the way and less distracting when reading from left to right. This is a pattern most sites that have an article table of contents follow. Some examples:
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
- https://v2.tailwindcss.com/docs/responsive-design
- https://reactjs.org/docs/refs-and-the-dom.html
However, to fit the lesson table of contents and main content side by side within the page width set by the main navigation. We had to make a trade off by aligning the lesson content slightly off centre and to the left.
Solutions
- We are planning to move to a full width page layout in the very near future. That will allow us to fit multiple columns comfortably while keeping the main content centered - https://github.com/TheOdinProject/theodinproject/issues/3045
- Until we move to a full page layout, we could remove the lesson table of contents - is the lesson table contents essential or a nice to have?
Idea: Float the header, so it's always obvious what the content is inline with.
I think the floating menu is nice to have, not crucial. Sample size of one, but I personally can't remember using it at all.
Spiking removing it would be my vote for option A, but I would be curious if people felt strongly about it / made good use of it
I think its easier to the eyes if the article is centered. The right side of the page (the bullet thingy) occupies a lot of real estate on the page and in my experience, it draws some attention to the readers and may distract them from reading the material thoroughly.
In my opinion, I think the older design is easier to read and has no distractions whatsoever. I don't know about the other learners but yeah, its just my opinion. there are also other people having the same thoughts, I think we can do like a poll thingy or something? Thanks!
purpose: I've never used the menu, didn't even know it's clickable until I tried just now. I think it's because it's generic and doesn't include the lesson-specific sections I might be interested in going back to. Looking at the linked examples, tailwind and MDN have content-specific menus and they include all of the headers in the articles.
placement/style: I do think left-hand menus are less distracting. Since text is left-justified, the left side of the content column is sharp and easy to find, so my eyes don't stray outside. The right edge is fuzzy and doesn't have that advantage. The examples try to fight this by using a smaller font size, different weight and color etc. MDN has a vertical line. Also the menus have a header ('in this article', 'on this page') that helps identify and separate them. Maybe 'in this lesson' or 'lesson content' might work for TOP?
As an aside, all linked articles have a higher level navigation sidebar that I like. I keep a tab open with the course I'm on to orient myself and because I like looking at the checkmarks, haha. So not exactly necessary, but would be nice to have in a sidebar.
Messed around with the styling a bit:
Idea: another solution can be heading breadcrumbs, sticky top header that represents current lesson heading by different font color or/and weight between horizontally aligned headers separated by arrows.
