Jamulus: Link descriptions from llcon.sourceforge.net to GitHub Wiki and new website

[ann0see]

Google and some sites still link e.g. to http://llcon.sourceforge.io/sourcecodecompile.html, http://llcon.sourceforge.io/servermanual.html or similar. I think since maintaining two pages is too much work, I'd suggest to add a 301 Redirect (if possible) to the GitHub wiki sites or an info box states that more up to date information can be found on the GitHub wiki.

[corrados]

I can change the sourcecodecompile.html and servermanual.html, no problem. Can you create such a html page which does the redirect? I am no HTML expert...

[ann0see]

Maybe it can be done in HTMl but it wouldn't be the best way (the server wouldn't send the header probably). I assume it can be done via PHP or a .htaccess file (if the site allows .htaccess files this would be even better):
https://www.sistrix.de/frag-sistrix/onpage-optimierung/http-statuscode/3xx-redirection/wie-erstelle-ich-eine-301-weiterleitung/
I can help out if you want.
Furthermore a secured page (https) would be best and shouldn't be difficult: https://sourceforge.net/p/forge/documentation/Convert%20your%20website%20to%20HTTPS/
https://sourceforge.net/p/forge/documentation/Project%20Web%20Services/#https

[ann0see]

BTW: there are also other sites: http://llcon.sourceforge.net/examplesoundcard.html settingswindow.html etc. I'm unsure if they are all in the wiki but I think so. You can find them if you google site:llcon.sourceforge.net

[corrados]

I just found the following: https://sourceforge.net/p/forge/documentation/Project%20Web%20Services

They have a section for it: Re-directing to Another Site

Maybe we should just do what they recommend. What do you think?

[ann0see]

The PHP thing kind of works probably. But a 301 redirect tells google to update its index which would be good for SEO. If there's only the refresh tag I think google thinks that it's not a permanent redirect and therefore doesn't update the index.
https://sourceforge.net/p/forge/site-support/5048/ the last thing with the Redirect permanent [old url] [new url] could be even easier.

So you'd add a file named .htaccess to the root directory with the content
Redirect permanent /sourcecodecompile.html https://github.com/corrados/jamulus/wiki/Compiling etc.

[corrados]

For a test I put only this Redirect permanent /sourcecodecompile.html https://github.com/corrados/jamulus/wiki/Compiling in the .htaccess and uploaded that file. But I still let the original sourcecodecompile.html file there (i.e. I have not deleted it yet). Do you think the redirect will still work even if the file is still there?

Unfortunately, it takes very long when I do changes to the web pages until they are finally apply. Last time with the banner update it took hours until I could see the change in my browser...

[ann0see]

For me it does the redirect perfectly.
You can test it with curl and I think also here
Edit: maybe you have to empty your browser cache to see the newly added objects?

[corrados]

Great that it works :-). Could you provide me with the complete content of the .htaccess file which includes all the old pages which are listed at google? Then I can update the file on the server.

[ann0see]

I'll look into it.

[ann0see]

See https://gist.github.com/ann0see/df390e35a0dd7aea8fe0b36eeb1e2ce2

I hope I got everything right. Please have a look especially at the line with the server manual.
If everything is ok you should remove the comment

[gilgongo]

This is very good. The less fragmentation of the docs, the better 👍

[ann0see]

I think the website could and should link the wiki in a more prominent way. We could e.g. use a big button labeled "Get started now!". This is based on @gilgongo comment here https://github.com/corrados/jamulus/issues/534#issuecomment-680225729

The download button should be less prominent.
I can look into this suggestion if you want.
Edit:
My proposal which still needs some tweaking

Mobile (updated to html5 and display: flex instead of tables since almost every browser nowadays supports display:flex see this site

See https://github.com/ann0see/jamulus_website (the files named *resp* are the latest ones.)

[corrados]

I hope I got everything right. Please have a look especially at the line with the server manual.

Looks good. I have just updated the file on the server. Please try out if it works for you, thanks.

[ann0see]

Yep. Looks good for me. Are there any other files on llcon.sourceforge.net which are now included in the wiki? I've included all the files I could find on google but that doesn't mean that everything is redirected now.

[corrados]

I think you covered the important ones. That's fine.

I think the website could and should link the wiki in a more prominent way.

Thank you for your proposal. But I think we may use a complete different design of that homepage. It does look a bit outdated. It seems you are a experienced web coder. If you like you can be even more creative :-).

[ann0see]

It seems you are a experienced web coder.

I wouldn’t say that (especially design wise) but for sure I can look into it (if I find enough time)

