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!
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.
I have a
make script to automate this process. For some sites I use a proper Makefile with GNU
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
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 © RGB _YEAR._</p> </div> </div> </body> </html>
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
make constructs the navigation HTML from this and
takes care of highlighting / disabling the link for the