Hehehehe ... sorry, starting this article with a hearty laugh. I'm not the only one making the switch away from bloated Bulma. Have a look at the Bulma "Expo" page on their website. They feature SaaSHub as a user? SaaSHub uses Bootstrap. Check it out, then make the switch yourself – find a slimmer framework that will not slow down your website display times and cost you negatively on SEO.
UI, short for User Interface, is the – THE – major consideration is designing websites. UI goes far beyond selecting the right fonts, placing page elements in the right spot, making sure white space is properly used and in the right places. UI also covers light. UI also covers readability, UI also covers contrast. UI also covers accessibility.
In the early days of the internet, I worked for a company that produced compression tools for individual websites and browsers. The product was widely used. Marketing features imagery of trying to get an elephant through a straw. That's the imagery I get when I think of Bulma these days. A whopping 713Kb elephant going through a straw.
The product we created was designed to super compress data to get it smoothly down that straw. Sort of like what gzip does – all in the background, seamless, unobtrusive. Those were the days when accessibility was a major consideration for anyone designing internet tools. Although the company wasn't involved in light, it was one of the considerations in compression tools (as it applies to images and photos in the data stream) ... you see, any compression has to consider lossy vs lossless. Compression tends to be lossy, meaning there is some loss involved. No loss in character sets, but loss in graphics. Think of it in terms of a camera ... my camera captures images at around 45 megapixel. That means 45,000,000 pixels measured in a rectangular shape equivalent to a 3:2 ratio. That would mean the image resolution is 8216 wide x 5477 high ... equivalent to 44,999,032 pixels in total. If that were a straight one pixels = 1 byte ... but we can't forget that each pixels also has to define color and other information (like luminosity). As an example, an uncompressed TIFF file for that image would be approximately 359.99 Mb per photo ... you could store roughly 88 photos on a 32GB card. Most professional photographers will shoot around 1200 images at a wedding shoot, so they would need at least 14 cards to store that raw uncompressed data. Camera manufacturers use a compression algorithm so get these image sizes under control. For example, Nikon has a NEF 14 bit compressed format that squeezes that same photo to approximately 38 Mb ... a bit more than 1/10 of the uncompressed size - meaning they can get all 1200 of those images on a bit more than 1 32Gb card (1.4 cards to be exact). (that's about the same compression ratio as gzip, by the way)
For websites, compression has a huge impact. It can make the difference between a 1 second load time and a 10 second load time. WIthout compresson, a 10 second load time means that the user trying to view the website would have left long ago. According to statistics, users start abandoning a website at the 2 second mark. By 6 seconds most are gone. At 10 seconds you only have die-hard users left – your opportunity for conversion is gone.
So far we have only looked at compression in terms of UI ... next, we'll look at color selections. To be more precise, contrast in color selections.
The colors you choose for your website are yours to make entirely. No argument there, your brand is likely the defining factor in color selections. Those color selections, though, have to adhere to some usability factors ... meaning contrast. You need to avoid extremes in contrast. The highest contrast I can think of is a black background (#000000) with pure white text (#FFFFFF). WebAIM would define that as a 21:0 contrast ratio. One other example would be a black background (#000000) with pure yellow text (#FFFF00) ... that's a contrast ratio of 19.55:1. My take on it is that anything over 15:1 is too "harsh".
Flip this around to a white background (#FFFFFF) as most websites are. Here's a list of the contrast ratios at various text colors, all with white background:
- text at black (#000000), contrast ratio: 21:1
- text at dark gray (#333333), contrast ratio: 12.63:1
- text at mid gray (#666666), contrast ratio: 5.74:1
- text at gray (#999999), contrast ratio: 2.84 (and fails at WebAIM's Accessibility Test)
You can see the drop off in accessibility is quick, even with a moderate drop in contrast. For regular text sizes, you fail in accessibility standards when the contrast ratio is 4.5:1 or lower. Our mid-gray test above is close to failing.
My ideal contrast ratio is somewhere between 7:1 and 15:1. To emphasize this, also consider the type of light. There are essentially two types (well, three if you get picky about it).
Push technology is where you have the old CRT type monitors that generate light and transmit it (or "push") it to the eye. Flat monitors (LED, LCD/Plasma, etc) generate light within its element and display within a narrow range, your eye has to go get it (or "pull") it to the eye. The third type, a bit of a smile for you, is not related to monitors at all ... it is an object like a newspaper where light is reflected to the object (newspaper) and is both a push and pull for the eye (argumentative to say the least).
As we get older, we need higher contrast to read. Still not above my 15:1 treshold to read comfortably. By the way, I mean comfortably in that you can read for a while without eye strain. I was setting up a new laptop for a young family member yesterday and that teenager had to put down the laptop after only 15 minutes of viewing: due to eyestrain. I had the laptop set to maximum brightness and he was viewing pages at high contrast ratio (over 15:1). It's not just an age thing.
Which, of course, leads me to imlementing a Dark / Light mode in cssBlade (my CSS Framework). There already exists one method: "prefers-color-scheme" ... you can use a media query to change any settings based on the "prefers-color-scheme" setting. Unfortunately, chromium-based browsers have extremely limited support for this setting. That leaves out Chrome, Microsoft Edge, et al.
I prefer a toggle switch where the user can choose dark or light mode. In my case, I wanted the ability to remember the choice so on repeat visits the user automatically gets dark or light mode based on the initial visit. I use javascript to handle that. I created an infobar that sits above the horizontal navigation ... actually that could be implemented in the footer, in the horizontal navigation, in a vertical side navigation bar, anywhere. The javascript does not set a cookie, but accesses an accessibility setting and enables (or disables) that for the website in use. The javascript then checks on each page load and sets a class in the html code (ie. "html data-theme="dark", or "html data-theme="light"). The CSS file then has variables, defaulting to light, and a grouping under "html[data-theme='dark'] { }" .... no need for media queries.