Please help us create a nice download page

We need a better download page, showcasing the GUI options and guiding the user towards the correct platform etc. I’ve created a very bare bones embryo of this in the repository GitHub - syncthing/downloads: Download page generator, currently running on https://syncthing.net/dl. It needs a bunch of more work though:

  • Some sort of graphic design. Currently it’s the simplest HTML that could possibly work.
  • Browser detection code for highlighting the correct download for a given user.
  • Features like per project screenshots (maybe add this as an URL in the config? maybe auto extract from the project description or README?), per project changelogs, etc.

So there are three possible skillsets here that are individually useful - designer/HTML hacker, Javascript hacker, Go backend hacker. I can provide the latter, if someone wants to fill in on the first two and needs help. :slight_smile:

(The projects on that download page and their order are just something I threw together from the top of my mind to get something rolling. Don’t be sad that I didn’t include everything - we should do that once it’s good to go.)

2 Likes

Mission Accepted

1 Like

A new download page, I think

An actual download page, yes, encompassing all relevant projects and downloads.

What do you guys think about using IPFS for downloads?

Basically, files are referenced by hash, and can be loaded from peers (like torrent). People who don’t have IPFS installed can download via a gateway.

Of course the project is still pretty experimental, so it might be premature to go this way. But it would be really cool :smiley:

What benefit apart from complexity does this bring?

It works like torrent, so files are downloaded from other peers. And files are referenced directly by their hashes, so they can’t change.

No it doesn’t, for the average Joe it downloads it off the gateway, which is arguable worse than s3 et al.

Hi Jakob, are you still looking for help on this?

I took a look at your dl page embryo, and hacked a piece of JS to highlight the download links for the “local” platform (the one where the browser is running).

To test it I just copy/pasted the content of this gist in the JS console of your page. Tested on Mac(Chrome,Firefox,Safari) & Windows 10 (Chrome,Firefox,Edge,Edge-in-IE-mode).

Feel free to steal, or to ask for more, I’d be happy to help (I’m a developer, not too shabby with web design, not very proficient in Go but you’ve got that covered).

Cheers, Hugues

1 Like

Experiment B rev 2 :grin:

To simulate what is seen on an unknown platform: Unknown

… or on other platforms: Windows / Mac / Linux / …

You get the idea, edit suffix and reload to see what other platforms would see.

At this point it only works with reasonably-recent browsers, and requires JavaScript enabled, but it’s always possible to degrade nicely (with more work, also the approach would depend on the backend).

As noted in my first experiment, it’s easy to detect the platform, but hard to correctly detect cpu architecture, so I simply put amd64 above 386… Maybe we can do better.

See gist here

Edit: :sparkles: [Experiment B rev 4] (Downloads) / :sparkles: [B rev 4 for undetected platform] (Downloads Using panels, and working links

2 Likes

The layout looks a bit cramped, you should probably space out the buttons a bit more. And you should display the platform in a way that’s easier to read for humans. Also, discovery and relay server should really be hidden somewhere, because they will just confuse new users. And I think you should add links for Synctrayzor, Android, …

These are just some suggestions to help you, I like the general design :slight_smile:

Also I think that choosing a version should be de-emphasised. You need to pick the correct platform, but you’ll only choose a version other than the latest if you need to downgrade for some reason.

Thanks, then please check out rev 6, and the same rev 6 simulating undetected OS.

… and try selecting other versions and platforms :wink:

  • Added third-party components, with screenshots for the 2 GUI wrappers
  • User-friendlier: you choose a platform, not a file
  • Version still choosable, but less in the way, and you get a warning if you select a version that is not the latest
  • discosrv and relaysrv buried down after all the rest, in a separate section
  • If you select Windows, an alert box invites you to check out SyncTrayzor
  • If you select Linux, an alert box informs you about the existence of distribution packages

The design is entirely “delegated” to bootstrap, which @calmh was already using in the beta page, I did nothing to customize it. Some people will instantly recognize it, and some of those might dislike it. We can always customize the CSS to make it more unique, but I’m not particularly good at that.

I still have no idea if that sort of thing is still needed, and if so to what degree the user should be guided (I started with merely highlighting relevant links and moving them to the top, then I preselected them “into” a nicer download button, now I give hints about relevant third-party tools… do we need a Clippy-like assistant ? :smile:)

Also take a look at https://github.com/syncthing/website/tree/v2, which was calmh’s mockup of a v2 for the website, complete with a smarter downloads page.

Ah, thanks…

At this point I was going to say a lot would depend on the back-end (to provide links directly from GitHub & such, instead of a hardcoded blob of json like I did in my mockup), so it’s nice to know where the sources for this are. :thumbsup:

I was also considering a simple function to convert platform names to user-friendly names, and I see there is one in the back-end already.

But this forum topic was created in on March 23, and then some work happened in the “v2” branch of the website repo, latest commit on April 19, with unfortunately no mention here in the forum… So I started from the “very bare-bones embryo” mentioned earlier, completely ignoring the existence of this healthy fetus in a branch of the repo :sweat: (yeah I’m taking the original analogy and running with it, hehe).

If the new-download-page project still needs help, it would be nice to follow-up here, or leave a note about where the relevant work can be tracked.

1 Like