web design

2 Articles

A black and white image of the Sun and Earth with a series of lines radiating out from the sun and bisecting rings circumscribed around it. On the Earth are three dots with the text "Active Server" on one exposed to the Sun and two dots representing "Inactive Server"s on the dark side.

Solar Protocol Envisions A Solar-Powered Web

April 21, 2023 by 34 Comments

The transition to low carbon energy is an important part of mitigating climate change, and the faster we can manage, the better. One project looking at how we could reduce the energy requirements of the web to more quickly adopt renewable energy is Solar Protocol.

Instead of routing requests to the fastest server when a user pulls up a website, Solar Protocol routes the request to the server currently generating the greatest amount of solar power. Once a user is on a website, the experience is energy-responsive. Website style and image resolution can range based on the power left in the active server’s batteries, including an image free low power mode.

Another benefit to the project’s energy efficiency approach is a focus on only the essential parts of a page and not any of the tracking or other privacy-endangering superfluous features present on many other websites. They go into much more depth in the Solar Protocol Manifesto. As a community project, Solar Protocol is still looking for more stewards since the network can go down if an insufficient number of servers are generating electricity.

For more details on the project that inspired Solar Protocol, check out this low-tech website.

Building A Low-Tech Website For Energy Efficiency

January 10, 2020 by 38 Comments

In an age of flashy jQuery scripts and bulky JavaScript front-end frameworks, loading a “lite” website is like a breath of fresh air. When most of us think of lightweight sites, though, our mind goes to old-style pure HTML and CSS sites or the intentionally barebones websites of developers and academics. Low-tech Magazine, an intentionally low-tech and solar-powered website, manages to incorporate both modern web aesthetics and low-tech efficiency in one go.

Rather than hosting the site on data centers – even those running on renewable power sources – they have a self-hosted site that is run on solar power, causing the site to occasionally go off-line. Their model contrasts with the cloud computing model, which allows more energy efficiency at the user-side while increasing energy expense at data centers. Each page on the blog declares the page size, with an average page weight of 0.77 MB, less than half of the average page size of the top 500,000 most popular blogs in June 2018.

Some of the major choices that have limited the size of the website include building a static site as opposed to a dynamic site, “dithering” images, sparing a logo, staying with default typefaces, and eliminating all third-party tracking, advertising services, and cookies. Their GitHub repository details the front-end decisions  including using unicode characters for the site’s logo rather than embedding an SVG. While the latter may be scalable and lightweight in format it requires distribution to the end-user, which can involve a zipped package with eps, ai, png, and jpeg files in order to ensure the user is able to load the image.

As for the image dithering, the technique allows the website to maintain its characteristic appearance while still minimizing image quality and size. Luckily for Low-tech Magazine, the theme of the magazine allows for black and white images, suitable for dithering. Image sprites are also helpful for minimizing server requests by combining multiple small images into one. Storage-wise, the combined image will take up less memory and only load once.

There are also a few extraneous features that emphasize the website’s infrastructure. The background color indicates the capacity of the solar-charged battery for the website’s server, while other stats about the server’s location (time, sky conditions, forecast) also help with making the website availability in the near future more visible. Who knows, with the greater conscience on environmental impact, this may be a new trend in web design.