This is a brief summary of the process behind the (new) web pages on this site. There are many different ways to put together web pages and there also has been a lot of evolution within web page design and construction. In fact this web site has undergone many revisions since it first appeared on the Internet in 2001. I am not going to go back and re-write all of the older web pages on this site so you will see a mix of different structures for the older web pages. Here we discuss the details and reasoning behind the current generation. These ideas can be translated to other web sites, modified, expanded upon, etc. if desired.
This test web page serves as a test page for measurements, compliance checks, and visual checks. It is built with the same code as all of the new web pages on this website.
Here are the technologies used for this website:
We want our web pages to load as fast as possible for the reader. A bloated and slow-moving web page that takes a long time to load will discourage visitors and they will bail out for other places in the giant world of the internet. So it's a good idea to check the page loading speed and make sure it is good. A nice tool for this is the GTmetrix Speed Test. Here is how it looks for this web page.
A key number here is the "Fully Loaded Time" which is 0.7 seconds. The entire web page loads in under one second which is plenty fast. GTmetrix provides an entire list of grades for all aspects of the web page and its hosting server, and also provides details on how to improve the different parts, and therefore the overall loading time. This test page has almost 100% grades for all items, but there are a few things that could be changed that would speed it up even more. For example, the 3 style sheets could be combined into one, and those style sheets could be "minified" by removing unnecessary text and comments (they even provide the minified code for you if you want it). But these steps can make it a bit more difficult to manage the style sheets, so given that the entire web page which includes pictures loads in under one second, it is fast enough.
Here is another speed test run on the Google "mobile speed test". This confirms that your page loads quickly over cell phone signals (such as 3G) as well. The load time of 3 seconds falls into the Excellent area of the scale, confirming we have a nice, compact, and fast-loading web page.
Google also has a "Mobile-Friendly" test which you can use to test your responsive design. The responsive design is taken care of by the CSS in the Skeleton boilerplate and if everything is optimal then there will be a good result on this test, such as for our test page shown below. There are a number of other sites that offer testing for responsive design and mobile devices, but a better way is to load your web page on your smartphone and on a table such as an iPad and see if everything behaves properly and looks as it should.
The Google web.dev page provides a SEO check along with other factors such as speed and accessibility. As shown here this page scores 100 for SEO structure. Google's webmaster web pages provide plenty of information about how to optimize for good SEO. The basic ideas are to make logically organized web pages and to post your own unique and useful information.
The Webaim accessibility evaluation tool can be used to test a page for accessibility issues. As shown here this page has zero errors for the various accessibility parameters. The Webaim site and other resources provide information on how to meet accessibility requirements for web pages. The basic ideas are to make logically organized web pages and to properly label images with alt text tags. Note that these concepts are completely compatible with creating a tightly-coded design that is SEO optimized and responsive in design.