Create skeleton for the website design

[harisood]

Detail

Before we decide what method to use for the website (ReadtheDocs, website builder, WordPress, raw code), we should layout design plans for the website.

The simplest thing would be to wireframe the ideal design for the website, to discuss with the CMWG.

Actions

• [x] HS to develop MVP and share with group for review

Who can help

@Davsarper

[harisood]

This website design should include a skeleton design of the resource hub, and a reference place for finding pre-existing working groups

[harisood]

Very rough design here: https://www.figma.com/file/CMqf18C3SbRiDApxKYbxf8/UK-TRE-Webpage?type=design&node-id=0%3A1&mode=design&t=QJmODZUyQeDuNdgb-1

[JimMadge]

Some suggestions for the tech side,

• Hugo is excellent
  • Quite easy to use (distributed as a binary)
  • Builds from Markdown (so a lot of the existing site can be reused without much effort)
  • Can be extended quite simply with templates/shortcodes
  • Good sized community making themes/plugins
  • Would work well with writing the site in a repository and using CI to deploy
  • Which is nice for transparency/contributing
  • But might not be what you want, no WYSIWYG or contribution through browser.
• I've heard very good things about Ghost CMS
• I've heard very good things about Pico CMS
• Drupal is a popular CMS
  • I think it is more heavy-weight though

[JimMadge]

Also, on the CMS side, although you get an easier path to contribution for many, you will probably also add burden on the management side, particularly if the CMS depends on a database.

We will either need to have someone to manage the CMS, updates, security or add that into the hosting costs.

[harisood]

Thanks @JimMadge! Agreed, I will explore the above and see what makes the most sense

[hardakerm]

A pin for the inspiration board: https://erimote.eu/home

In particular, I think the map on the home page showing the participating institutions and their subject area is a cool visual. We could do a map of the UK and colour code participating institutions by university/government/private/etc... or similar.

Also has a cool "Information Platform" with a searchable tagging system

The tabs for their working groups/events/etc. look very similar to what we've discussed but maybe worth a glance as well at formatting, etc.

I don't know the backend complexities of getting any of this onto a website, but it doesn't look exceptionally sophisticated, so I assume it'd be easy enough.

[harisood]

FWIW Lyndsey let me know the SSI website is based on Drupal, but was built by an external agency

[harisood]

I spent a bit of time last week looking through a few CMS options (Hugo, Ghost, Drupal, Wix/Webflow, Astro, Next.js...). My take is for now it would be good to go with an option we know will last beyond March (therefore don't need to pay for it, so Static Site Generator (SSG)), and go with something where it'll be easy to get it quickly set up. I got a local version of Hugo up and running super fast so thinking that might be the place to start - as @JimMadge mentioned too it'll be easier to migrate away from something like Hugo (where it's all text files) in the future than e.g. webflow, wordpress etc where it's platform dependent.

WDWT?

[Davsarper]

9 Jan meeting discussion

These are some on the fly notes about the discussion held to decide

• Why not GitHub pages? It will be used for a lot of content and version control of it, but it is not as friendly and customizable for the front/landing page
• Everything is a trade off, where do we want the pain point? Given short period of funding but more importantly that we do want and expect the community to contribute and edit it is best to keep it easy to use
• We should commit to the decision made, regardless of further funding.
• Hugo or any more website looking solution is friendlier than a readthedocs for contributors
• A different contribution pathway is community members producing resources that the CMWG/website admin would later upload/include
• Hugo is a proper solution: it is easy to learn but still requires some learning
• The real difficulty is producing/seeking content, regardless of friendliness we may not get tons of people directly making changes. So Ghost is nice but not a blocker if we do not use it
• For someone not expert in GH, github pages are surprisingly easy to use
• The UX affects expectation and motivation for contributors

[harisood]

Community management meeting - 09/01/24 - consensus is to proceed at this stage with Hugo

[Davsarper]

Next step is producing an absolute minimum that serves for the community to review

[harisood]

HS to develop MVP and share with group for review

[Davsarper]

https://themes.gohugo.io/ lots of good templates for Hugo

[harisood]

Initially looking to use this theme: https://themes.gohugo.io/themes/hugo-bootstrap-theme/

Need to check:

• [ ] It renders well on mobile
• [ ] It renders well with screen readers

See here -> https://getbootstrap.com/docs/5.3/getting-started/accessibility/

[Davsarper]

for accesibility ref https://www.ed.ac.uk/about/website/accessibility/our-approach-to-website-accessibility-testing

[harisood]

I have made some progress! Need to figure out how to share it effectively so you can build your own local versions, for now here are some screenshots

[JimMadge]

The accent colours not quite matching the logo colour is setting me off :smile:.

[harisood]

I lazily tried to remember the hex code for the logo and got it wrong, couldn't be bothered to fix - will update in next iteration

[manics]

https://github.com/uk-tre/website/blob/8b00a7e20fd25cad398675f651336f6f7063b72e/docs/_static/uktre-logo.svg#L78

#33CCCC

[JimMadge]

Realised my only comment was negative 🤦.

I like the layout. The navbar works well, the key sections are visible but it isn't cluttered. We have the links to GitHub and Slack. The home page hits all of the key points. I like the layout, with wide sections and columns alternating. Maybe too many exclamation points?

[harisood]

This version has been deployed to GH pages here: https://uk-tre.github.io/hugo-website/.

Will be using this repo to keep developing it out!

[Davsarper]

6 Feb

• Will we make a disctintion between IG and WG? this is a q for https://github.com/uk-tre/community-management/issues/19
  • But probably no disctintion just yet, while it is a very useful one it is probably better for a more mature community
• License added
• General agreement that we like the skeleton
• There will be a bit of tech knowledge created to maintian this website
  • We just need documentation and templates