Blog

Overhauling My Site Structure and Design

Permlink | Comments
By: Anton McClure;
Published:
Last Updated:
Tags: General; Tildeverse;

I rewrote my entire web page and made custom CSS for it. Here's how and why I did so.

The root directory of antonmcclure.com on May 21, 2020.
The root directory of antonmcclure.com on May 21, 2020.

This post has been superceeded with Project Luna.

Up until recently (as in days before this article), my site used Twitter's Bootstrap. In a matter of days, the +1MB of data required for CSS and Javascript was replaced with a single CSS file requiring only 841 B of data.

That was not a typo. The site's CSS was only 841 bytes. It didn't necessarily look the best in my opinion, but some tech communities claimed to like it.

This site now uses bash, sed, and awk to generate page content as static HTML files, and properly deploy content, rather than using PHP to essentially regenerate everything with each page load.

New Structure: I checked a since-removed archive of my site's home page with its old style, and the current page, with the W3 HTML Validator. The site's old heading-level outline would've looked like

  • H1 - Home Page
    • H2 - About me
    • H2 - About this site
    • H2 - About this server
    • H2 - What's new
      • H3 (none)
      • H4 - Links
      • H4 - Resources
      • H4 - Social

The "Links", "Resources", and "Social" sections in the footer used a somewhat hacky method for writing the sections by using an H4 tag. As a result, it's old structural outline looks like

  • [Body element with no heading]
    • [Nav Element with no heading]
  • Home Page
    • About me
    • About this site
    • About this server
    • What's new
    • Links
    • Resources
    • Social
    • [Section element with no heading]

Compared to the new site's heading-level outline

  • H1 - Home Page
    • H2 - About me
    • H2 - About this site
    • H2 - About this server
    • H2 - What's New

and its new structural outline

  • [Body element with no heading]
    • [Nav element with no heading]
    • Home Page
      • About me
      • About this site
      • About this server
      • What's new

CSS: When designing the CSS for my new site, I avoided using Javascript for any features, using vanilla CSS3 functionality instead. As a result, the site styles was less than 1kb and still loaded okay on phones.


About the Author

Recent Posts

Image from piqsels. Licensed under public domain.
How Software as a Service (SaaS) Can Improve Your Business

By: Anton McClure;
Published: July 1, 2020
Tags: Technology; SaaS; Business;
You want your business to be successful, and modern cloud technologies such as SaaS can help make that success happen.

Title card - Image features an SSH connection Lily Winter's
How to Get Started with Tildes

By: Anton McClure;
Published: June 30, 2020
Tags: Technologies; Tildes; Open Computing;
Many public-access servers called "tildes", many of which are actively accepting new users. Here's how you can join and start making the most of your new tilde account.

Image by Pete Linforth (TheDigitalArtist). Image licensed under the Pixabay License.
Microsoft Gives Linux and Android a Significant Security Upgrade

By: Anton McClure;
Published: June 24, 2020
Tags: Android; Linux; Microsoft; Security;
Microsoft has released their Defender ATP platform for Linux and Android devices. Here are some of the benefits it brings, and how you can deploy it.

Image from pxfuel. Free for commercial use.
Making the Internet and its Content Accessible for More People

By: Anton McClure;
Published: June 14, 2020
Tags: General; Internet;
Mobile devices are bringing the Internet to more people than ever before. Here's ways we can improve their online experience.

Screenshot from me deleting a WordPress site from my VPS.
(Why) I Won't Use WordPress, and Why You Shouldn't Either

By: Anton McClure;
Published: June 5, 2020
Tags: Technology; Alternatives; Security; Internet;
WordPress is popular, but there are better programs out there.

Image by OpenClipart-Vectors. Image licensed under the Creative Commons Zero (CC0) license.
Zoom Free Users Will Not Have End-to-End Encryption

By: Anton McClure;
Published: June 4, 2020
Tags: Technology; Encryption; Alternatives;
Zoom CEO has stated free users will not get end-to-end encryption. Here are some good alternatives to Zoom you could use instead.