mobile-style: improve mobile display

[jeffkaufman]

Improve mobile display by switching to a fixed 750px viewport and making things bigger to compensate. This change is adapted from bellroy/eaforum#65, which took the same approach to the EA Forum.

You can see it live on http://www.jefftk.com/lw-testing/index

Here are some screenshots:

http://www.jefftk.com/lw-testing/comments-old.png
http://www.jefftk.com/lw-testing/comments-new.png

http://www.jefftk.com/lw-testing/discussion-old-top.png
http://www.jefftk.com/lw-testing/discussion-new-top.png

http://www.jefftk.com/lw-testing/discussion-old-bottom.png
http://www.jefftk.com/lw-testing/discussion-new-bottom.png

http://www.jefftk.com/lw-testing/post-old-top.png
http://www.jefftk.com/lw-testing/post-new-top.png

http://www.jefftk.com/lw-testing/promoted-old.png
http://www.jefftk.com/lw-testing/promoted-new.png

[brendanlong]

It's interesting that we both did this at the same time, see PR #599.

The reasons I think my approach is better are:

• It doesn't require a completely different phone theme (the only media query I use is to remove the tagline from the discussion page)
• It scales fluidly in the range it supports (yours would have huge text on a screen that's 750px wide).

Also, I think yours has a bug where if you scale a desktop window to less than 750px wide, it makes the text huge. I assume you could fix this by making the media queries check if the device is a phone or something.

Mine doesn't scale as far as yours, but that's only because I didn't remove the sidebar.

[jeffkaufman]

if you scale a desktop window to less than 750px wide, it makes the text huge.

This was also affecting tablets. Fixed with b9a1bde, which gates the font size increases on a max-device-width of 550px.

Screenshots from Chrome's emulated ipad:

before: http://www.jefftk.com/lw-testing/discussion-ipad-old.png
after: http://www.jefftk.com/lw-testing/discussion-ipad-new.png

[jack-trikeapps]

Hi Jeff, Brendan,

I'm trying to decide which of your two PRs I should merge. I'm currently leaning towards this one, for the following reasons:

• Similarity to eaforum, in case cross-porting changes becomes necessary
• Lack of JS
• Seems to work better in Firefox's responsive testing mode, where Brendan's doesn't.

Brendan's comments about smooth scaling sound useful, is there a way to get the best of both worlds?

[brendanlong]

• Mine works perfectly in Firefox's responsive testing mode. Do you have this one backwards?
• The JavaScript isn't a problem: It only matters on mobile browsers, which don't let you turn JavaScript off, and if you somehow managed to do it, the only problem would be the initial scale being slightly worse on phones (it would show the page at "actual size" instead of zoomed out to show the entire page). Also, we will probably want JavaScript anyway if we hide the sidebar, since we'd want a way to show it again.

I'd also add:

• The CSS in mine is a lot easier to understand and test, since there's one theme with small changes on smaller screens, instead of effectively two completely different themes.
• I'm not sure where the sidebar went in Jeff's version. How do we log in?

[jeffkaufman]

@brendanlong "I'm not sure where the sidebar went in Jeff's version. How do we log in?"

It's at the bottom. For example, see (from above):

http://www.jefftk.com/lw-testing/discussion-old-bottom.png
http://www.jefftk.com/lw-testing/discussion-new-bottom.png

[jeffkaufman]

@jack-trikeapps Thanks for looking it over!

Brendan's comments about smooth scaling sound useful, is there a way to get the best of both worlds?

With b9a1bde there's no longer a problem of huge text on desktops and tablets. Is there something else you like out of the more responsive version?

[brendanlong]

Ah cool. Moving the sidebar is a good idea.

[brendanlong]

@jack-trikeapps I'm worried that we're making perfect the enemy of good here. Less Wrong is currently unusable on phones, so I'd like to propose:

• If you're leaning towards Jeff's solution, merge it now.
• I can rebase my solution on top of that commit so we can have a conversation about which approach is better in the long term. This will also make the comparison easier since it will be a two-way rather than three-way choice.

[AndrewPratley]

Hi @jeffkaufman

There were a couple of issues which would be good if you could fix before we deploy (see attached screenshots):

• We just changed the homepage. Oliver H and Matthew G are going to fix the css on it shortly (you might want to wait until they have done this). Your changes end the page prematurely where the sidebar was. See here: sidebar
• The Privacy and Terms gets bumped down slightly. See here: privacy
• Show By is showing two arrows. See here: arrows