Tweaks for mobile UI

[humphd]

I'm reading Telescope on my phone a lot more, and I wonder if we can tweak some things, and learn from other apps. Here's a comparison of a few:

• https://www.newyorker.com/sports/sporting-scene/the-blockbuster-video-game-that-wants-to-make-america-whole-again
• https://longreads.com/2019/11/22/this-is-how-you-lose-your-mind/
• https://medium.com/@REAS/collecting-in-the-age-of-digital-reproduction-ab0640a42fe6
• https://www.ft.com/content/0ae1c300-7fee-11ea-82f6-150830b3b99a?desktop=true&segmentId=d8d3e364-5197-20eb-17cf-2437841d178a

Requests for Changes on Mobile

1. Reduce the left- and right-hand margin. We are wasting too much space that could be used to show content.
2. Reduce the margin between paragraphs and other vertical blocks so we don't waste so much space.
3. Consider dropping the font size and line height a smidge. I don't think we're getting enough text on each line.
   1. Consider moving to a serif vs. sans-serif font stack. Literally every other long-form writing app I see uses one.
4. Consider the secondary app bars that are happening in these other apps. This is connected to Fixes #930 Post header sticks to the top #1034. Should we do something like Longreads, and put it at the top under the app's navbar? Or should we do what the New Yorker does and pin it to the bottom?

Also, I'm not sure that the dark gray works when it's not in the context of the darker body. For mobile, I wonder if we should lighten this background colour? It reads as very dark.

[cindyorangis]

I would like to hear @agarcia-caicedo 's thoughts on this

[agarcia-caicedo]

I feel like most points sound reasonable, however, for the forth point, do we want to change the font because we want to imitate the other apps, or do we want to change for readability issues?

Because if it's the latter, there is inconclusive research done on whether serif or sans serif is better, and there are other factors of typography that we should focus on rather than the serif. (This source goes into more detail)

If it's the former, that's more of a site identity discussion, but I'm pretty open to either type of font. I think we have a good serif font in the AdobeXD file.

[agarcia-caicedo]

For the background, we could try making it more light, since before we had an issue with people feeling blinded after they scrolled from the very dark hero image into a light background. Now, that might not be an issue

[agarcia-caicedo]

For the app bar, we could move it to the bottom of the screen while someone reads. It could be better for navigation, but I'm not sure about how much space it take up. Wouldn't hurt to try, though.

[cindyorangis]

For me personally, the key benefit I see in serif fonts is the ability to see the difference between a capital I and a capital L. Other than that, I prefer sans-serif because it has a more simplistic and modern feel to it. Most of the lengthy reads I consume on the internet do not use serif fonts (eg Reddit, Twitter, GitHub, documentation for whatever I'm working on (Material UI, Gatsby, React)).

I would like us to move towards a clear light and dark theme concept. Implement darkmode. What do you say? #77 ;) What we have now is a little bit weird to read in dark settings

I dont like the idea of having the app bar pinned to the bottom because we have a scroll-to-top button there. But if someone presents a really good case for it, I'm willing to try it out. It seems wherever we put the appbar, it will conflict with something else 😂

[humphd]

I've updated my requests above to reflect discussions I'm seeing here. Let's keep this focused on some small fixes to the text. We can explore other, bigger changes in different issues.

[chrispinkney]

Fixed by UI 2.0 updates. Closing.