Page Format


Overview:

Every page should follow the same format and outline. First, there should be an Overview explaining the page.

The Title should be Normal Text, Arial, Bold, 14 point font

All other text should be Arial 10 font with style (regular, bold, italic, etc.) being optional


All text should use only link or indent (no bullets, text boxes, etc)


Parts, Steps, Appendices and Troubleshooting should be bold. 


Parts:

There should be a parts list with description, link to a place to buy and price


Step 1. Backup microSD Card image

Each step should be well-documented and may refer to another page using a link. If a Step has a link, then a description is optional.


Step 2. Update sources, packages and the OS

Each step should be automated. If not automated, it should be terse, but complete


Responsive Design:

Google Sites does not support responsive design vey well, which means scaling up to a laptop screen and down to mobile device width ruins the page.

Steegle explains how to get the most responsive design when using Google Sites.

Summary of what I've learned about creating a responsive design on Google Sites:

Use only the header box for the whole page to eliminate the excessive white space

Always use preview icon and resize to mobile width to see how it will look on a mobile phone

Reduce image size to a maximum of 1MB

The maximum page size should be 5MB

Use a custom Theme to adjust colors, fonts and spacing for the entire site

Side-by-side boxes (images or text) do not scale very well

New google sites doesn't support .svg images directly. HTML code can be embedded for svg. Free converters from png to svg reduce image quality to the point of not being usable.


Navigation

The side menu navigation should include links to all the pages. Pages should be grouped by category


Footer

The footer is the same on all pages and should contain commonly referenced links. 

The footer also contains a link to a forum. I tried using Google Sites forum via Google Groups, but this was painful. By painful, I mean, there is no threading, the display of comments is poor, and the notifications are easy to miss. So, I created a facebook page and added a link. (Need to add Facebook page back)


References

As much as possible, references should be in the format:

Some examples: