What is the Climate Dictionary?
The Climate Dictionary is a simple and easy-to-use online resource that I designed in 2025 to create a much lower digital carbon footprint than other online dictionary’s, whilst providing an accessible source of information.
Static HTML, CSS, and JS
The Climate Dictionary was designed and built to be as simple as it could be. To be considerably lighter than any other climate dictionary source that existed elsewhere. So, I knew I didn’t want to use any toolkit, class system like Tailwind, or third-party scripts for functionality.
The CSS includes a very small number of reset styles but generally allows the browser to do its thing for default styling. SASS is used as a preprocessor, which is then compiled and minified with the Prepros app. So the front end only receives one minified CSS file. Manually adding a version number to the link allows me to bust the cache if needed. No node scripts required.
The site doesn’t contain a lot of HTML elements on initial page load, only what is necessary for above the fold content and the introduction. The rest is dynamically loaded from JSON.
Utilising the power of JSON
Instead of hooking the website up to a traditional server-side database with a tool such as WordPress, I was inspired by another project by a friend who was using JSON to manage a collection of data. Highly compressible and easily queried with JavaScript, it felt like a great solution to manage the data within the dictionary. It is really easy for me to update as well while being safely version controlled in a Git repository.
Subset fonts, one weight
The website uses a subset of the free version of the Safiro font by atipo foundry. With the custom subsetting, the font weighs only 9.5KB. A pleasant reduction from the 15KB base file (which is already quite lightweight). The website only uses one weight of the font, but plays with sizing for controlling hierarchy.
Light and dark mode
Using native CSS variables, so switching modes to comply with user preferences becomes a breeze. I love this technique. It is so simple. As you’re only changing a couple of set CSS variables to change the style of the whole website (or whatever aspects of the site you choose). The site includes a quick toggle for visitors too so that they can change the mode separately to their device preferences if required.
A few useful features
While the site is simple, it was important that it included a couple of useful features. Features such as click to copy an anchor link to the chosen term. Making it much easier to share with others. Other features like the quick links to different alphabetical starting points make the website quicker to navigate. Finally, the website includes some breakdowns for the words or phrases, as well as longer descriptions of the meaning and usage.
Want to learn more about my work? Follow me on LinkedIn or check out my portfolio for more low-carbon website examples.