Making sites mobile friendly (according to Google)

Add viewport control

   <meta name="viewport" content="width=device-width, initial-scale=1"/>

Use stylesheets to control style for different different media widths:

    <link rel="stylesheet" media="(min-width: 480px" href="/styles/gen_styles.css"/>
    <link rel="stylesheet" media="(max-width: 480px" href="/styles/mobile_styles.css"/>

Use relative widths, not absolute.

Problems: long strings in pre tags will force browser to break width maximum. Sites with multi-column displays of text need more sophisticated management - got to make the text blocks flow using the browser capabilities, rather than the fixed table columns in use at present.

      #column {
            float: left; 
            width: 20%;
            min-width: 150px;
            box-sizing: border-box;
            padding-right: 10px;
          }
      #footer {
            clear: both;
          }