Jamulus: Test new homepage jamulus.io

[ann0see]

The new Jamulus homepage and wiki is ready to test: https://jamulus.io

There are still some todos:

615

I'd be very happy if some users tested it on different devices.

[corrados]

Works fine on my Desktop and my old Android phone. Thanks for all the work!

[ann0see]

Thanks for your information. How old is your phone? Could you open the navigation and did it suggest you to change your language if you e.g. clicked on es? For me only the firefox language is correctly detected. Chrome and Safari don't suggest to switch languages.

[gilgongo]

I'm on Android v10 Chrome and the language switcher and nav work fine for me.

[ann0see]

I think so. But does the site notify you if your browser language is not set to English but to another supported language?
It looks like this:

[gilgongo]

Ah not sure as I'm set to EN_gb I assume.

[ann0see]

This could be the issue. If you click on e.g. es. Does this message show up?

[gilgongo]

Ah, no it doesn't.

[ann0see]

Should be fixed now. Yes, it was the problem you mentioned.

[corrados]

How old is your phone? Could you open the navigation and did it suggest you to change your language if you e.g. clicked on es?

Samsung Galaxy S5 with Lineage OS (Android 9) and Firefox Lite Browser: It works fine and I can see the language suggestion.

[ann0see]

Great! Android 9 isn't old for me ;-). I'll probably test Android 4. My XP pc is probably too old.

@geheimerEichkater should also have a look at the design (especially the navigation)

It would be great to have assets for the getting started page (download, headphone, lan cable)we could also use some from fontawesome?

[geheimerEichkater]

Nice job! Can't go wrong with font awesome! Maybe for the download-icon do not use the cloud-icon as that would be confusing. Headphone is a no-brainer. For LAN cable: they even offer an icon displaying the ethernet connector, but I'm not sure if that'd be too technical, on the other hand it doesn't allow for misinterpretation … your opinion?
For the navigation it's all good, I'd recommend 2 things: raising the line height (as for the typography in general), at the moment it looks like 120 % if I'm not mistaken, and it would benefit if we could raise it to ca. 150 % (since it's a ul/li, probably have to look at padding/margin instead?). Also if you could put a little more margin-top to the h3 headings to set apart the three "categories" from one another.

[gilgongo]

Would the desktop layout benefit from having a narrower column for the navigation so that the body can be wider? Some pages (notably Configuration) are quite constricted. BTW I guess we'll need a fair amount of room on the nav for longer languages.

vs

[geheimerEichkater]

It's always a give and take with column width. Optimal line length in regards of readability is somewhere between 50-60 characters/line, in most cases it doesn't hurt if you're going up until 70/75 (if you also adjust line height). Above that, your eyes tend to get lost when they run back to the start of the next line: a rather unpleasant reading experience and the resulting interruption makes reading longer and understanding the text harder.

[gilgongo]

Indeed, which is why I didn't want to take it wider than that. Note though that there's is a school of thought that says line width should flex to the user's viewport - so the reader (again on desktop I would imagine, and within sensible maximum default) simply re-sizes to the width of their preference. This approach is I think what Jakob Nielsen does on the N/N site in fact: https://www.nngroup.com/articles/state-switch-buttons/

[38github]

It works fine in Firefox 82 on GNU/Linux in 1080p. I like that it uses a dark theme. On an older Android 7 phone using Chrome it loads very fast and is responsive.

[gilgongo]

@geheimerEichkater re. line length - perhaps let's see what it looks like with bigger line height first. I wasn't able to work out the CSS for that when I looked.

[ann0see]

Thanks for all the comments. @geheimerEichkater Thank you for pointing me out to the line height. I set it to 150% for the body now. The h3 in the nav now has more margin.

@gilgongo all the css is in assets/css
fw.css gets included everywhere and is used on every site.
home.css only on the homepage
wiki.css only on the wiki
and noscript.css only on for browsers without js enabled.

[ann0see]

The language picker could be optimised. We should make it a bit more prominent probably.

My thoughts on that:

• should we make it a select list?
• should we also include it in the footer?
• should the language shortcodes be translated to the full language (I think so)

Also there's an issue with too large tables on mobile which overflow. Also the cli site wrongly lists the parameters with a longer - not --. It's probably a markdown conversation issue. We should add back ticks around these parameters to mark them as "code".

[gilgongo]

As long as we have room for a list of links, I think we should show them (and yes, full language would be clearer). A selection list is more interaction and hides things, but I guess there's a space issue after a while? There's a bit of a convention in having language selection in the header/top right, but where it is now is fairly prominent. Perhaps right aligned?

It could go in the footer too, but there's less of a convention for that. I think the footer needs a lightly different visual style anyway though as it tends to blend in a bit too much with the body content on some of the pages.

Oh yes I see what you mean about the em-dashes. I'll see if I can update those with back ticks (unless there's some CSS trick to do it in the same style as the body text. There probably is).

BTW did we discuss methods of automatically alerting translators to changes in the docs? Now that we're doing it via pull request I don't anticipate as much drive-by chaos as there has been though.

