search

EbookFoundation / regluit

webapp for unglue.it
http://unglue.it
Other
50 stars 17 forks source link

First pass at download page #67

Closed NicholasAntonov closed 6 years ago

NicholasAntonov commented 6 years ago

not all edge cases tested, but this is 90% of the way there, good for review

eshellman commented 6 years ago
download-desktop-prod download-desktup

Reviewing the desktop view, because it needs a lot more work than the smartphone view.

  1. The font sizes are all over the place- very uncomfortable to read.
  2. The the actual download button is comparatively tiny, and inexplicable. For accessability, it must have alt text. Consider having a larger click area.
  3. The download page has room for additional information like license, pdf icon, and source of the file host.
  4. By comparison, the Set-up Kindle button is HUGE.
  5. we don't need 766 pixels for the donation amount; our audience isn't quadrillionaires. give it a max-size. Maybe do that in django form?
  6. The current design group areas of the page functionally. so for example the text "You'll need an unglue.it account to Send to Kindle." is grouped with the "Send to Kindle" button, and "Make this contribution" is grouped with the thank you button. in the responsive design, these associations are lost and the resulting UI is hard to figure out.
eshellman commented 6 years ago
download-mobile

The mobile page looks a lot better, but there's a lot of too-tiny text, and the screenwide download section disassociates the "pdf" label from the actual button. Also, look how tiny the rights-holder message is!

eshellman commented 6 years ago

"Save to Dropbox" doesn't work on a non-public server, but it opens a window on my iphone simulator, which I don't think is the right thing to do. Should check the dropbox documentation. Also the button is tiny.

eshellman commented 6 years ago

better, but desktop is still a problem.

dorian-prod dorian-desktop

look at the relative real estate taken up by the actions that we want the user to take on the page: download or read, versus the back link to the work page.

On desktop, the 1-click button is below the fold!

eshellman commented 6 years ago

This is an improvement.

  1. The "one-click" option should be at the top it it's available.
  2. I don't like the 2xN layout on larger screens. Better to keep the 1xN layout because it makes it easier to compare options. Ideally the page should present fewer options, but I can work on that outside of the scope of your project.
  3. in the 1xN layout, distributing the components horizontally makes them harder to read or activate. Pretend they're part of a sentence that belongs together.
  4. In this layout, I'm wondering at the the duplication in the top headings

    Downloads for The Picture of Dorian Gray Download freely available editions

This is partly a result of moving "1-click options" down on the page, but maybe something should be reworded.

eshellman commented 6 years ago

The "say thanks" button is broken. Have you inserted some sort of client-side validation?

Also, why is this button blue on my iphone and green on my desktop?

The header does awful things when I turn from landscape to portrait, but I assume that's a site-wide issue. More annoying, when shifting from landscape to portrait, the left 10 pixels get cut off. I appears to be related to the header, not the download page per se.

eshellman commented 6 years ago

I don't have any experience using flexbox. How do you get the three items in a row to act like a single block, that get centered, rather than 3 blocks which get centered in three columns?

NicholasAntonov commented 6 years ago

Instead of splitting up each column, the trick is to make the row display: flex; flex-direction: row; and set the justify-content property. Here is a good visual guide to how that property affects centering

The items widths are all taken into account when positioning, and centering in this case, is determined

eshellman commented 6 years ago

thanks! so I think center is best for this and it's now using space-between, right?

eshellman commented 6 years ago

There are a number of unresolved issues with the download page (and the header). Where should we track these?

NicholasAntonov commented 6 years ago

GitHub issues with a redesign tag seems like a good fit

On Mon, Apr 30, 2018, 8:14 PM eshellman notifications@github.com wrote:

There are a number of unresolved issues with the download page (and the header). Where should we track these?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/EbookFoundation/regluit/pull/67#issuecomment-385566115, or mute the thread https://github.com/notifications/unsubscribe-auth/AFt4LutuY4E3HdU6zDJ_395wK_VUSSGwks5tt6j7gaJpZM4TinOz .