Design a landing page suitable for non-technical users

[lkiesow]

Technically, the current landing page of https://editor.opencast.org does, what it is supposed to do: redirect users to different versions of the editor. However, given the very technical look'n'feel of the site and that we do redirect new and non-technical adopters to this page, it may easily be interpreted as “the site is broken”:

Additionally, there is no explanation of what the links mean. If you don't know about the usual git branching structure of Opencast, it's not immediately clear that these reference different versions meant for the corresponding major versions of Opencast. For docs.opencast.org, we also have a version selector, but there you are actually asked to select a version:

If possible, we also want to pick up the design of the editor itself.

To-do

• Make the page look nice
  • Maybe pick up some elements from the editor UI?
• Explain what the versions do
• Maybe don't display a path (./17.x), but the corresponding version (17.x)?
• Build this into the CI/CD code generating the page

[lkiesow]

@ltekbas already created a first draft for a replacement site:

• Go to draft of Editor landing page

[lkiesow]

Looking at the draft, I think it might look nice if the header is actually the same (size and border)?

Also, for the version selector, we could re-use the design from the buttons in the editor. In particular, I'm thinking about the buttons of the finish page in the editor:

This would mean, however, that we should probably limit the amount of versions we deploy? Opencast can at maximum have four active branches. Usually it only has three though. Should we just display the newest three? Or the newest four?

[ltekbas]

@lkiesow Here is the updated landing page. (light & darkmode)

• the header should now be the same size,
• fixed the naming of the versions
• added "Select a Version" to the text container, so the user knows what to do
• overall changed some colors and designed the list as "column buttons"

Please let me know if the design needs other improvements, otherwise I would like to check how to implement this myself into the code base ^^

[gregorydlogan]

Design aside, you're looking for https://github.com/opencast/opencast-editor/blob/8a5b797ff4eca08e903ffc063eedd15df87e0f84/.github/workflows/update-test.yml#L114 in terms of what's generating the current index page. Modifying the GitHub Actions workflow (plus probably the underlying gh-pages branch) is probably what you want do to.

[Arnei]

This has been completed by #1631.