Sustainability is an important draw for many consumers. From better production practices to using renewable materials, consumers care about the impact they and the companies they choose to buy from have on the environment. In fact, 52% of shoppers are more likely to purchase from a company with shared values. 

But sustainability extends beyond physical materials. 

Powering the internet, and any sites or web services hosted on the internet, is energy intensive, creating a carbon impact on the world. Energy requirements fluctuate based on the environment, and depending on when users are accessing the internet, powering the grid can result in the need for energy from fossil fuels. 

Sustainable web design is an approach to creating websites that helps reduce the overall carbon emissions created by the internet, what’s hosted on it, and the companies and people behind it. 

Here’s what you can do to create a more sustainable website. 

Video & Animation

• Video - Allow users to opt into watching a video. Avoid autoplaying video when they first load on the site, instead add a play button that a customer can play when they are interested in watching the video.

• Animation - Use animation when it helps the user experience and adds value for the user. Animations can consume a lot of energy both through larger files and increased need for processing and should be used strategically. Avoiding excessive animation has value for accessibility as well. Excessive motion can sometimes cause dizziness, nausea, and vertigo for people with vestibular disorders.

Images

• Image Optimization - Keep in mind that image files make up the majority of file size on most web interfaces. Optimizing the file size of all images before uploading them to the site is an effective way to reduce energy use. Kraken and Tiny Png are tools you can use to compress your file sizes to achieve this. 
• File format - Consider .svgs instead or .jpgs when relevant for icons and illustrations. For anyone new to these file formats, svgs are vector based files and jpegs/pngs are pixel based, and take up more data. 

Color

• Color Palette - Consider your usage of color when designing your website. Try to prioritize low-energy colors, while always keeping accessibility in mind. Darker colors require less energy to illuminate, with black being the lowest energy color and white being the most energy-intensive. What you might not expect is that blue pixels use approximately 25% more energy than red and green pixels.
  

Responsive Design

• Device & Browser Agnostic - Ensure that all users have a positive experience on the site, regardless of what device or browser they are accessing the site on. 

Fonts

• Less is More: Use a limited number of typefaces and weights to ensure that the load time of the site stays quick. Custom font files can significantly increase the file size of web pages.