Modernization & overhaul

[Exerra]

Hello everyone!

Currently the website looks quite old, and the download/demo URLs are not where most sites place it (which, at least for me, breaks my muscle and UX memory when glancing over websites).

I want to propose a modernization of the website, and I have already began making some designs. They look a bit weird and definitely will need some adjustments when the website is being made, as I have always struggled with designing in tools (found it much better to just wing it on the spot 😛), but should get the general idea across. Currently the designs are basically identical, with background variations, but if the core maintainers have objections, I can modify them.

Design

Design is the largest part of my modernization plans. As mentioned before, these are rough, but should get the point across. I have also taken the liberty of modifying the logo a bit for the designs, hope no one gets mad.

Variations

1 - Fancy gradient (ROUGH)

## Fancy gradient In this version, the background is an image. Bad for performance, great for looks. **Areas of improvment:** * Make more vivid * Make text colours match better * Replace the card thing with an image, or make the height larger (still prototyping, is an experiment) 

2 - Linear gradient (ROUGH)

## Gradient background My idea is to have the gradient stretch the entire page, which can make the website look sleek. Might be a bit of a design problem for the sections, but that is a future me problem. **Areas of improvment:** * Make more vivid * Replace the card thing with an image, or make the height larger (still prototyping, is an experiment) 

3 - One colour (ROUGH)

## One colour background In this version the background is just one solid colour. I would like a warm colour more, but I am trying to go with the FreshRSS blue theme. **Areas of improvment:** * Replace the card thing with an image, or make the height larger (still prototyping, is an experiment) 

Design guidelines

I tried making everything be shades of blue, and complimentary colours (correct term? not an artist). Text should also be a darker tone of blue (original colour sampled from the circle in the logo), as pure black looks bad.

Also, even without the website overhaul, I would suggest making the text in the colour be two-tone, with "Fresh" lighter and "RSS" darker. That should provide a nice seperation effect.

Tehnical side

While this isnt nearly as important as the design (in my opinion), I would suggest moving to a JS framework, preferrably Astro. JS frameworks are powerful when paired with data, and something like FreshRSS could benefit with such a website. For example, the website could list a list of versions, or it could finally close #9, or maybe just make life easier when working with .md files. If Astro gets chosen, it would be great for performance (compared to the other JS frameworks), and will ensure great DX when working with .md files.

However, that is one more tool for the core maintainers to learn when maintaining the website. Though, in my opinion, Astro is easy to learn even for people who haven't dabbled in JS frameworks at all. JSX is pretty much the hardest thing to learn, the rest is super simple.

Choosing a JS framework would also make hosting much simpler, and cheaper. Astro, Next.js, Remix.js, etc, can be deployed on VERY generous hosting platforms like Vercel, Cloudflare Pages and basically any JAMstack website hoster.

---

On a final note, I would like to code the website, as I want to fully flesh out my design idea and, if allowed, can easily implement JS frameworks as I have lots of experience with them. If I do that, though, could I have a little mention in the footer that I made it? (The larger the portfolio, the better 😄)

[Exerra]

Oh, and I also tried to make a nice slogan for the title. If this is approved, I would like to know your thoughts on it 😅

[math-GH]

Let me link https://github.com/FreshRSS/freshrss.org/pull/50

[Frenzie]

It's true that the download seems to be a tad hidden.

[Exerra]

I've got nothing else currently to do anyway, + I want more open-source contributions, so I guess I will start working on the website. I am going to start with Astro + TailwindCSS, but if need be I can convert to whatever framework requirements are needed.

[Frenzie]

It's not clear to me what you would wish to accomplish by switching to Astro. Boop, Hugo, Jekyll, it all comes down to essentially the same thing. It doesn't make much sense to convert to Boop later when Boop is already right here, unless we were somehow unhappy with Boop and wanted to change.

I do like most of the changes you proposed for the first part of the page (e.g., something like a gradient, a slightly clearer link to GitHub and/or download, perhaps some of the colored letter stuff).

Replace the card thing with an image, or make the height larger (still prototyping, is an experiment)

Incidentally, regarding a fancy gradient, a base64 encoded SVG image should still only be a couple kB.

[marienfressinaud]

On the subject of the design, I'm a bit reluctant to redesign the website since I did it in October, but I'm absolutely not objective :D Also I'm quite happy with the improvements you suggest so if the others are ok with it, feel free to work on a new design for the website :) Few criteria that I would like you to keep in mind though: the website must stay performant, mobile friendly and accessible (e.g. colours contrasts must match the WCAG guidelines, text size is big enough, keyboard navigable). I can help you on these aspects if you need.

On the technical side however, I'm against the use of a Javascript framework to build the website. It makes the things way more complicated to maintain: dependencies to keep up-to-date, generally not stable across the versions, more difficult to understand for newcomers, accessibility issues, etc. Let's stay with our good old friends HTML and CSS. Said differently, no JS framework can compete with the current website on the aspects of performance, maintenance and hosting.

That being said, I'm open to change the website generator (with conditions ;)). I've suggested to use Boop (disclaimer: I wrote it) because it's only a thin wrapper above HTML + it's completely stable (i.e. I'm only working on it to fix bugs). This means that we have no maintenance to do: it is important for this part of FreshRSS since it's "only" the project showcase, and not its core. The DX however is probably not perfect (i.e. must be installed manually and the template system is home-made) so if it causes problems, changing the framework can be an option.

[Frenzie]

If we did change the generator I'd much rather change to Hugo or something for similar reasons. But the only real reason to use any generator at all is so we get feeds for free; besides that it's a load and a burden for just a few pages. Which we don't even do because we use the GitHub releases feed! :-)

You could potentially copy some stuff from GH releases onto the page or something but you can write a quick shell/php/python script for that in minutes, instead of having to work around or within the constraints of some generator. But then, don't you have a mini-generator? Well yes, that's probably how they all grew, but it only helps if it helps. And in my view it does nothing but add unnecessary complexity.

Edit: to be clear, I'm completely satisfied with Boop. I just want to make it excruciatingly clear that my preferred alternative generator for a simple website of this few pages is none at all.

[marienfressinaud]

the only real reason to use any generator at all is so we get feeds for free

Well, you also get the template system to avoid to duplicate common HTML boilerplate, but this could be done with a small script as well for this kind of website, so I agree with you on the conclusion :)

[Frenzie]

The HTML boilerplate is (and if not, should be :-) ) completely negligible. By the time you're referring to being able to write a heavily customized Bootstrap .card component as just {card}{/card} to be replaced by <div clas="blah blah blah><div><div><div><div class="etc"> then yes, a template system could help. Or make it easier to do silly things that perhaps you shouldn't be doing. :-)

Incidentally, one area where something like Astro could be helpful is that you can do your Bootstrap customizations as an integrated part of the excruciatingly slow npm build process (bun helps a bit).

[vdbhb59]

Looking at the current live site, I still believe changes should be done. The site although is simple in terms of layout, the scrolling, look and experience from a user pov is not that approachable. Simple is good to an extent, but needs to be a bit attractive and much cleaner. Right now, it looks like a bit bland and tad longer in terms of scrolling and understanding/search/locating. No click to view image is good as the image itself is visible without extra clicking. The whole website loads fairly quickly and everything is smooth. Just the look needs a bit of change.

If the admins/devs are okay with it, I would like to venture that myself? Just refining it might work too, and make it even better, fresher and more upcoming. :)

[Frenzie]

Doing some refinements / changes sounds fine by me anyway. Some of the designs in the OP look decent too.