Designers: The First Line of Defense for Web Sustainability and Page Weight

Sustainable web design is a trending topic as we see the global consumption of internet data continue to grow. The internet’s carbon footprint involves the energy required to power the servers, devices, text, imagery, and video that goes into delivering the website to new users. According to this BBC.com article, “Carbon emissions generated by the internet, devices, and systems that support it account for 3.7% of global greenhouse gas emissions. That’s more than all aviation emissions (2.5%).” These statistics will only continue to rise. 

It is vital that we craft digital experiences that both cater to the users’ needs while considering performance optimizations that reduce the overall carbon footprint. While there are several ways we achieve this during development and implementation—through caching, lazy loading, file aggregation, and compression—the designer is the first line of defense for improving the sustainability of a digital product. We will discuss sustainable design considerations we can make before anything is actually built.

Know Your Audience

The first step to building a more sustainable product begins with the overall strategy. We need to build a website or application that understands the visitor’s needs and priorities. The faster we can get the user to their end goal, the less time is spent digging for solutions and thereby loading more data. All interface decisions should be based on three main properties: (1) everything should be easy to find, (2) quick to navigate, and (3) simple to use. If the amount of pages visited can be significantly reduced, that is one step towards a smaller carbon footprint.

Image & Video Usage

The use of imagery and video assets are typically the largest contributor to the file size of a  website. While establishing a digital experience, designers are challenged to find the strategic mixture of color, typography, imagery, and other brand elements that delight and engage the brand audience. While building out components and layouts, all images must be used with a justifiable purpose. 

Are there alternatives to using a large hero background image at the top of the page? Could SVGs or CSS styling achieve similar results while communicating the brand? When possible, less colorful and complex imagery will also keep file sizes down. Video files, especially auto-playing video assets, add significant page weight and typically hinder the visitor’s ability to digest information. Designers can advocate for better ways to communicate the brand messaging in order to lead the client to a more sustainable solution.

Data Impacts Content Decisions

An evaluation of website analytics provides important information that will influence content decisions. Frequently visited pages should be kept simple and clear—navigating the visitor quickly to their desired information. Deeper third and fourth-level pages can be more content rich and include editorial content, video, imagery, and text. Based on data, it is clear that these pages have fewer visitors and those users that reach these pages are more likely to digest the content on the page. 

As an example, let’s consider a patient looking for a particular clinic’s address and phone number. Instead of loading a promotional video, brand imagery, and scrolling through patient testimonials, the homepage is clear and concise and helps the patient quickly navigate to a filterable locations listing page.

Typography

Font selections during the design process are largely impacted by the client’s brand guidelines, but designers can significantly influence the overall page weight with their decisions. While loading a system font is the most performant option, these selected fonts might not successfully translate the brand look and feel in the new digital space. The use of custom fonts or web fonts is typically required, but should be limited to two unique typefaces. The amount of font weights included with each typeface also increases the size and load time. When determining styling treatments for headlines and body text, designers should be mindful of these font weight decisions. 

In the case of our own Phase2 digital branding, if all headlines on a new website design leverage Raleway, can the various headline sizes use the same bold weight (700) or is semi-bold (600) also required? If an additional font is needed for legible body text, can we rely on the browser rendering of the bold while only loading the normal weight? Variable fonts that use one file to contain all possible font styles could be another option. For interface icons, using a select set of SVGs will be much more performant than using a full icon set like Font Awesome or Google Material Icons. Many additional optimizations can occur during implementation, but the designer's choices early on in the creative process can go a long way.

Color Selection

The growing usage of OLED over LCD device screens has introduced more energy-saving opportunities based on color usage. LCD screens light their pixels from the edges using a single backlight and use the same amount of power regardless of dark or light pixels. Meanwhile, OLED screens generate light for every individual pixel. That means that a solid black color uses no power. Many popular mobile devices and Windows laptops are already adopting OLED technology with Apple anticipating to release Macbooks with OLED monitors as early as 2024. 
Color selection and usage for websites and applications is becoming increasingly more important. The key is not to immerse our designs with dark colors to preserve energy, but to instead strategically find ways to introduce darker section colors that are still engaging and meaningful to the visitor. A strong balance between darker tones and other neutral colors that avoid pure white will result in a design that reduces eye strain while maintaining proper contrast.

Options for Dark Mode

Increasingly more websites give the visitor the choice between light and dark mode. The adjustment could be offered automatically based on local browser preferences, or the color scheme could be controlled with a toggle as part of the interface. Dark text on lighter backgrounds has previously been the most popular choice for users, but many users today are instead opting to read light text on dark backgrounds. As designers, we should consider expanding our design system to cater to both audiences. 

Consistency Through the Design System

Many of the topics discussed above— imagery, color, typography—can all be documented and standardized with a design system. Andrew Couldwell summarizes design systems well with this quote from Laying the Foundations: “Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products.” 

By establishing a design system early during the creative process, we are ensuring that our web components are built with consistency and can be reusable from page to page, which results in a cleaner and more efficient code base that can be easily cached. Less CSS reduces page weight, and visitors will enjoy a more predictable interface as well! For more about design systems and optimized design handoffs, watch my latest presentation at DrupalCon Portland.

Final Considerations

While many optimizations that reduce overall page weight can be applied during the build of a new website, the designer is the first line of defense to guide the client towards more sustainable solutions for communicating their brand messaging and vision to their audience. From the fonts, colors, files, and overall complexity of the page layout, designers have the power to advocate for page weight-saving ideas that can go a long way towards a more sustainable web.

We hope you enjoyed reading the Phase2 blog! Please subscribe below for regular updates and industry insights.