- Aug 18, 2022
I am still designing and setting up the site and adding and editing content to test it. I added the “Introduction to Color and Colorimetry” blog with a historical overview of color research. If you are new to the science of color, I suggest you read this first, as it gives a good background. It is probably too challenging to grasp in the first reading, so don’t feel frustrated when you don’t get it right away, and please revisit it at a later stage when you spend more time on this site.
Site Nuts and Bolts
I thought of building the site using raw HTML and CSS, which I know well. But keeping a consistent design this way is complex, requiring you to repeat lots of HTML code over many different files.
Static site generators avoid this problem. I have used Hugo in the past. It uses themes to define general layouts for the different types of pages on a site. I am picky and didn’t like any of them (although some came close). I tried to change and existing theme, but it was far too complicated.
As I am using the Rust programming language for most of my programming projects now, and like how fast and reliable Rust programs generally are, I started looking at static site engines built in Rust. And I discovered Zola. It had a bit of a learning curve, as I hadn’t worked with SCSS style descriptions and template engines, but I got through that in a day or two.
The theme used I built myself —from the ground up— to learn Zola’s theme system and to keep it brief and straightforward.
Netlify hosts this site. It provides hosting and serverless backend services for web applications and static websites.
Having dealt with servers, containers, and never-ending security and system updates myself in the past, I like how Netlify’s services take care of all this: I can entirely focus on content now.
The whole site gets published from a GitHub repository: whenever I push an update to GitHub, its content gets processed and posted automatically. Assembly in the user’s browser to create interactive features. Static content allows Netlify to serve the site worldwide efficiently and quickly.
Users can use mobile devices to read and use the site’s features. With a static website, with only client-side dynamic content, this requirement is met from the technical point of view, but from an ergonomic perspective, this requires a lot of careful graphic design work.
So instead of a menu bar with drop-down menus, you’ll see many relatively large icon buttons to help navigate you through the content. And the site is responsive, with the text and graphical layout adjusting to the size and orientation of the screen.
Another thing I like is a section that appears as a single column on a small mobile device but which turns into a multi-column layout when viewed on a bigger screen, to maintain readability without needing unnecessary huge fonts.
Enabling dark mode can reduce eye strain, especially with mobile use, when viewed under low light conditions in the evening and early morning. It also benefits battery life, at least with devices that use OLED displays.
A light mode, a screen with an average luminance not too different from the display’s surrounding conditions, is preferred in brighter light conditions.
So another demand on the design is to have a dark and light mode. This demand is tricky, especially for the graphical elements: these either need to have neutral tints to work well with dark and light backgrounds, or they need to be color adjusted when switching from one mode to another.
Whenever possible, I made the graphics and icons in SVG format, as the colors in those can be configured using CSS. Most icons here are made like this, encoded as symbols in an SVG container file, with the icon filled in black on a light background and white on a dark background.
I am trying to support the major browsers, Chrome, Safari, Firefox, and Edge, but trying to render the site’s content consistently on all these platforms is a bit of a challenge.
For example, I like the use of multi-columns for responsive sites, but Safari does not break the columns correctly all
I still have chosen the multi-column layout for readability, and I hope Safari will fix these issues!
I also am using CSS
Flexbox containers extensively, which are not supported in older browsers but are almost a necessity
to use in a responsive design.
Pages using complex calculations can also benefit greatly from using Web assembly, which was not supported in browsers released before 2018.
I’ll keep adding known bugs here so that you are aware, and kindly request that you upgrade to the most recent version browsers version to keep these layout nuisances to a minimum and apologize for having to install another browser, if your favorite browser platform is not fully supported.