Better Installation Page
Closed this issue · 10 comments
The Installation page is serviceable as of the upcoming color change included in #49 (which isn't included in the mock-up below). But it could be better.
The mock-up for the installation page for Linux is still pending because it's more complex than the other pages. Also note that the MacOS mock-up doesn't include an installation method because the website currently doesn't have detailed explanation, unlike the one in Windows.
All of the pages will not have the table of content provided by Material theme. The reasoning is as follows :
- It's redundant in the OS selection page
- The table of content in Windows and MacOS installation page is only useful for changing to another OS's page because there's so little content that you can see all of it in your screen. This function has been replaced by a better, more integrated version in each of the OS installation page. Thus, it's also redundant.
- Because its replacement is better integrated, they are closer to the content of the page, and so it's more convenient to the user because they don't need to drag their cursor as much as before.
And yes, the table of content in the Linux installation page that shows each of the distro with special installation method will have a replacement that does the same thing.
Actual work on this will wait until #49 is merged.
@Technius I'm assuming putting Javascript in this to somehow make all of these pages into one, where for example, clicking the Linux button wouldn't redirect to the Linux installation page, but magically "spawn" the content of Linux installation page below the OS selection menu, is out-of-scope?
I don't think we will need any custom Javascript for this. Is your idea to have all of the OS install pages on a single page and then use tabs?
I'm actually quite happy with them being separate pages as we can then post the correct link in tickets, that links them exactly to the installation page of their specific OS.
I don't think we will need any custom Javascript for this. Is your idea to have all of the OS install pages on a single page and then use tabs?
Yes that's what I was thinking of. Where those button will be tabs.
I'm actually quite happy with them being separate pages as we can then post the correct link in tickets, that links them exactly to the installation page of their specific OS.
That's a good point actually. Now that I think about it, using custom Javascript or putting them in separate pages will functionally be very similar so ignore my last question because I'll put them in separate pages instead.
This is my proposed Linux Installation page mock-up. Note that the font sizes for the install instruction below will be adjusted in the final work. Also note that hovering over the OS's name that links to the corresponding installation guide will change their color from black to the orange accent used.
I'm thinking of using tabs here, like how LMMMS does it (https://lmms.io/download#linux) since it's more convenient because the user will have to drag their cursor less and scroll their mouse wheel less. It also makes this particular page more concise.
I think it's very likely that I'm going to use overrides for this.
https://user-images.githubusercontent.com/51940383/129433106-3c1eac2a-3127-4dc7-bf2b-82cba6df5fd1.mp4
This is captured on a 1080p monitor.
The OS selection page, MacOS installation, and Windows installation is done. It seems that because of the layout I chose, it already works great down to low-res laptop. All that is required for these section is making it work on smaller sizes and fine-tuning the font-size. The Linux installation page is still pending because of its complexity.
It's worth noting that I set the maximum width for the page to 1000px. This does cause empty white space on the side, but that's not a bad use of space, we just don't have that much content to begin with for this page. If I were to not set maximum width, gaps between elements would be unnecessarily high, which only tire the visitor's eye from having to move so much.
Looks good!
I think it's very likely that I'm going to use overrides for this.
I think you'll only need to override the template for the /installation/ part of the website, which will allow us to reuse the button code. We can just keep the text content in the markdown files and insert them into the template at the appropriate location.
The Linux installation page is still pending because of its complexity.
Based on what you have in the screenshot, it looks like you're trying to use a tab layout? You could use the tabbing feature of mkdocs-material.
It's worth noting that I set the maximum width for the page to 1000px. This does cause empty white space on the side, but that's not a bad use of space, we just don't have that much content to begin with for this page.
I agree. I only brought up the whitespace issue on the home page because the home page mostly consists of images + text, kind of like a gallery. For article style pages (i.e. most pages on the website), we should stick to readability guidelines of 80-120 characters per line.
2021-08-14.15-52-45.mp4
The OS selection, windows installation, and MacOS installation page have been made responsive.
2021-08-14.19-32-24.mp4
2021-08-14.19-32-53.mp4
The Linux installation page is also done and is responsive. That was easier than what I had thought. As this is mostly done I'll go make a PR.