[ann0see]

I guess there's a space issue after a while

Probably. What do you mean by saying "right aligned"? I showed the site to some people and they couldn't find the language picker right away one person even scrolled down to the footer.

I think the footer needs a lightly different visual style anyway though as it tends to blend in a bit too much with the body content on some of the pages.

feel free to make changes. They should be in the fw.css file the footer has the id #footer.
These dashes are wrong in the html source too. I think kramdown converts -- to –.

Alerting translators is quite easy: there is the @ jamulussoftware/translators group which you can mention (i hope it works.).

Could you please also freeze (limit access) the wiki on this site so that we can transfer and sync missing pages and check links?

[gilgongo]

Sorry, right-aligned like this.

Could you please also freeze (limit access) the wiki on this site

I don't have admin permission. I think only @corrados does.

[ann0see]

Ah. Ok. I just pushed the change.

I don't have admin permission.

We should wait for corrados then.
I'm currently looking through the wiki for broken links. There are quite a few.

[corrados]

Could you please also freeze (limit access) the wiki on this site so that we can transfer and sync missing pages and check links?

Done. I have activated "_Restrict editing to collaborators only, Public wikis will still be readable by everyone._"

[ann0see]

Looks great.

Could you please also look through the wiki on jamulus.io for broken links and spelling mistakes in the German version? I already eliminated some.

[gilgongo]

I've made a few changes, main ones as follows:

1. Reduced the number of nav items. I was thinking about what @ann0see said about dividing the site into "beginner" and "advanced", and while I think that's the wrong approach, I do think we need to make Jamulus looks less daunting for non-technical people (in particular: servers, compiling code, etc.).

2. De-emphasised contributing to the docs (moved the edit button to bottom left and some other things). I've got no problem with useful updates, but I don't think we need to actively encourage it because we have quite enough already. Most of my work on the wiki recently has been removing unhelpful, duplicated and otherwise random edits.

3. Re-styled the footer so it doesn't look like it's part of the page content.

One thing I was wanting to do is add wider margins because the current ones are too tight. Don't know how to do that though.

Also BTW I put the a link to the software manual in the nav, as it seemed odd not to have it there. But linking out to Github at that point is pretty weird. Perhaps we should move that content into the main site?

[ann0see]

@gilgongo These changes are great! I've added a few comments to your commits.

For 1: Yes. That's good