~We could also use a template from https://html5up.net/?
Or a complete custom one which would probably load much faster.~ Will do it with a framework.

[ann0see]

First impressions.

[corrados]

Looks good. But you should avoid "With (almost) no delay". That could raise wrong expectations on the Jamulus software. Usually the people do not have optimized hardware setups so they will have significant delay (unfortunately...).
And also our new Banner is missing. This is a must have on the homepage :-).

@gilgongo Since you are the Wiki manager, what are your comments to the new design?

[ann0see]

About the banner: I know. It's quite difficult to add. If it is added at the top (which I would prefer) the button would have to be moved.
Maybe it can be added under "Help needed?"

[corrados]

I cannot answer you that. A graphic designer should comment on that.

[ann0see]

Maybe this could work:

Or this:

[ann0see]

@corrados Do you have a SourceForge Logo without background?
In the footer I have linked this facebook group: https://www.facebook.com/groups/619274602254947/
Is this the official one?

[corrados]

Is this the official one?

Yes, it is.

Do you have a SourceForge Logo without background?

This is what they have:
-> https://sourceforge.net/sflogo.php?type=11&group_id=158367
-> https://sourceforge.net/sflogo.php?type=13&group_id=158367
-> https://sourceforge.net/sflogo.php?type=14&group_id=158367
-> https://sourceforge.net/sflogo.php?type=16&group_id=158367

BTW: They also have a download button:

[ann0see]

Unfortunately they all have a background. Therefore the link will look quite odd in the footer.
@gilgongo Should we link the direct download button or the wiki in a prominent way. I vote for the wiki.

[ann0see]

Latest version. There's still something wrong with the layout (something seems to be bigger than the width of the screen) but I couldn't find the problem.

I've added a humans.txt file.

[gilgongo]

Since you are the Wiki manager, what are your comments to the new design?

I would say that we would be best served by brevity on this page. I'm a bit nervous about trying to summarise all the aspects of Jamulus (how it works, what libraries it uses, what you need to use it, etc.) in case people think that's the totality of the information we have (which would be the expectation if you landed on a page like this and saw that amount of information).

Instead, the idea of simply saying something very compact and then taking them to the wiki would be safer.

