Homepage Update - #314
Conversation
|
|
|
|
There are some good ideas here, easy to adopt, as well as other changes that user will DETEST! Is it possible to segment this PR into a few manageable pieces? Even if everything is eventually adopted, gradual change is easier for users to accept. For example, putting New Releases below the fold will alienate regular users, who return to the homepage mostly to see new releases. It is VERY important that the word "library" appears in the "slogan". We do not want to look like a run-of-the-mill pirate free ebook site. |
|
Suggestion: share also mobile screenshots. The world is increasingly mobile first as people continue to shift away from desktops and laptops and toward phones and tablets. |
|
At 435px screen width: 
|
|
Putting "Library" into the slogan sounds fine to me. In the spirit of more graduality we could ship the first version with "New Releases" still as the first carousel. I'll adjust the PR with these changes once I find the time. I don't think more segmentation is necessary - all other parts of this update are clear and unsurprising and in my opinion plainly better in terms of UI/UX than the status quo. I'd then suggest to switch the carousels in a few weeks time so that "Most Popular" goes first. Yes, some people will dislike it. However one of the most important jobs of a homepage is to convert/attract web users that somehow land on the page. Getting new users that is. And having those people see "Moby Dick, "Frankenstein", "Alice in Wonderland" etc. in the top carousel is just WAY more powerful than a few books that usually only few people have ever heard of ("New Releases"). The "New Releases" will be one scroll away for the others. Not a big price to pay for that benefit. |
|
Updated. |
|
added background for carousels back in. better that way. color lighter and nicer than status quo. 
|
|
It would not be hard to have an exact number instead of "78,000+", since the book panels are generated from autocat3, which does a count query on a timer. |
|
I like that idea. will give it a try. If it's easy, we can include it right away. If it turns out to be fiddly, I suggest we do it as a separate follow up PR, so we can start testing this PR earlier rather than later on dev |
|
Implemented ebook counter as suggested using the same pattern as the cover shelves (committed placeholder + CI copy + gitignored prod-generated file). Remaining work is in autocat3 — coming up soon. |
|
iirc, to call to autocat3 is done in the (dev|prod)-jekyll.sh script (I think it's ins ebookconverter) |
|
First, a general comment about the purpose of our homepage.
Now, a point by point review of the changes:
"79,123" will be punchier than "over 75,000" - good change.
These "trust badges" are all negative attributes. The way we had them before is appropriately down the page.
This is a good improvement
See discussion above.
I like the icon grid.
I like this idea.
I will rewrite the statement
I like this. I see that much of the text has switched to relative sizes, which will help with accessibility, though it makes the design task a bit more challenging. Thanks for this work! I apologize for taking so long to do a proper review. |
|
I think it's a mistake to not actively care about getting new users and designing that appropriately into the page (homepage and other parts). Tomorrow's regular users are today's new users. Plus, Mission statement reads "To encourage the creation and distribution of eBooks", new users are clearly part of distribution |
|
PRs added in autocat and ebookconverter to make the ebook counter work. |
|
I agree with Eric on the new releases being more important than the top books list. I suspect A lot of the amazing stuff at PG is in the long tail, and the new releases carousel would make them more prominent. Just my 2¢, but I may be an atypical reader. I've never had any motivation at all to read our most popular book (Moby Dick), if I'm being honest. But we have a lot of titles nobody's ever heard of that have been fascinating to me. I'll leave a handful of examples of off-the-beaten-path books that, for me, are better than the most popular list.
|
|
"New Releases" is already back up at the top. One thing I would add though is that as of now our "New Releases" still dont have summaries. That's really not good! If any new visitor goes to the page and clicks any of those New Releases, he/she may be left with the impression that PG books just don't have summaries ... We're leading with our least well processed books in the most prominent place on the page. |
|
For convenience here the latest status on larger Screens. The tablet and mobile versions look pretty much exactly how one would imagine them based on this - the top four sections compression horizontally, the parts shown in the last Screenshot align vertically in relation to each other. 
|
eshellman
left a comment
eshellman
left a comment
There was a problem hiding this comment.
- please fix conflicts!
- As I said previously, there is a lot to like about this design but doing a major change means that we can't gloss over the rough edges a bit at a time.
- I have not yet reviewed issued on small screens
|
|
||
|
|
||
| /*------------------------------------*\ | ||
| HOMEPAGE REDESIGN (scoped under .pgx) |
There was a problem hiding this comment.
I assume these 400 lines obsolete some old css?
Please clean up the file. File bloat is technical debt.
There was a problem hiding this comment.
no, they are not obsolete. There is stuff that can be tightened though - I will do that as the last step once the design is actually finalized.
| <h1 id="slogan">A library of {% include book_count.html %} free eBooks</h1> | ||
|
|
||
| <p id="sub-slogan"> Choose among free epub and Kindle eBooks, download them or read them online. You will find the world's great literature here, with focus on older works for which U.S. copyright has expired. Thousands of volunteers digitized and diligently proofread the eBooks, for you to enjoy. </p> | ||
| <p class="pgx-mission">Choose free eBooks to download or read online. You will find great literature here with a focus on older works whose U.S. copyright has expired. Thousands of Project Gutenberg volunteers have digitized these books for you. </p> |
There was a problem hiding this comment.
- resolve conflicts
- keep the existing text
There was a problem hiding this comment.
- done
- done, except some klunkly formulation in sub-slogan removed
| </div> | ||
| </div> | ||
| </div> | ||
| <ul class="pgx-trust"> |
There was a problem hiding this comment.
Remove this. It's clutter, and it moves more important stuff below the fold on mobile.
There was a problem hiding this comment.
ok. I don't think they're clutter, but we have bigger fish to fry here.
| <div class="pgx-shelf-titles"> | ||
| <span class="pgx-shelf-title">New Releases</span> | ||
| </div> | ||
| <a class="pgx-shelf-more" href="/ebooks/search/?sort_order=release_date" id="more_recent" title="find more recent releases">Browse all <span aria-hidden="true">→</span></a> |
There was a problem hiding this comment.
The placement of this text is confusing when the book carousel is not full width; not clear whether browse all moves the scroll box or launches a new page. maybe better to use a right arrow or a more link as the last element of the scroll.
There was a problem hiding this comment.
I'll experiment
There was a problem hiding this comment.
better. that was a good idea.
There was a problem hiding this comment.
Maybe remove the arrow? when there's a scrollbar, the user expects more scrolling
| <div class="pgx-shelf-titles"> | ||
| <span class="pgx-shelf-title">Categories</span> | ||
| </div> | ||
| <a class="pgx-shelf-more" href="/ebooks/categories.html" title="Browse all categories">Browse all <span aria-hidden="true">→</span></a> |
There was a problem hiding this comment.
again, the arrow is confusing because "categories" is left out of the anchor text.
| <p class="pgx-lead-text"><strong>Project Gutenberg is the world's oldest digital library.</strong> Michael Hart started the Project in 1971. Today it is a nonprofit sustained entirely by volunteers who digitize and proofread works of literature as they enter the public domain, keeping them free for everyone, everywhere. We charge nothing, run no ads and never will. Donations are what keep our servers running.</p> | ||
| <div class="pgx-lead-links"> | ||
| <a class="pgx-btn pgx-btn-secondary" href="/about/">Learn more</a> | ||
| <a class="pgx-btn pgx-btn-secondary pgx-btn-donate" href="/donate/">Donate</a> |
There was a problem hiding this comment.
why is this donate button different from the donate button at the top?
There was a problem hiding this comment.
doesnt need to be. I'll check how it look if it's the same as in the header.
There was a problem hiding this comment.
gave it the same style as the one in the header. work better imo.
| <div class="pgx-card pgx-card--lead pgx-lead-wide"> | ||
| <p class="pgx-lead-text"><strong>Project Gutenberg is the world's oldest digital library.</strong> Michael Hart started the Project in 1971. Today it is a nonprofit sustained entirely by volunteers who digitize and proofread works of literature as they enter the public domain, keeping them free for everyone, everywhere. We charge nothing, run no ads and never will. Donations are what keep our servers running.</p> | ||
| <div class="pgx-lead-links"> | ||
| <a class="pgx-btn pgx-btn-secondary" href="/about/">Learn more</a> |
There was a problem hiding this comment.
"Learn more" is terribly vague. and could you articulate for us why it is buttonized ?
There was a problem hiding this comment.
"Learn more" is directly after a text about PG and leads to the "about" page - what's vague about that?
doesn't need to be buttonized but looks better
There was a problem hiding this comment.
Is there any sort of sort of content does "Learn More" exclude?
| <img src="/gutenberg/b_news_icon.png" alt="Bluesky icon" > | ||
| </a></li> | ||
| </ul> | ||
| <div class="pgx-cards-row pgx-cards-row--outro"> |
There was a problem hiding this comment.
I suggest stacking 'follow us' and 'newsletter ' in a 30% right column and put the other cards in a 70% left column. I suggest demoting the audio books by one outline level and merging it with "special areas". And of course, think of a better heading for "special areas".
For wide screens leave the cards open!
see if we can have the content of each card be in markdown by moving the html to a template; We'll need to edit these from time to time and the html is quite verbose.
There was a problem hiding this comment.
in my opinion this is the only actual real substantial problem. I'll look into it.
| </div> | ||
|
|
||
| <div class="pgx-card pgx-card--social"> | ||
| <h2 class="pgx-social-title">Follow Us</h2> |
There was a problem hiding this comment.
this card is much much better than existing
…s ebook_count include
# Conflicts: # site/index.md
…eases / All categories / All popular
|
just worked through all the comments. In my view the one substantial thing left is the bottom part of the page (below the second carousel) on large screens. On mobile it's good, but on larger screens there is the problem that we're collapsing 4 not unsubstantial sections into one accordeon that gets "only" a third of the screen width in terms of real estate. That's something to think about. Here the latest status in Screenshots for convenience: |
|
|
From https://webaim.org/techniques/textlayout/
The centered block of text will not survive a11y review, |
|
it's a "should have" not a "must have". let's focus on real problems. |
|
as mentioned before, the bottom part of the page below the second carousel is the main thing that needs work anyway (on larger screens). Maybe left-aligned text will fit more naturally in whatever the eventual design of it will be. I suspect there's a good chance of that, but not sure until we've tried. We'll see ... |
3 participants
Homepage design update. See Screenshots in the comments.
The goal was to make the page cleaner, nicer, less wordy, more modern and most importantly much better at leading users into the experience of actively browsing for books on PG.
Many things have been updated. Some of the more important:
Notes:
site/index.mdandgutenberg/gutenberg-globals.css.