1. Probably a good idea. Nevertheless: The edit button should not be in the footer (since it doesn't fit there). Furthermore we would have to add it in every language to the footer. I'd suggest to add it right over the footer in the wiki.html template.
2. Footer looks nice in light mode, but breaks dark mode. I'm going to look into it
3. Yes, the external link to the manual looks strange.
4. Please DO NOT add inline styles (like style="color: #ffffff", align="center",...) to the pages. This will should be handled by css and sometimes breaks darkmode. We e.g. have the class "red" which styles e.g. text red.

[ann0see]

https://github.com/jamulussoftware/jamulussoftware.github.io/projects/1#card-47962783

Is this done? I think so.

The next steps are mainly testing if there are still broken links.
Could the community maybe test the wiki for broken links? We could announce something like

Broken link hunt

Help us finding broken links for the upcoming new homepage https://jamulus.io we would really appreciate to post your findings in https://github.com/jamulussoftware/jamulussoftware.github.io/issues/8

on the sourceforge forums and maybe on facebook (I don't have an account for this and don't want to create one)

[gilgongo]

Is this done? I think so.

Yes as far as I know.

BTW we could spider the site for 404s I guess? https://github.com/filiph/linkcheck

[ann0see]

Yeah. That's a good idea.

Also I now have found another potential issue: Since now the navigation only links basic pages which is very good, the structure of the site might be confusing. I'd suggest to code something like a breadcrumb (we had that in the current wiki at the top of quite some pages).
I'd open an issue on the repo where we can discuss that.

I ran it on localhost and there are quite some.

[gilgongo]

Yes, funnily enough I was just going to suggest adding a breadcrumb. I can do it manually though like I did on the old wiki.

[ann0see]

Ok. So we had the same idea. https://github.com/jamulussoftware/jamulussoftware.github.io/issues/9

I did the link check and found out that the "jamulus in the cloud page" is missing. Is this intended? Also I think the synth thing is not included. But I don't know if we need this?

[gilgongo]

Yes, I wasn't sure if the "jamulus in the cloud page" was in fact up to date. It was somebody on the forums saying they had a AWS image but I don't know if they're maintaining it. What's the synth thing?

[ann0see]

That's the "synth thing": https://github.com/corrados/jamulus/wiki/Software-Synth-in-Jamulus

Should we include the "Jamulus in the cloud" page and add add a warning about it maybe not being up to date?

[gilgongo]

I didn't know that synth page was there. I'll add it to the Tips page. Can link to the cloud from the Linux server install I guess.

[ann0see]

Ok. I now checked it again with the broken link checker and it seems to be alright now. The next todos can be seen in the project board.

[ann0see]

I think, now we can remove the robots.txt file and redirect llcon.sourceforge.io to jamulus.io (including the files like server setup,...). Next step: Moving of the manual and adding breadcrumbs; include link to new Jamulus site in the software and after a few days of testing we can add links to the new site in the current wiki.

I also had another idea to make synchronization of languages easier: We should add a version to every wiki page. If e.g. the english site gets updated, since e.g. the spanish version is still on the old version, it holds the old version number --> We know that it has to be updated.

[ann0see]

I've now added the software manual to the site. Uploading images was a bit difficult since the normal md editor doesn't provide an upload button. Therefore I had to upload them on an issue and copy the link https://github.com/jamulussoftware/jamulussoftware.github.io#adding-pictures

[gilgongo]

Ah good. And yes, that "get URL from issue" hack is the one I've been using on the old wiki.

What's the desired content for the redirect in .htaccess for llcon.sourceforge.io?

BTW if I wanted to use the include tag (it might be useful in a couple of places), would that cause problems with localisation do you know?

[ann0see]

It depends. If it's just plain html which gets included without (translated) text it will work fine. If you want to include a translatable .md file have a look at how I did it for the wiki footer. If you do it like that, every language needs to have this file.

If you don't need to include a whole .md file, you can use data variables (like the normal footer does).

The .htaccess will look quite similar to the one we already used but with the link to jamulus.io

Redirect permanent / https://jamulus.io
Redirect permanent /examplesoundcard.html https://jamulus.io/wiki/Hardware-Setup#example-setups
Redirect permanent /settingswindow.html https://jamulus.io/wiki/Software-Manual#settings-window
Redirect permanent /mainwindow.html https://jamulus.io/wiki/Software-Manual#main-window
Redirect permanent /requiredhardware.html https://jamulus.io/wiki/Hardware-Setup
Redirect permanent /sourcecodecompile.html https://jamulus.io/wiki/Compiling

I'll modify the robots.txt file now.

These are the broken links I found:

I've removed the link to the upgrade page (this can be re-added.

[gilgongo]

OK good to know about the includes. I was thinking maybe if we wanted to have the same thing in more than one place it would be nice (the Linux compilation instructions for example might be a candidate for that treatment).

I'll put in the redirects list later today.

[ann0see]

I've now added the missing redirects.

I was thinking maybe if we wanted to have the same thing in more than one place it would be nice (the Linux compilation instructions for example might be a candidate for that treatment).

I'm not sure about that since compiling should generally be on the compiling page (also for linux).

Maybe the structure should be overthought (I don't have an idea yet but it would probably make sense to provide official .deb packages at least. This would allow us to move the compile instructions to compiling)

[gilgongo]

Hm - redirects don't seem to want to work very well. https://llcon.sourceforge.io/examplesoundcard.html results in https://jamulus.ioexamplesoundcard.html/ and https://llcon.sourceforge.io/mainwindow.html doesn't redirect at all, for example.

Here's the directives I've uploaded:

~
Redirect permanent / https://jamulus.io
Redirect permanent /examplesoundcard.html https://jamulus.io/wiki/Hardware-Setup#example-setups
Redirect permanent /mainwindow.html https://jamulus.io/wiki/Software-Manual
Redirect permanent /requiredhardware.html https://jamulus.io/wiki/Getting-Started
Redirect permanent /servermanual.html https://jamulus.io/wiki/Running-a-Server
Redirect permanent /settingswindow.html https://jamulus.io/wiki/Software-Manual
Redirect permanent /sourcecodecompile.html https://jamulus.io/wiki/Compiling
~

[ann0see]

What happens if you change the / in the first line to /index.html ?

[ann0see]

Another idea:

Move the first line to the end of the file

[ann0see]

It seems to work now?

[gilgongo]

Looks like it. So I'm going to start putting links on the old pages to the new site. I'm assuming it's OK to remove the page bodies so as not to cause problems with outdated content in future.

EDIT: I think the wiki index page is in fact indexed by Google so maybe we should leave that in place and put the links on it to the new site?

[ann0see]

Yes. That sounds good. Leave the wiki index page and add links to the old pages.

[melcon]

I've now added the software manual to the site. Uploading images was a bit difficult since the normal md editor doesn't provide an upload button. Therefore I had to upload them on an issue and copy the link https://github.com/jamulussoftware/jamulussoftware.github.io#adding-pictures

Wouldn't just upload the images to the repo and call it from the .md file work? Just like showed on the SO answer

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

For instance, the file /assets/img/jamulusbannersmall.png would become:
![Some Alt Text If Needed](https://github.com/jamulussoftware/jamulussoftware.github.io/blob/main/assets/img/jamulusbannersmall.png?raw=true)

[ann0see]

It could work but in my opinion it's much more work. Also the images wouldn't be optimised (if GitHub even does that automatically)

[corrados]

@ann0see Since you already changed the links in the Jamulus software, I assume that you are happy with the new page now. Shouldn't we close this Issue now?

[ann0see]

Yes. I think the README file and maybe some other files still link to the old page. I must check that.