Homepage redesign

[eshellman]

• reorganize homepage content
  • markdown text replaced with light blue responsive html content boxes.
  • added a new css file: homepage.css, which is referenced in the homepage content, not in the head
  • adds a second cover panel containing the 10 most popular books
  • adds 9 responsive buttons pointing to to Main Category headings
  • adds a highlights to Main category heading when they have focus
  • larger text for "slogan" and "subslogan"
  • larger text and accessible label for find-more caption in cover panels
  • add mouseover bounce to covers in cover panels
  • larger covers on desktop; cover panel is wider
  • titles in cover panels not bold, in a scrollbox rather than overflow
  • extra space under title in cover panels
  • more concise text, paragraphs replace by short sentences
  • audiobooks section moved below the fold
  • terms of use text removed
  • front page section anchors removed
• remove old navbar links from static browse pages

please leave comments on the new design here. We welcome criticism, but also tell us what you like!

[eshellman]

when a section heading has focus the hightlight box crowds the column edge. but worse, when it loses focus the bottom of the outline is occluded and looks weird. (can't screen shot that because pressing a key changes the focus. I think the effect is distracting and more touble than it's worth.

[eshellman]

Is it possible to keep the gray box text in markdown? the current design excludes those without html expertise from being able to edit the homepage.

[eshellman]

Unfortunately, a common use of the homepage is to alert users of outages and the like. Could there be a dedicate commented-out space in the markdown file to contain and appropriately style such alert messages?

[eshellman]

Now might also be a good time to pay attention to the loge presentation, for example, #125

[JohannesSeikowsky]

Is it possible to keep the gray box text in markdown? the current design excludes those without html expertise from being able to edit the homepage.

I don't think this is necessary. any reasonably intelligent person can look at the html and figure out which parts are where. I also think that mixing different markup languages is inelegant.

Unfortunately, a common use of the homepage is to alert users of outages and the like. Could there be a dedicate commented-out space in the markdown file to contain and appropriately style such alert messages?

makes sense. but tbh I'm running out of steam a little bit. let's get the current version online, so users can start benefiting from a cleaner design and do this in a separate PR.

Now might also be a good time to pay attention to the loge presentation, for example, #125

Marcello is still on it. Problem is that he's currently moving to another country (with 2 kids). Meaning he's swamped with that and his normal job. He'll get around to it in time though.

when a section heading has focus the highlight box crowds the column edge. but worse, when it loses focus the bottom of the outline is occluded and looks weird. (can't screen shot that because pressing a key changes the focus. I think the effect is distracting and more touble than it's worth.

both points are true. I was getting a little impatient to finish something and didn't give this full attention. I'll try to do some refinement work on this once I find the free time. This effect is also not actually necessary on mobile. I'll take it out there. It is however genuinely important on larger screens. Why? Because there are 3 columns. so whichever category a user may click on on the homepage, will not actually clearly be in that users visual focus on the next page. that's bad design and must be mitigated. so on larger screens this effect needs to stay. There are other solutions too, but would require significantly more effort. Maybe in other PRs if even necessary at all.

[lnatal2]

I didn´t want to be the 1st one to comment but...

What I like: the buttons for donation more visible, that's great to move them to the top of the page. Users are always asking how to donate to PG.

What I (still) don't like: Our newest releases. When "we click here for more" we get IMHO a very visually "polluted" page. We don´t need the alphabetical list of authors, titles, languages or special categories, just go straithforward to the item "Recent: [last 24 hours] [last 7 days][last 30 days]". Perhaps add an item below "Recent", such "For additional information click here" and then add the above mentioned itens.

All improvements look great, you did a great job, we are very thankful for that!

[eshellman]

@lnatal2 agreed on the "newest releases" page. But not in the scope of this design cycle. It's an old PHP generated page and will require more backend work.

[eshellman]

Is it possible to keep the gray box text in markdown? the current design excludes those without html expertise from being able to edit the homepage.

I don't think this is necessary. any reasonably intelligent person can look at the html and figure out which parts are where. I also think that mixing different markup languages is inelegant.

Unfortunately, a common use of the homepage is to alert users of outages and the like. Could there be a dedicate commented-out space in the markdown file to contain and appropriately style such alert messages?

makes sense. but tbh I'm running out of steam a little bit. let's get the current version online, so users can start benefiting from a cleaner design and do this in a separate PR.

Having the homepage as all html in a markdown file is indeed inelegant; the correct and elegant way to do this (I think) is to move all the html into a "template" loaded by a markdown file with most of the text. This would address the above points as well as letting us move the homepage.css file into the head where it belongs. But we can address this in a subsequent effort.

Also I would point out that as an organization reliant on volunteers, PG can't always afford to restrict its efforts to people simultaneously highly skilled in both html and prose, which is why markdown was chosen as the main format for website maintenance.

[eshellman]

@JohannesSeikowsky I'll finish the Autocat3 work we discussed on the languages etc. pages on the plane; I have most of it done: https://github.com/gutenbergtools/autocat3/tree/dev so we can bring that and this pr forward at the same time; we should version the css together.

[JohannesSeikowsky]

@lnatal2 thanks for your feedback! It seems that the link of "Our New Releases" was changed without my knowledge. It shouldn't point to one of those terrible "browse" pages, but to this one: https://dev.gutenberg.org/ebooks/search/?sort_order=downloads

which may not be perfect either, but most certainly better than the browse page. Thanks your letting me know!!

[JohannesSeikowsky]

@JohannesSeikowsky I'll finish the Autocat3 work we discussed on the languages etc. pages on the plane; I have most of it done: https://github.com/gutenbergtools/autocat3/tree/dev so we can bring that and this pr forward at the same time; we should version the css together.

please post screenshots before merging or putting this on dev. So I and @gbnewby also can have a look.

[eshellman]

@lnatal2 thanks for your feedback! It seems that the link of "Our New Releases" was changed without my knowledge. It shouldn't point to one of those terrible "browse" pages, but to this one: https://dev.gutenberg.org/ebooks/search/?sort_order=downloads

It's from your branch: https://github.com/gutenbergtools/gutenbergsite/blame/dev/site/index.md

perhaps you forgot to commit a change

[lnatal2]

@eshellman I am getting familiar with these ways of communication with dev people. Thanks!

[JohannesSeikowsky]

It's from your branch: https://github.com/gutenbergtools/gutenbergsite/blame/dev/site/index.md
perhaps you forgot to commit a change

probably. I don't remember ever changing that href to a browse page though. Anyway. I'll just fix it later

[lnatal2]

Unfortunately, a common use of the homepage is to alert users of outages and the like. Could there be a dedicate commented-out space in the markdown file to contain and appropriately style such alert messages?

A dumb question: if there is an outage, how these alert messages will be posted?

[eshellman]

Unfortunately, a common use of the homepage is to alert users of outages and the like. Could there be a dedicate commented-out space in the markdown file to contain and appropriately style such alert messages?

A dumb question: if there is an outage, how these alert messages will be posted?

There are many types of outages; for some fraction of them the static homepage will still work.