A couple of days ago I posted the first update to my weblog in a year and some change. The reason is that I was mostly busy with work and projects. I actually wrote several drafts for this website, but nothing ended up being published. Things kept changing, and I also wasn’t feeling the website anymore. The scripts I wrote to update the website years ago were stretching their usefulness, and I felt like I needed to write a set of tools for updating the thing before I actually published anything. Client work also pushed things back, but after a long time of saying I’ll do it and not I finally just did.
Back to Basics
- The only two colors which may be used on most things are the page’s color and a text color.
- A tertiary color can be used for accents but only very sparingly.
- No shades or tints can be used for any of the colors.
These limitations forced me to use typography to create “color”. I could, for instance, use a lighter weight to make text darker or lighter in appearance without modifying its color. This is how typography should be used anyway. This led me to deciding to not use my font, Ook, anymore. Ook only comes in regular, bold, and italic variants. While it contains a lot of special characters it doesn’t come in a lot of variants. Since my restrictions demanded a font with a lot of weights I must retire it. When I first started creating it almost a decade ago there were no free fonts that had advanced typography features with ligatures, small caps, old-style, proportional, and lining numerals, subscripts and superscripts, etc. Nobody but typography nerds even considered it important nor possible, but many web browsers supported them. I had to create my own if I wanted them, so I did. The font was experimental, and it wasn’t well-designed. I even said so when writing about it initially. It was my first attempt ever at a font, and I even changed it a lot while designing it. Today there are a lot of fonts that do support advanced typographic features, including the one I chose for the body copy of this website — Noto Sans.
Noto Sans was designed at Adobe and commissioned by Google to support most languages. Its eventual goal is to support them all, and that is where its name comes from. Sometimes when there is no font installed on a system to support a particular character a replacement symbol is drawn there instead which is called tofu. Noto is short for no tofu. I have been a fan of the font since first seeing it shortly after I finished my own, and since it has matured over the years a lot of errors in the font and missing features have been added. I am sad I won’t be using a font of my own creation anymore, but it’s past time to retire it. The best part about Noto is that it is truly open source, being licensed under the SIL Open Font License.
Most websites by designers for themselves these days tend to be pretentious, ostentatiously showing off things at the expense of user experience. Just visit almost any website featured on Awwwards where the name of the game is bombard the viewer with flashy interactive special effects instead of providing them with information in a easy-to-understand manner. Forget making anything on the page accessible to those with disabilities. I won’t win any awards with my design here of course. When I write a blog post about my newest work I want the work to be what the eye is drawn to, not the website’s user interface. If that means this website is “boring” then so be it.
Under the Hood
This website makes liberal use of CSS grid layout. My last redesign used it, but only sparingly and with extensive fallbacks because most browsers that supported it then were quite buggy with it, especially Firefox. I don’t have any sort of fallback for grid on this. Without support for CSS grid the website would simply fall back to traditional flow content which is quite acceptable in my opinion. It keeps the CSS itself cleaner and easier to manage, too. I have also tried to make my website friendly to printers with print styles and also with people who prefer dark themes. This website (and its favicon in supporting browsers) will change when dark mode is turned on.
module type is. Web components are incredibly flexible. With that one module I can put many RGB cubes on this page (and possibly crash your browser in the process because of all that WebGL). All I need to do to make one appear after including the module is drop a
I expect to keep this design for a while. There are some fixes I want to make to things I’ve noticed since going live with it. I also would like to write more, especially about what I’ve been up to lately. I know I’ve promised it before and didn’t deliver. I apologize for that. I’ll definitely try especially since I’ve made it ridiculously easy for me to do so.