> zoom in to full width
Narrow column layout are awesome: You can zoom in to full width, resulting in big fonts for your screen. Most website's fonts are too small by default to be read on an iPad. It gets worse when I'm on a subway or reading while walking home (90% of my HN reading time): Font to small, can't zoom, = leave the website.
So rule #8: Let people use the pinch-to-zoom on your mobile website (Ironically, the OP itself has pinch-to-zoom disabled).
Which leads me to a more important point: Why do "responsive" js libraries sometimes disable pinch-to-zoom?
For my own personal site[1] I tried my best to maximize the viewing area while keeping some padding of the text from the edge of the screen for "comfort" and a small pinned navbar for usability.
Idk if that is best practice though. I want to see one so that I can follow those for a few projects I'm currently making.
Also: I want to see a millisecond by millisecond breakdown of what happens when for a typical mobile page load.
[1]: Shameless plug, but I don't really design mobile websites that also acts as a desktop one: https://shuhaowu.com