When adding responsive design to the MagmaSoft websites I was tempted to use either Pure.css or reuse Milligram as done on my homepage, however decided to google for typographic correct breakpoints. No need to explain here what this is, since Vasilis van Gemert has done it masterly in his article about Logical Breakpoints Responsive Design in the Smashing Magazine

Vasilis provides a measure help which allows you to detect, how many ‘em’s you need for a certain font to provide a certain average amount of words per line in a certain language. Since we are trilingual: English, German, Spanish, I tried several options and settled on 40 em, which gives us around 90 characters a line. The left margin is set to 6% of the space, the text line to 94%, so that the reader does not have to horizontal scroll the maximized browser window on a wide screen to find the text.

When the screen size gets smaller, the text font is scaled down a little bit and the margins are set to zero. So there is more text shown on smartphone screens.

IkiWiki just required some small changes to local.css and page.tpl.

local.css:

@media (max-width: 44em) {
   body {
      font-size: .9em;
      padding: 0 1.5em;
      margin: 0;
    }
}

@media (min-width: 44em) {
   body {
      max-width: 47em;
   }

   article {
      width: 94%;
      margin-left: 6%;
   }

   h1, h1 + p {
      margin: 1em 0 1em -6%;
   }

}

page.tmpl:

<TMPL_IF HTML5>
<meta name="viewport" content="width=device-width, initial-scale=1">
</TMPL_IF>
<link rel="stylesheet" href="<TMPL_VAR BASEURL>css/normalize.css" type="text/css" />

Since the first test involved Milligram, I included normalize.css too. I left it in after moving to Vasilis’ design, hoping “it helps” somehow.