The internet has a massive carbon footprint - it produces approximately 3.8% of global carbon emissions, and this is expected to double by 2025. This is a staggering amount - especially as it can be hard to imagine that our online activity can even contribute to climate change, right? The internet actually uses a huge amount of energy - devices must be powered and cooled, and electricity is drawn from local grids. Every time we use a search engine, there’s an emission of Greenhouse gases, as every unique search requires multiple servers to retrieve a result for the end user. The more emails we send and receive, videos and music we stream - the more servers and devices are needed to facilitate our ever-increasing data consumption.
In the face of climate change, it’s understandable to feel helpless - but by looking at the ins and outs of our daily lives, there are ways we can decrease the size of our carbon footprint. We’ve worked with clients to determine where they can make more eco-friendly design choices, and discovered several simple methods that we often recommend.
So what does sustainable web design actually entail?
OLED screens are becoming an increasingly favourable choice for consumers, for their high contrast ratio and excellent picture quality. Each pixel on an OLED screen is lit up individually, and different coloured pixels require different energy levels. Darker colours require less energy to illuminate, with black being the lowest energy colour and white being the most energy intensive. Blue pixels use around 25% more energy than green and red pixels.
Google found that Google Maps on mobile can use up to 63% less screen energy in night mode compared to standard mode on phones with OLED screens. The Norman Nielson group found that web users with cataract and related disorders may find text in dark mode easier to read. They also found that long-term reading in light mode may be associated with a higher risk of myopia. Designing in dark mode definitely has its benefits - it’s worth considering for your next project. Embracing darker colours creates an interesting design challenge, and can encourage more experimental and exciting design ideas.
Another nifty sustainable design practice is to set a page weight budget. This is a limit of how much a web page can weigh, in kilobytes and megabytes of files. Lighter pages require less energy from servers to host and improve the user's experience by culling any unnecessary content or steps in the user’s journey. This can be set at the beginning of a project and used as a measure of success, with the goal being to deliver each key page of the website in less than the budget. It can act as a useful benchmark for all members of the team and help you deliver a more efficient website.
The imagery you pick can vastly contribute to your website's energy usage - the detail and colour of an image can contribute to its size. You can address this challenge by picking simpler imagery, photos with a shallower depth of field and reduced colour palettes. You can also reduce the file size of your images by compressing them in Photoshop. Smaller image file sizes use less bandwidth and require less storage space on your server. This will improve your page loading speed, which is valuable as users may get tired of waiting and move on to another website. You may also want to consider the type of image file format you use; WebP format was developed by Google to provide lossless and lossy compression for images on the web. WebP lossy images are 25-34% smaller in size than JPEG images, and WebP lossless images are 26% smaller compared to PNGs.
Videos are often the largest use of energy on a website. It’s possible to reduce the size of a video file by compressing it, Adobe Media Encoder enables you to use lossless compression to make your file smaller while preserving the image quality. Animations on your website also use up more energy as they’re typically larger files. We advise using them sparingly and ensuring they're genuinely adding value to your website. Movements in animations can distract users' eyes, and divert them from their initial intention for visiting your website.
The number of fonts used can contribute to the size of a web page - a typical custom font file can be over 200kb, and some may only include a single weight! Embedded fonts are usually implemented with a JS or CSS snippet in your website’s code, which makes requests to the third party hosting the font file. Several requests are made, normally to verify if you have a licence for the font. Many typefaces and font weights can cause slow web page performance because of this increased energy usage. Additionally, having multiple typefaces can be confusing for users as it feels visually inconsistent - we recommend using 1 or 2 weights maximum.
We really enjoyed working with Know You More to help them take their digital presence to the next level. We used one font family for their website - Lexend, a sans serif font that is proven to improve reading performance for those with dyslexia. Read more about our work with Know You More here.
Shorter user journeys can save energy by reducing the number of pages loaded for users to achieve their goals, and reduce the amount of time spent online. Deceptive patterns sometimes elongate processes that could be made shorter for users, creating “invisible” experiences that waste time and energy. We recommend creating a Customer Journey Map to look for optimisation opportunities. Start by mapping the user’s needs, goals, concerns and pain points to ensure you develop features that have genuine needs to solve.
With the right design approach in place, it’s possible to create delightful experiences for our users that have a minimal impact on the environment. If you have an upcoming project that needs some sustainability considerations, then get in touch with us at Furthermore! We’d love to hear from you.
Have an idea you want to discuss? Call us for a free consultation
Get in touch with the team to discuss your idea, project or business.
Furthermore
54-58 Tanner Place, Tanner Street,
London, SE1 3PH
.png){kind=icon}
