Sustainable Web Design, An Excerpt.
Best practices for creating energy efficient websites and minimising the energy consumption and environmental impact of the web.
Sustainable web development is a developmental mindset centered around the future of people, our planet and profit. This approach to web development ensures that websites run on renewable energy, are ethical, value-adding and non-exploitative.
As people around the globe are spending more time on the internet, it is important that we understand strategies for designing more sustainable digital products and services while also prioritizing business goals and users' needs. Below, I'm going to provide a few practical tips that can help designers build websites that are eco-friendly.
#1: Understand your digital footprint
According to a 2019 report from The Shift Project, the internet and digital technologies are responsible for 3.7% of all greenhouse gas emissions in 2018. For that reason, using a tool like a website carbon calculator can be especially useful in reducing emissions. Calculators are a great place to start when trying to understand and reduce carbon emissions.
By building single-page websites, you can cut down on the environmental impact of your platform. Single page websites can only hold a limited amount of information so it forces a web designer to effectively present the most relevant information. Another method to lower emissions is partnering with web hosting companies that make use of renewable energy. These companies use servers which are powered by renewable energy sources.
#2: Optimizing Visual Content & Lazy Loading
Images account for up to half of the size of the average web page. Using image formats such as WebP instead of JPEG or PNG can significantly reduce the image size while simultaneously increasing the performance of a web page. Having icons and logos in svg format is also useful in reducing the weight of a page.
For video resources, designers should use WebM instead of MP4 to optimise web pages.
Lazy loading is a technique for designers to optimise web pages. It helps improve the page load time by reducing the page size, while still retaining all the images on the page. The browser does not load all resources simulataneously and only loads additional media as the user scrolls.
#3: Mobile First Approach
A mobile first design ensures that web designers consider what content, features and interactions are most important for users with small screen sizes or low bandwidth. This approach focusses on the user, their needs, and the best way to show off your client's content. When content is properly prioritized, pages load more quickly and burn less energy in the process.
Final Remarks
Sustainable web design is a fast growing discussion as organizations look for every opportunity to reduce emissions and minimize their carbon footprint. By practicing the tips shared above in your web development process, you'll not only be contributing to the ecosystem but also user experience.
