I can’t believe a mostly text website that doesn’t scale well on mobile made it to production in this day and age. Was it worked on by a single person? Did no one review it and think of opening it on their mobile?
I’d even say it’s harder to make a text website NOT render well on mobile. Doesn’t HTML handle that by default, unless you use some freakishly long text without spaces?
Not every website's key metric is conversion of mobile users. I have never needed to read Ruby documentation on my phone. I'm glad they did not waste their time on unimportant stuff like mobile UX in this case.
I doubt you’re the only user of the Ruby documentation though.
I’m not a (frequent) Ruby user, but I routinely check the Go documentation, the MDN, the Python documentation, and several other language documentations on mobile. Because sometimes I will think of something while I’m walking my dog, or while I’m in my couch, or before sleeping, or at any other moment.
Mobile UX is exactly as important as desktop UX. And for a text only website (ie. not a web app) you don’t even need to spend time to make it work, it’s almost the default behavior. You have to go out of your way to make a text website that doesn’t render well on mobile.
I can't tell why it works, but I can talk about some general things I see.
First, I assume the problem is that, when viewed on mobile, this website is wider than the screen. (Or wider than the browser window.) This makes some horizontal scrolling necessary in order to read some of the text.
No matter how narrow I make the browser window on a desktop, the same problem never occurs, so at first glance this looks like a bug in the mobile browser (which for me is Firefox Focus).
The `box-sizing` CSS property determines whether you want the size of an element to be set to the value you specify, or to something else. You might ask "why would I want something else?", and that's a good question.
Anyway, `box-sizing: border-box` means that when you set the width of the element, it won't be any wider than the width that you set. The default value of this setting is `content-box`, which means that the "content" of the element won't be any wider than the width you set, but, if the element itself uses any padding or borders, those don't count toward the width and the element will be wider than you said it should be.
I assume the adjustment to `max-width` is intended to do two things:
(1) prevent the width of the element from exceeding 100%, presumably related to the width of the browser window;
(2) otherwise, raise the previous maximum by 64px, to adjust for the fact that padding is now included in the notional width of the element. There was probably 64px worth of padding originally.
The problems I see in my own analysis are:
(a) We're only adjusting the `max-width` property, which means that if an element wants to be narrower for other reasons, such as the width of the browser window, that was always allowed. It's not clear to me why this wouldn't have been happening in the page as delivered.
(b) As I mentioned above, the problem that occurs on mobile does not ever occur on desktop, no matter how narrow the browser window gets. This suggests that it isn't a problem with the CSS, but rather with the mobile browser.
I find myself reading technical docs on my phone all the time. I'm often out on a walk or shopping or whatever while thinking over a plan for a project, and when I have an idea that seems like it'd work I'll go look at the docs to make sure I'm not missing something.
They clearly wanted to support mobile (otherwise the hamburger menu is unforgivable) and already spent time making it partially work, but it looks like they just bailed out early before going the final 1% of the way to it looking polished (see a sibling's two-line fix [0]).
I’d even say it’s harder to make a text website NOT render well on mobile. Doesn’t HTML handle that by default, unless you use some freakishly long text without spaces?