[WIP]: Redesign Liberapay

[EdOverflow]

This is a PR for #734. My goal is to make Liberapay look less like bootstrapy and more unique, and appealing to its users.

[sirjamesgray]

do you have a before / after image to illustrate the changes?

[EdOverflow]

The changes mainly consist of subtle adjustments to individual components of Liberapay.

Before	After

Before	After

Before	After

Before	After

[EdOverflow]

@Changaco, when you find time, could you please take a look at the changes I made here? Is there anything you would like me to add or change?

[Changaco]

I'm not convinced by some of the proposed changes.

• Dropping the navbar background color makes the website look more "bland" to me, like when it was still gray 2 years ago.
• The footer seems too big (in height).
• The uppercase jumbotron feels like it's shouting at me.

But maybe that's just me. Can we get other opinions?

Also:

• Putting a gray line under links looks okay, but it's a problem for block links (e.g. links that wrap an avatar).
• I remember at least one person speaking up against round avatars in a previous issue.
• It's not okay to make minor changes to translatable strings without updating the PO files.
• This branch needs to be rebased, and we don't use merges inside Pull Requests.
• The first change I would have expected to see in a PR that aims to make Liberapay "look less bootstrapy and more unique" is a modification of the theme colors in variables.scss, yet this branch doesn't touch them.

[LiamDawe]

Just to add my thoughts too, a lot of the changes seem totally unnecessary. Like the navbar, removing the colour? Why? It needs to stand out, it's a navbar.

[jorgesumle]

I don't understand much about design, but I recall @onpon4 didn't like the yellow color at all from a forum discussion, here the reasoning:

That's not what I was talking about. The layout is fine. The problem is the colors, specifically that yellow banner and the yellow "donate" button. This is a terrible color choice and it's even worse to mix it with blue. The text also has bad contrast, so it's difficult to read, and the white background is overly bright.
Combine these together and if I were to point most people to this page, they would click straight away before I even have a chance to sell it to them.

[EdOverflow]

@jorgesumle, that is my opinion on the yellow too. I don't plan on leaving the navbar like this, but I really dislike the current yellow colour on liberapay.com. I will mark this PR as a [WIP] to make it clear to all of you that I am still working on this and by no means done.

[comradekingu]

There are no less than 4 buttons to create an account here. I think one is enough.
Donation buttons are more effective in green https://chuffed.org/academy/articles/detail/how-to-increase-your-donation-page-conversion
This also suggests not requiring an account before donating, which may be possible, but is not clear. Waiting for #1052 to merge before getting on with rewriting the blocks and the FAQ.

Any amount of design will not overcome the busy look of too much text, which is an improvement directly related to induced stress for the user. I can't seem to overstate this enough.

"Sponsors" and "Thanks" naturally belong at the bottom because it is where one would expect to find them.

I liked the yellow top bars.

[MartinDelille]

I personnally prefer this new UI to the current one. Is it still goind on?

I collected the following proposition from the comment:

• reduce footer height
• update PO files
• edit variables.scss
• rebase and fix conflict
• Remove donate button count to one

[comradekingu]

Suggested change

	<h2>{{ _("Liberapay is a recurrent donations platform") }}</h2>
	<h2>{{ _("Liberapay is a recurrent donation platform") }}</h2>

[rkingett]

Could we add AccessLint so that our accessibility is constantly reviewed? Especially for this redesign?

The best thing would be to use semantic HTML but the latest Bootstrap has accessibility considerations built in, I think.

[Changaco]

I have enabled AccessLint for this repository.