Screaming Stone Redesign
Monday, 22nd of February, 2021
I recently rejigged the design of my website, partly to make it faster and partly because I felt like showing off.
As an example of making it faster the home page now includes all of the images (apart from the background) directly in the HTML as SVGs (scalable vector graphics) which are both smaller and sharper than GIFs or PNGs (and definitely sharper than JPEGs) and because they are included in the code of the page it means there aren’t any extra HTTP requests so they load instantly.
By using SVGs directly in the HTML it enabled me to target them with CSS which means I can style them or add effects to them and if I ever redesign the site I can update them by changing the CSS which applies to them. I sourced most of them from around the web and I had to fix every single one because it seems people simply do not know how to make them correctly.
The only 2 not sourced from the web are these which I made myself, based upon the PNG versions I found online:
| Original PNG | My SVG | Original PNG | My SVG |
 |
 |
||
| 8 Kb | 5 Kb | 181 Kb | 7 Kb |
My versions are not identical to the originals but they are close enough that you would be able to tell them apart unless they were beside the originals, as they are above. They have the added advantage that they can be styled with CSS.
One major change I have made is to the background image of the site - the previous image was far too big and the parallax effect, while it looked really cool on computers with a half decent video card, looked really crappy on those without one. So, for example, on the computer on which I initially created the website it scrolled smoothely and beautifully but on every other computer I have used since it stuttered and jiggered like crazy. Very bad if you suffer from motion sickness of any kind.
The background image is now square and “covers” the available space, so it fits whether the screen is landscape format or portrait format. I also included the equivalent of a “low-src” image so that there is something visible really quickly while the full background image loads. The “low-src” attribute is deprecated but I used a feature of CSS 3 to replicate that by loading a tiny, blurred version of the full image which is one of the 2 background images used on the body of the page and will appear beneath the full background image and because background “cover” is being used it means it will be shown at the same size as the full image. Because it is really small it will load and display quickly and be replaced by the full image which will be displayed on top of it. Another new feature is the randomly changing background which should add a bit of variety to the website.
I removed a lot of unnecessary CSS rules, including the negative margins trick for centrally aligning items. I replaced the negative margins trick with flexbox rules. This also enabled me to implement a variation of the “holy-grail” layout, which is most evident on the contact page.
I changed the font used for the main text with something which is easier to read.
Another change I made is to break up the CSS file so that it is modular - instead of loading one huge and unwieldy CSS file which would contain a very large number of unused rules, each page now contains only a very small number of CSS rules which are specific to each page and no more than that page requires, and as with the SVG images, the CSS is included in the source code of each page, so there are fewer HTTP requests. The source CSS rules are divided between one set which contains commonly used rules which are used on every page of the site and, for each page, another set which contains the extra rules needed to make that page display correctly, and these are added into the source of each page at build time using PHP.
To further decrease the load and render time I have reconfigured the structure to incorporate the Javascript within the code of the page, just as I did with many of the images when I used SVGs instead of JPEGs, PNGs or GIFs. For example - the previous version of the home page used to make 15 HTTP requests - the new version makes only 6 HTTP requests even though the new version includes 4 extra images.