Website redesign

March 28, 2023

I finally got around to redesigning my website from the ground up.

Updated August 1, 2023: I have updated my website since this post. Some details may be out of date.

I designed my previous website using the drag-and-drop online editor Weebly, with customized CSS.¹ After experimenting with different drag-and-drop tools (attracted to their ease of use), I settled on Jekyll instead. My goal with the redesign is minimalism and user-friendliness. Since Jekyll provides me greater control than Weebly, it serves this goal well.

Jekyll is not a drag-and-drop tool, but it supports Liquid, a template language by Shopify. Jekyll and Liquid allow me to build websites without “repeating myself” too much. Otherwise, managing a website with more than a dozen pages would be very tedious. Right now, of course, this website is quite small as of the time of this post. However, I have provided a good base for the future, and I will build upon what I have developed here.

My website redesign should be responsive on your device, but you’re welcome to send me any complaints or suggestions. Unlike my website’s previous version, my redesign does not support comments, so you’ll have to use the external form provided to contact me. Alternatively, you could contact me on one of my profiles or post on the subreddit.

Colour scheme and technicalities

I exclusively use a dark theme for my website and prefer it if possible for all my branding. For choosing the right colour scheme, I utilized Google’s Material Design 3, their Material Theme Builder on Figma in particular.

As of the time of this post, I only use Neutral-Variant colours. If you select the colour scheme table’s text (click and drag), you may notice that all colours except for Neutral-Variant50 have a highlighted background. That is because the highlighted background (appears as ::selection in HTML)² is the same colour as Neutral-Variant50. Highlighted (i.e. selected) text itself appears as Neutral-Variant90.

You may also notice that the website hyphenates text for a cleaner appearance. This feature uses the hyphens property in CSS. However, sometimes it’s necessary to avoid hyphenating terms using this feature, such as to improve text comprehension. Unfortunately, CSS does not support automatically treating manually inserted hyphens (e.g. in the technical term “Neutral-Variant50”) as non-breaking. I have to manually wrap hyphenated terms that I don’t want to be auto-hyphenated in an HTML span³ using the white-space property, with a nowrap value.

Users on W3C’s CSS Working Group Editor Drafts GitHub repository brought up this issue and workarounds in late 2018. We will not likely see official support for a fix in the foreseeable future. I considered creating a Jekyll plugin, but I am unfamiliar with Ruby (the programming language Jekyll plugins use). Building a plugin is much more complicated than using HTML spans.

Larger screen sizes and accessibility

I don’t use a large screen in development, so it is possible that my website may not appear right on larger dimensions, especially since I limit the content area to 700 pixels in width. Please let me know if you use a large screen and find this is the case.

Another concern is accessibility, particularly for users with poor eyesight and non-English readers. I cannot do much about the latter since English is the only language I can write fluently. In any case, I will consider accessibility on a user-demand and case-by-case basis.

Finishing thoughts

The source code (“software”) for my website, as listed in licensing, is available for others to use under the MIT License. I plan to release my website development files later on GitHub as a reference for others. They can potentially use that to generate a similar-looking website with Jekyll.