Old stuff

I used to have a bunch of old web pages about the problems I had making a simple web-page layout with three-columns between a header and footer. What I noted all those years ago is no longer really relevant.

2015 - mobile friendly

In 2015 Google announced that they were changing their indexing algorithm to give weighting to how mobile friendly a web-page is.

I decided to rework my web-sites as follows

Have all the content maintained as plain text!
Use MultiMarkDown to convert text to html snippets (not to complete web pages).
Use my own scripts (PHP or Perl to add a common HTML5 header and footer
Include a <viewport> element to keep Google happy.
Update my CSS to use flexible layouts that flow (“fluid design”)
Use CSS media selectors to make responsive web pages that work on phones, tablets and desktop browsers.

This approach lets me generate quickly-servable fast-loading static-HTML from easily-edited plain-text files!

Example

My text file for a web page like this might look as follows

title: All about web pages

What is this HTML 5 anyway?
===========================

HTML 5 is what HTML should have been.
The DOCTYPE, `html` element, 
language declaration and encoding 
declaration are much much simpler 
than for (say) XHTML Transitional

![Feline photo](images/cat.jpg "Tiddles")

Responsive Design
=================

Here's a table of the advantages

 Feature         | Benefit              
-----------------|----------------------
 One CSS file.   | Phones, tablets, PCs.
 Fluid layout.   | Adjusts to fit.      

The end.

The above is essentially Fletcher Penney’s MultiMarkdown extensions of John Gruber’s MarkDown

The plain text markup can be translated to HTML using the MultiMarkdown program, the ParseDown PHP library, the Perl Text::MultiMarkdown module or many other programs/libraries.

I have a make script to automate this process. For some sites I use a proper Makefile with GNU make but for other sites I might use a bash script or BAT file running a perl program. So typing (or clicking on) make creates lots of HTML files from my text files

I have a common template for the site that looks like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
          initial-scale=1" />
    <title>_TITLE_ - RedGrittyBrick</title>
    <link rel="stylesheet" 
          media="screen,print" 
          href="rgb.css" />
    _CSS._
  </head>
  <body>
    <div id="page">
      <div id="heading">
        <h1>RedGrittyBrick</h1> 
        <div id="navigation">
          _MENU._
        </div>
        <h2>_TITLE._</h2>
      </div>
      <div id="main">
        _CONTENT._
      </div>
      <div id="footer">
        <p>Copyright &copy; RGB _YEAR._</p>
      </div>
    </div>
  </body>
</html>

My make replaces all the _PLACEHOLDERS_ with appropriate content

My main navigation is created from a text file that looks like this

linktext: path/file.html
otherlink: path/other.html

My make constructs the navigation HTML from this and takes care of highlighting / disabling the link for the current page.

RedGrittyBrick

Designing web pages

Old stuff

2015 - mobile friendly

Example