Speaking of the Archive, Dan Fabulich came up with a more readable and responsive CSS layout. I have now installed this across the Archive site.
Text columns now have a maximum width. Two-column layouts (like the front page and the index pages) collapse to column-above-column rather than getting real skinny.
I see a few things I could still improve. Notably, a narrow window now pushes the front-page search bar down to the middle of the page, which is not ideal. I will adjust this. (I still want search fields on more pages, too.)
Let me know if you have any comments, or if you see any problems. I’ve done a lot of general tidying; there’s a nonzero chance that I’ve broken a link somewhere.
no issues for me.
Firefox, full window, 1920x1080 screen with 170% zoom (not only the age, but also balancing fast reading with, uh, how to say ? quantity of info onscreen… I don’t find a mean of explaining well in english…)
I think the breakpoints could be improved. My browser window is 1920 pixels wide, and at one font size (170%) there is two column layout and gaps at the sides, at the next font size (200%) there is no side gaps but now only a single column. There should be a (larger) middle ground where you can get two column layout with no gaps at the sides.
I’m still learning about responsive web design, but I thought most breakpoints would (should?) be done via media queries on font size. The principle being that the base font size is the size which the user is most comfortable at reading text, and since the text is the most important thing, everything else should adjust to that.
For my own little project, I am using things like @media (min-width: 40em) which has worked pretty well in my tests.
Dan’s original PR had media breakpoints based on font size, but it had some annoying glitches when mixed with the existing pixel-size measurements. Mixing the formats turns out to be a bad idea. So I changed the statements to be pixel size limits. But I think I missed a few.
Maybe I should have changed everything to use font size limits, but it’s an old site and I didn’t want to revamp absolutely everything.
(I also got distracted tweaking the search feature, so I haven’t looked at this yet. Sorry!)
I’ve adjusted the CSS so that it’s a bit less jumpy when you resize.
There’s still some column weirdness on the index pages. (The search widget at the top doesn’t have the same column behavior as the body of the page.) But I’m done fussing with it for the time being.
Yeah, I can imagine these things can get really complicated sometimes. I appreciate the work to make the site adapt to different devices, it will help many people (myself included).