Stylesheet: responsive design width

[prowlett]

I'm not sure whether commenting on a closed issue does anything, and I don't seem to have the ability to reopen it, so I'm putting this here to be sure it can be seen.

In issue #169 @christianp said

I suppose a reasonable principle is that the breakpoint should happen at or before the point where the text would be narrower than the optimal readable width, which is 50em.

Looking at style.css as generated, line 330 is

@media (max-width: 78em), print {

I think this should be

@media (max-width: 50em), print {

[christianp]

78em is correct: that's 50em for the main text, 25em for the sidebar, and 3em for padding on the sides and between the text and sidebar.

[prowlett]

That seems too big to me. 78em means it doesn't sidebar on lots of devices, and the menu above the content means a lot of extra scrolling and all pages look basically the same above the fold. I have lots of websites that don't go into mobile phone mode when I give them half my monitor, and it seems strange to never have a sidebar on a tablet etc. I also don't think the sidebar needs to be half the size of the main content.

[prowlett]

I don't know if I'm doing something wrong, but this is what I'm seeing. I think the window is about 1700px wide and taking up about two thirds of my screen, and it's still acting like it's in portrait mode on a mobile phone. Most of the window is blank space, and I have to scroll more than a screen height to get to the page heading. Is this what you expect I'll be seeing?

[prowlett]

Here's the same thing when I switch to @media (max-width: 50em), print {. This seems to have plenty of room for the main content still, to me.

[prowlett]

I don't know if I should be expecting a reply, @christianp @chrismgraham. I asked "Is this what you expect I'll be seeing?"

I suppose you might say something weird is going on with your computer Peter and this isn't what we'd expect you'd see, or you might say yes 1700px is not enough width to support columns on a website.

[christianp]

You were right to expect a reply, but you would've been even more right to wait a bit longer!

Maybe I have got it wrong. I wanted to maximise the width of the text for as long as possible, but you're right htat the sidebar is still useful when it's narrower, and the text can get a bit narrower and still look good.

I'll do some more fiddling.

[prowlett]

Okay, cool, thanks. Yes, fair enough about waiting, but I was unsure whether a comment on a closed issue would generate a notification (so I @'d you this time) and whether I'd asked enough of a direct question. Of course happy to wait.

I wonder about asking for input from a wider group, for example the JISC ACCESSIBLE-MATHS group. Clearly there is a balance to be struck, and I don't know enough to comment fully.

[prowlett]

Grand, thank you, this looks good to me.