So simply this I think (with the footer - sorry, I'm on a chromebook with no proper image editor):

I would tweak the strapline slightly though from "Make music. Online. With (almost) no delay" to:

"Play music online with friends. For free."

The reason is that (in English) "make music" implies Jamulus is a tool to create the music itself. I would also emphasise the social nature of it ("with friends") and avoid hinting at complications ("almost no delay") at this stage and instead emphasise the free aspect of it.

Possibly also say "or download now" instead of "download Jamulus directly" as that's a bit more natural.

BTW if we are concerned with SEO, we could provide a summary text panel but need to craft that so that it doesn't look like that's all we have. Perhaps something like:

"Jamulus is for playing, rehearsing, or just jamming with your friends, your band or just anyone you find online. Use your Windows, Mac or Linux machine to connect to Jamulus servers worldwide, for free over a normal broadband connection. Or host your own private server. Jamulus is designed for high quality, low-latency sound, making it easy to play together remotely and in time. Have a look at how people do it [link here to the demos page]"

As to the graphical design, the contrast between the blue and the white is quite low and I worry about some people (or some monitors) not being able to read it very easily.

Finally, I (and some others) had another thought about how to use the main "cloud" design, but we should talk to the author about that. I'm afraid I've forgotten who that is though.

[ann0see]

@gilgongo Fair points.

1. I would say that we would be best served by brevity on this page.
   I agree. The site should be something like a landing page in my opinion it should also include text (like you suggested).
   Libraries etc. are unneeded. Maybe that it's licensed under GPL is important.
2. "Play music online with friends. For free."
   That's quite long but works probably.
3. or download now
   It should be clear that this link shouldn't be clicked by average users.
   Maybe we could say "Advanced: download now"
4. contrast
   The contrast was one of the main issues. If you make the background darker the contrast between logo and background would be bad. If you want, you can try to change the color (https://github.com/ann0see/jamulus_website/blob/a2ce7a623cbe13de6b0ee5d54508e2bb067e4227/newdesign/assets/css/custom.css#L6) and open a PR on my repo.
   I came up with the color palette by using this site https://imagecolorpicker.com/
5. thought about how to use the main "cloud"
   It should be in the git history. @geheimerEichkater?

Latest changes

Todo: Discussion about technical description, GPL,...

[gilgongo]

Yes, "landing page" is a good description.

Re. 1: My suggested "text block" is really just that: a single paragraph not formatted in sections so that humans are sort of discouraged from reading it. I think presenting the text as you have above (if that's what you mean - with headings and things) is counter-productive.

Re. 2: how about just "Play music with friends. For free." Shorter? I only really added "online" for an SEO keyword scent.

Re. 3: I'd say not have it then really, Oh BTW I assume the "get started" button goes here, yes? I which case there's a download link on every page from then on.

re. 5: Yes, separate ticket for that stuff I think.

(Note to myself: always remember to number your points)

[ann0see]

1: In SEO never design for search engines ;-). We can remove "How does Jamulus work". But let's wait what others think

2: I think we can leave the .."online".... It looks ok.

3: Yes. The button goes there. I'd add the download link just in case somebody already knows Jamulus and searches the download. We could check which link gets clicked on more often (e.g. via a link shortener like is.gd bit.ly short url etc.) We can then afterwards decide how to continue

4: I'm unsure about the contrast. Probably there's a way to "fix" the problem. But as I said, I am not a designer.

5: It would be great if he looked here ;-) but a separate ticket is also ok.

What about this:

[gilgongo]

Agree with 1., although the main thing I'm worried about is that people will come to a seemingly "fully featured" page and (subconsciously or otherwise) think "Oh, all the info is here. OK I'll just download it and get going then." The more people we can get going through the wiki to gain a better understanding before install, the better.

The alternative is to make this a place that does have access to all the information, and we take the decision to move from using the wiki to using the SF platform for a properly designed, multi-lingual site. eg for https://github.com/corrados/jamulus/issues/77#issuecomment-691755254

Fragmentation of information sources about Jamulus on the web is something we need to avoid, in my opinion.

[ann0see]

My new proposal has quite a lot removed now. Only the help section and "Jamulus is open source" is included now. Does this still evoke a "complete" feeling?

Translation would be great but is a huge amount of work: we‘d need a CMS like WordPress, Contao, Typo3 etc. for the site or at least some kind of "intelligent server" which gets the browser language (could be done with PHP probably).
Concerning a translation of the wiki I wouldn’t include it directly in the site but use external tools.

[gilgongo]

The wiki is being re-configured for translation though (although I'm a bit unclear on procedure going forward)

[gilgongo]

My new proposal has quite a lot removed now.

Sorry, where is this? Here? https://github.com/ann0see/jamulus_website

[ann0see]

Yes. It’s there. Look at newdesign/index.html

[ann0see]

You can see the site on https://ann0see.github.io/jamulus_website/newdesign/ now. It's currently blocked by a robots.txt from google

[gilgongo]

Yes - that looks good for the information architecture 👍

The issue of the graphic design (logos, contrast) we can look at later if @geheimerEichkater is around.

[ann0see]

Ok. @corrados should it be published (with a link including click statistics)?

[corrados]

Yes, I can do it on the weekend.

with a link including click statistics

I don't like click statistics, actually. I would prefer to do it without it.

Comments to the page:

• Why do we have to Get Started Now button twice? I think one is enough
• Have you tried to exchange the logo and the banner? How does this look like.

[gilgongo]

Why do we have to Get Started Now button twice?

I am assuming on most screens you'd only see it once in the viewport, so it's there when you have scrolled down.

[ann0see]

Why do we have to Get Started Now button twice?

I am assuming on most screens you'd only see it once in the viewport, so it's there when you have scrolled down.

Exactly. Also people should see a button if they read everything

Ok. So no statistics (IDK about the Icon from SourceForge. It might be used for statistics)

The exchanged logo & banner looks like this on a full hd laptop:

And like this on an iPhone 5/SE (The banner seems too big.)

The exchanged logo/banner doesn't make sense in html (the h1 heading is somewhere in the middle), I think. W3C validator doesn't complain but I could imagine strange effects on screen readers.

The changes are live and on the logoswap branch. I don't really like it but I can live with it.

Latest change not shown in the picture: Heading under the jamulus logo is now blue too. Looks a bit better (in my opinion). Please look at the link

Before you upload the site I will minify the HTML and CSS. So please inform me before uploading.

Once you upload the site, please use https (for security reasons and SEO)

[corrados]

Once you upload the site, please use https (for security reasons and SEO)

Do you know how to do it?

[corrados]

The changes are live and on the logoswap branch. I don't really like it but I can live with it.

I agree with you. Maybe we should use the old design with the logos swapped as it was before. @gilgongo What is your opinion?

[geheimerEichkater]

Hello and sorry for being late to the party.

The current state looks very nice so far, I'd be happy to provide the following assets for minor design tweaks:

• provide a photo background (faint clouds) for the whole width of the light blue header/hero
• provide a solitary white transparent "Jamulus Logo" (the wide cloud with the typography underneath) to sit responsively on top (svg or png)
• the CtA "Get started now!" could use a white border to better unite visually with the over all design language, making it basically appear like a ghost-button (I'll attach a mockup to this post) OR/AND highlight the button on top with a bold contrasting bg-color to draw more attention. Obvious choices would be orange as direct contrast or maybe greenish, or a red tint, or yellow … I would try out and suggest a couple of choices, if so desired.

[ann0see]

@corrados it should be on the site you mentioned before: https://sourceforge.net/p/forge/documentation/Project%20Web%20Services/#https

I agree with you. Maybe we should use the old design with the logos swapped as it was before. @gilgongo What is your opinion?

What about @geheimerEichkater s' suggestion?

I'd prefer SVG and/or plain CSS for the background.
Which font do you use for the string "JAMULUS"?

The cloud should be a SVG in my opinion.

I can make the button a ghost button. (Done. Currently it's white. Other colors are quite challenging for me and will have to be changed if the background is changed to the cloudy design —> geheimerEichkater.
I'm not (yet) sure about the hover behavior. A slight color change could work since the opacity hack doesn't look good.)

Really huge thanks to geheimerEichkater!

Edit: What about translations? I have uploaded an untested beta php which could support translations. This would be a bit more complex but it's possible.

[gilgongo]

Once you upload the site, please use https (for security reasons and SEO)

Do you know how to do it?

@corrados

https://sourceforge.net/p/llcon/admin/ext/https/

I'm too scared to click that button :-)

(Note @ann0see BTW that https will mean the site will be on https://llcon.sourceforge.io not .net)

[ann0see]

This has to be tested with the new site (you don’t want mixed content which would happen since the sourceforge logo is currently loaded via http)

[gilgongo]

@ann0see The SF guidance says you should change any absolute links to root-relative ones unless they're 3rd party.

[corrados]

@gilgongo I gave you admin rights on the Sourceforge Jamulus project. Can you please take care of the upload of the new homepage?

Note: If you change to https, make sure that the link to the paper on https://github.com/corrados/jamulus/wiki still works.

[ann0see]

Before uploading please inform me since I have to minify the CSS and HTML before.
Edit: done the minification.
Please upload the folder named upload.

[gilgongo]

@ann0see @corrados OK I've uploaded that and turned on https so the new URL should be https://llcon.sourceforge.io. Maybe some delay or cache issue means that's redirecting back to the http for me, but we'll see in a bit. The paths looks OK meanwhile I think.

BTW I added the existing .htaccess file just in case out of date incoming links still need redirecting.

Now I just need to fix the link to Volker's paper. I put it in the docroot I thought, but maybe I made a mistake. done.

Edit: @ann0see Minor layout issue: the "Help needed?" section isn't aligned with the "Jamulus is Open Source" section (at least for me)

[ann0see]

@gilgongo can you take a Screenshot?

[gilgongo]

I'm on a Chromebook:

[ann0see]

Thanks! Should be fixed now

[gilgongo]

OK I re-uploaded your "upload" directory. Might have to wait a bit for caches to clear maybe? It's still not doing the https either...

[ann0see]

Are you sure that https was correctly enabled? Maybe try to set it again?

I can’t imagine that it takes that long.

[gilgongo]

It's just a button that you click:

[gilgongo]

Oh BTW SF have a transparent button we can put in the footer that would look better than the current white one:

~

~

[ann0see]

That’s good news. I‘ll look into it.

[ann0see]

Ok. I've updated it. Unfortunately the logo isn't white (and probably copyrighted). I've added a white background and fixed some layout issues on mobile devices.

[ann0see]

Tested the site again and https still doesn’t work. Can you disable it, wait 5 minutes and enable it again?

If that doesn’t work, we should notify sourceforge support.

[gilgongo]

OK that logo looks better. I've switched it back to http now and will wait a bit before going to https again.

BTW the contrast on the white text against the blue background fails WCAG AA. What do you think about making it dark grey text instead? A grey keeps it feeling "cloudy":

https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=8FC8DD

vs

https://webaim.org/resources/contrastchecker/?fcolor=3B3B3B&bcolor=8FC8DD

[ann0see]

Can you open a PR on my repo (change it in upload/assets/css/custom.css and newdesign/Assets/css/c.min.css

I‘ll probably not be able to change it for the next few hours

[gilgongo]

Hm. I can't see those files (did you mean /upload/assets/css/c.min.css and newdesign/assets/css/custom.css?). I'll leave it for now.

[geheimerEichkater]

One other suggestion: the logo icon (three bubbles cloud with the flash) also exits in an inverted version, exactly for that case. This way, you exchange the logo, use the #49a9c9 blue for the whole header/hero bg and then the contrast should be sufficient. See preview in attachment.

[gilgongo]

That might be better (particularly with the ghost button white border), but the text will have to be darker if the background is darker. White text on #49a9c9 still doesn't have enough contrast.

[ann0see]

@gilgongo Yes. Sorry I meant what you mentioned.
@geheimerEichkater Could you please send a SVG version? I can try that. Maybe I can manage to change the SVG source myself.

[gilgongo]

Support ticket on SF for the https thing: https://sourceforge.net/p/forge/site-support/21270/

[ann0see]

One other suggestion: the logo icon (three bubbles cloud with the flash) also exits in an inverted version, exactly for that case. This way, you exchange the logo, use the #49a9c9 blue for the whole header/hero bg and then the contrast should be sufficient. See preview in attachment.

Ok. Done!
I've edited and minified the SVG. I hope that's ok for you?
Nevertheless, I'd probably prefer your suggestion with the cloud.

Also #ffffff is quite bright.

[geheimerEichkater]

I've edited and minified the SVG. I hope that's ok for you?
Thanks, yes alright, matter of fact … I cannot attach svg to this conversation. The background of the header could now be adapted to the logo-blue to contrast a little better against the white typo than the current light blue does.

Nevertheless, I'd probably prefer your suggestion with the cloud.
Do you mean the suggested photographic element? I would consider @gilgongo advice and if so, then provide the bg-graphic with an even darker blue, just dark enough to validate contrast against white typo. Anybody else in favor of the photographic element? Should I go for it?

[ann0see]

I’m quite sure I did that already:

https://ann0see.github.io/jamulus_website/upload/

@gilgongo could you please upload the new css too?

[ann0see]

Background color seems to be fixed.

The SourceForge Support answer isn’t very helpful. There are no http links on that site

[gilgongo]

They've got https up now.

So are we all done now? The text contrast issue may be too tricky to solve easily (although what's the "suggested photographic element" mentioned by @geheimerEichkater ?)

[ann0see]

I‘d say yes, we’re finished for the first version. There can still be some improvements (@geheimerEichkaters‘ suggestion with the cloud, translatable page,... but that’s all future work. I‘ll close the issue now.)

[ann0see]

615

@corrados please undo the .htaccess changes and re-upload the old files for SEO. We don‘t want to loose reputation.

I don’t know if that’s already the case.

[corrados]

@gilgongo Can you please take care of all these Jamulus homepage issues/required changes?

[gilgongo]

please undo the .htaccess changes and re-upload the old files for SEO. We don‘t want to loose reputation.

Not sure I understand. The .htaccess file currently redirects old URLs to new ones. So do you mean the redirects weren't what we wanted and that we should still have those URLs working as they were?

BTW I removed the old files (I have a backup) apart from Volker's .pdf and the .htaccess, and replaced them with the new ones.

[ann0see]

The problem is that the GitHub wiki is not indexed —> google might remove the links and it’s reputation.

My index.html etc can stay up

[gilgongo]

OK (I assume there's no duplication in the file names).

I know you said "_In SEO never design for search engines_", but doesn't this mean we need to add "MOVED TO HERE" links for humans on those pages? How else will people from Google know about the up to date content?

[ann0see]

No. We shouldn't change anything yet (that means the old pages except for the homepage should be uploaded) until #615 is solved.

[gilgongo]

I sense the stakes are not that high though :-) A search for "internet live music playing" shows Jamulus not ranking at all as far as I can see. Or has that just happened this week?

[gilgongo]

OK that's done. All the old files are back up (but no .htaccess and index.html re-named index-old.html)

[ann0see]

That’s good. Now we can continue in the other issue

[ann0see]

https://llcon.sourceforge.io/servermanual.html

Ranks quite high (search for setup jamulus).

This page should now show a text saying: We are currently migrating to an other wiki software. More up to date information during transmission period can be seen on the GitHub wiki.

Client setup:

Server setup:

[gilgongo]

(search for setup jamulus)

Well, yes :-) "jamulus" is a unique word so I would hope at least the home page (although we have several) would come in as number 1. But if you don't know about Jamulus, then you're not going to type that in to Google.