**Towards reduced website carbon emissions: Contributing factors of sustainable web design and development** Ino Tsichrintzi | December 2022 **Abstract** Our use of the internet is usually considered a more sustainable and environmentally friendly alternative to more traditional ways of producing and consuming information. Even though this holds true to some extent, this overgeneralization has led to a general disregard of the environmental impact of the internet and digital products in general. This paper presents literature regarding sustainability in web development, specifically focusing on environmentally conscious practices in sustainable website development and design. By adopting sustainable web design practices, companies and organizations can reduce their environmental impact and improve the sustainability of the internet as a whole while also improving the experience of the users. Introduction =============================================================================== The increasing use of technology and the internet in our daily lives has always been marketed as a more sustainable and efficient solution to everyday tasks. Given the widespread use of the internet by all kinds of users and the variety of resources offered, it is time to consider the environmental impact of the services and platforms we use on the internet, especially as future developers, designers, or tech gurus. To do so, however, we must consider all the factors that come together when creating our products, from their development, to their design and hosting. This is especially hard since as developers we always have to make choices about the languages, frameworks, and platforms we use for our projects, without necessarily knowing the details of their design. In this paper, I will examine literature and research exploring the issue of sustainability in web design specifically, and explore current best practices that we can use moving forward. As of April 2022, there are 5.03 billion active users of the internet worldwide, which accounts for a total of 63.1 % of the global population. Every one of those users performs unique actions which all consume various levels of energy for their execution. Take for example the simplest task of performing a Google search. A Google report from 2009 shows that the average emissions per Google search amount to 0.2 grams of CO2. According to [internetlivestats.com](https://www.internetlivestats.com/one-second/#google-band), 107,256 Google Searches are performed per second which amount to approximately 9.3 billion searches per day. In total, approximately 1.8 billion grams of CO2 are emitted daily just from Google Searches. This however is not common knowledge and our extended use of the internet has resulted in extreme amounts of CO2 emissions. In fact, if the internet was a country, it would be the seventh most polluting country in the world with emissions similar to those of Germany as illustrated in figure [InternetCountry]. As Gerry McGovern, author of *World Wide Waste* and internationally renowned speaker points out "There is a culture in which we see technology separate from energy," and through this paper I will try to bridge the gap between our conception of technology and energy in order to understand the effects our daily habits on the internet have on the environment. ![Figure [InternetCountry]: C02 Emissions per Country (2018)[#6]](ifInternetWasACountry.png width="680px") In related research a few contributing factors have been identified as contributors to the carbon emissions of a webpage or platform. In his book *World Wide Waste* [#10], McGovern separates the three stages during which products create waste. Even though this is mostly concerning physical technologies it can be applied to digital products as well. The three stages include: the manufacturing of the product, the use of the product, and finally the e-waste of the product following its use. Of course many processes come into those three different parts but the one that this paper will be focusing on will be the development and design component during the manufacturing of a product. In section Sustainability in Website Development of this paper I will be going over all the different contributing aspects that scholars have identified as contributing factors to the total carbon emissions of a digital product. Then more specificallly, in section Sustainable Web Development I will examine research that has been conducted on various programming languages as well as more generally development practices that might have an impact on the carbon emissions of a digital product. In section Sustainable Web Design will look into research that explores the ways that different components in the design such as content, color palettes and the media of a website affect its carbon emissions. Finally, in the conclusion I will reflect on the research presented and discuss possible best practices that we can use moving forward. Sustainability in Website Development =============================================================================== Our everyday actions produce different types of waste and a lot of that waste amounts to greenhouse gas emissions. Measuring greenhouse gas emissions of a product can then be a useful way to account for the environmental impact that our use of the product will have. In their book *Ecological Economics Research Trends*, authors Thomas Wiedmann and Jan Minx offer the following definition of carbon footprint. They say that “The carbon footprint is a measure of the exclusive total amount of carbon dioxide emissions that is directly and indirectly caused by an activity or is accumulated over the life stages of a product”[#18]. With this definition in mind then, we understand that the carbon footprint of our digital products consists of both of the direct emissions of that product (emissions produced by loading a page), but also all the indirect emissions (emissions produced during the production of that page, or emissions of the hosting services). In the chapter “7. Digital Carbon Footprints” from Tim Frick’s book *Designing for Sustainability*, the author proposes an adaptation of life cycle assessment principles to virtual properties (figure [VirtualLifeCycle]) which can be used as assessment criteria for the carbon footprint of a digital product. The parameters outlined here are helpful since they bring up questions regarding the number of workstations used during the production of a product and the energy that those stations are consuming, as well as the sizes of our source files and the effects that the structure of our site may have when considering the number of users fetching data from our websites. ![Figure [VirtualLifeCycle]: Virtual Life Cycle Principles [#5]](VirtualLifeCycle.png width="510px") Based on interviews presented in this chapter regarding all the different elements that we need to consider when calculating the carbon footprint of a digital product, there seems to be three main categories that experts account for. 1. **Development of a product:** this can include all of the devices and resources used during the production which is not limited to the workstations used but also include emissions produced by the commute or air conditioning used for that project. 2. **Resources required to host and share the product:** this includes the energy required to power the servers and data centers and we need to consider if we are using renewable powered data centers. 3. **Resources required by the user to consume the product:** this includes the energy required for the delivery of the product and here we need to consider factors such as the devices the users are using and whether they are accessing our website using WiFi or mobile data. We also need to consider the energy lost in transmission when getting data from its point of origin to the end user. This they mention may differ for the case of mobile users where we need to consider the cost of downloading and holding locally the files necessary for the use of our application as well as the energy consumed by the actual use of the application All of these components are independent from each other, making the calculation of the carbon footprint of a site hard to define. There exist a few platforms that perform this calculation which also often provide recommendations for actions one can take to improve the sustainability of their website. Such platforms include: Ecograder: https://ecograder.com/ : Given a website url calculates the emissions of that page per month based on an imputed number of website visits per month. To place those numbers in perspective, Ecograder then places that in comparison to a number of miles traveled by a car or smartphones charged. Based on the analysis, they then provide helping hints of optimizations that can be performed to reduce the overall emissions of that site. The Green Web Foundation: https://www.thegreenwebfoundation.org/ : Can be used to check if a website is hosted by a green provider, checking for the energy used to power the servers and data centers used by the site. This is a tool used by Ecograder in their analysis, as green hosting consists of 25% of the overall site score. Website Carbon Calculator: https://www.websitecarbon.com/ : Has a similar function to Ecograder with slightly different information provided. This analysis displays information about the carbon emissions of the webpage and places it in comparison to other webpages on the internet that have been tested using this calculator. It then presents a more approachable comparison, showing how the carbon emissions produced by this website in a year with 10K+ visits per month compares to various parameters such as the number of trees that would be required to absorb the carbon emissions produced by that website. As a reference we can consider these tests performed on the https://www.pomona.edu/ webpage. (figure [carbonCalcs]). From the results presented in these figures, and specifically from the results given by Ecograder and the Website Carbon Calculator, we also get specific feedback regarding ways that we can reduce the emissions of our website. ![Figure [carbonCalcs]: Results for www.pomona.edu for Ecograder (top left), Carbon Calculator (top right), and Green Web Foundation (bottom)](carbonCalcs.png width="75%") Specifically, both Ecograder and Website Carbon Calculator split the score of the website into three sections. The first is the user experience design, as they point out that making things more accessible and easier to find not only improves the experience of the user but makes a site more efficient and thus less costly to the environment. The second section deals with the page size, and focuses on different assets used when loading the page including media as well as code. Finally, Ecograder uses the Green Foundation service to check whether or not the site is hosted by a provider that is powered by renewable energy. It is clear that there are many different components that we need to account for when calculating the carbon emissions of a website. In this paper, however, I am going to focus specifically on development and design practices that are energy efficient and minimize the carbon emissions of a website. Sustainable Web Development =============================================================================== As developers, when starting a new project we are faced with various system design choices which, as we have seen in the carbon emission calculator, all affect the emissions of a website. Thus, it is important to understand the impact that different choices have on the sustainability of our website. Programming Languages ------------------------------------------------------------------------------- One of the first choices that we have to make is the programming language we will use. This choice can have a large effect on the total carbon emission of a product as the different structures of each language results in varying energy and space consumptions. In their paper “Energy Efficiency across Programming Languages: How Do Energy, Time, and Memory Relate?” by R. Pereira et. al. [#14] the authors examined the performance in regards to speed, memory and energy consumption of 26 different programming languages by running them against 13 different benchmark problems. In their results, they realized that speed does not necessarily equate to more energy efficiency. It is interesting to note that when analyzing their data, they separated the languages according to their execution type (compiled, virtual machine and interpreted), and programming paradigm (imperative, functional, object oriented, scripting) used. Through this analysis, they concluded that compiled languages tend to be the fastest and most energy efficient ones as “On average, compiled languages consumed 120J to execute the solutions, while for virtual machine and interpreted languages this value was 576J and 2365J, respectively.” A notable exception to that rule was Java that consumed just 114J to execute. Thus, as we can see in figure [codingLang], the choice of language we use can have notable effects in the overall energy consumption of our program. I believe that this is especially important as students, when faced with the decision of which programming language to choose, will often choose Python over other languages as it is the one most frequently taught and, given its liberal syntax, it is easy to pick up and work with. The second most frequently taught language, especially when learning algorithms and data structures is Java. Of course, different languages have different capabilities and there are a lot of factors that need to be considered when choosing which programming language to use for future projects, but given the difference in the energy consumption of these two languages specifically as illustrated from the research discussed above, it is important to consider energy consumption when making such decisions as well. ![Figure [codingLang]: Graph showing the variation in energy efficiency of different programming languages[#6]](programmingLanguages.png width="80%") When talking specifically about website development, in “Chapter 4. Sustainable Web Development” of his book Sustainable Web Design, Tom Greenwood points specifically to the use of Javascript in website development. As we can see in figure [codingLang], even though Javascript is very energy efficient when compared to other popular languages like Python for example, he still urges developers to use it less. Javascript can be used to create unique effects and interactions on websites but the use of the language can also be abused and we need to consider alternative, more energy efficient ways of performing those tasks. For example, as Greenwood discussed in his book, CSS can be used to achieve many animation effects far more efficiently than JavaScript “because it minimizes the need for the CPU to “think”—and can generally be achieved with far smaller file sizes, minimizing the energy used to transfer data”[#6]. Static VS Dynamic Websites ------------------------------------------------------------------------------- Another very important factor that we need to consider is the static or dynamic nature of our website. Content management systems are a common solution for modern websites that need to be agile and scalable. Even though this practice does help control the content of our websites, it does so in a quite inefficient way since, as described by Greenwood, when using CMSs, “the actual HTML files no longer exist on the web server; the server has to generate the files every time someone requests the web page”[#6]. A simple way of understanding the effects of such a shift was illustrated by the CTO of the Positive Internet Company, Nick Mailer at the Web Performance for People and Planet event held in London in 2019. There, he created an HTML “Hello World” file and a PHP equivalent file in order to compare the number of system calls performed when running each script as a measure of their efficiency. In the end, the PHP file conducted approximately 20 times the number of system calls than the HTML file did, which is a quite significant increase in the amount of work conducted by the server, especially for such a simple file. There are ways that we can reduce the system calls performed by a script and the following three practices are the ones most commonly used. 1. **Page caching:** this is often used with CMSs where the most of the page is generated on the spot when the user first visits the site and then any subsequent visits receive a cached version of the page. This, however, does not eliminate the work done by the CMS which still needs to process every request before sending the static files to the user. By moving the caching layer to hosting, the server sends the cached versions of the page directly to the user without using the CMS. Resources like [Varnish](https://varnish-cache.org/intro/) can be useful to help set up the server side caching of a website. 2. **JAMstack:** this stands for Javascript, APIs and Markup and it can use these three components to detach the CMS from the frontend user experience which unloads a lot of the work done by the CMS and results in a more efficient performance. Greenwood states that this approach “delivers the performance, security, and energy efficiency of purely static web pages [while it can] can also deliver the rich interactions, advanced functionality, and CMS-based content editing we expect from the modern web.” Popular JAMstack frameworks are Jekyll, Netlify, Hugo, and Gatsby 3. **[Progressive Web Apps](https://web.dev/progressive-web-apps/):** Progressive Web Apps bring native applications to the web browser offering many benefits to the user experience. PWAs essentially use “ the latest web features to bring enhanced capabilities and reliability.” One of the key features implemented in PWAs is extensive caching on the user’s device. This is particularly effective for pages accessed frequently that don’t change often, like research articles, as it significantly decreases the amount of requests made to the server as well as the amount of data transferred. File Size Optimization ------------------------------------------------------------------------------- Finally, it is also important to optimize and reduce our file sizes. One component of web development that is often overlooked and heavily affects the performance and weight of a page are the font files used. Depending on the different types of files and the content loaded for each font type, the size of the font files can often go out of control. Two techniques that we can keep in mind to reduce the size of those files are the following: * **Convert to WOFF2 files:** the most common font format is TTF. WOFF files are essentially TTF files with metadata and compression that are supported by all major browsers. This file format was created for the web and as it is compressed, it loads much faster than TTF files. The WOFF2 format is the next generation of WOFF and it “offers a 30% average compression gain over the original.” This can be done easily through platforms such as [Font Squirel’s Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator). * **Check the content of your files:** using platforms like [FontDrop](https://fontdrop.info/) we can examine the content of our font files to see the number of characters it contains and languages it supports. It is often the case that not all of these are necessary or used by the website. In this case, we can use tools such as the [Font Subsetter](https://everythingfonts.com/subsetter) tool by Everything Fonts which allow us to only keep the subset of font characters that we need. * **Use System Fonts:** System Fonts are zero waste! They are already stored in the end user’s device and so there is no need to load or store any extra data. As illustrated in figure [systemFonts], system font files include: Arial, Times New Roman, Courier New, Verdana, Tahoma, Trebuchet MS, Georgia, Brush Script MT, Impact. It is also possible to invoke the system UI font in web pages which results in a different font in different devices. Specifically, `font-family: system-ui` results in Segoe on Windows, San Francisco on macOS, and Roboto on Android. ![Figure [systemFonts]: System Fonts](systemFonts.svg) Another aspect that we need to ensure when optimizing the file size of a website is code compression. During the development process we often try different things or include elements in our code for our convenience that do not end up being used or might be duplicated of the same code. Removing such components after the development process in order to produce a purely machine readable code that contains only the information necessary for the code to function can have many benefits as it reduces file sizes and increases the load speed of pages. The simplest way to do that is by using build tools, but the challenge here is that there are multiple different tools that can be used for different optimizations. A build tool recommended by Greenwood in his book is [CodeKit](https://codekitapp.com/) which can “take pretty much any code you give it, run it through build tools, and compile it into the most efficient format.” Of course this does not allow for the same flexibility and adaptability of creating a custom build tool but can be used as a starting point in the process. Website Traffic ------------------------------------------------------------------------------- After examining all the ways that we can become more efficient when serving all the traffic of a website it is also important to note that not all traffic has to be served. A big percentage of the traffic of a website comes from bots which can be blocked using a firewall. The hosting provider of a site or services like Cloudflare or Malcare can be used to add a firewall to a website and reduce traffic. This then also improves the security and reliability of a website while also increasing the speed at which it serves the real visitors. ****** The important thing to remember here, however, is that these factors do not only affect the energy consumption of a website but it is usually the case that a website developed with sustainability in mind is also a more efficient and user friendly one. All the factors discussed in this section also contribute to a faster delivery and access of the data we wish to display on our website and thus sustainability is only one of the many important benefits that these practices provide. Sustainable Web Design =============================================================================== Besides the way that we develop our website, choices in the content we display have a big effect in the overall emissions of a page. Even though the implementation of the website does contribute to the total carbon emissions, choices about the content displayed and the way that it is organized can have a great effect both in the overall sustainability of a website as well as the experience of the user. Content Strategy ------------------------------------------------------------------------------- When designing a website it might be easy to get carried away with the amount of content we want to display. This flexibility however can be harmful both for the users and the traffic of a website as well as the overall sustainability of the site. Two key questions that we need to consider when designing the content and user flow of a website are the following: - Are your users finding what they are looking for quickly and easily? Or are they bouncing between pages to find the information? - Are you attracting the right visitors? Is the actual content of your page relevant to the advertised one? There are a few practices that we can follow in order to ensure that a website’s content is streamlined to accommodate all the users’ needs in the most optimal way. First, once a website is publicly running, we can use analytics and tracking on the traffic of the site. This data could be very useful as a reflection on the content posted since it would allow for the developers to have a better understanding of what content the visitors are navigating to most often and what content they are not paying much attention to. Following such observations one can then remove items that do not seem useful or distract from the purpose of the page and focus on optimizations of the content that is most visited by users. Such conversions can reduce the amount of information displayed to only include valuable content and speed up the interactions of the user with the website in order to deliver the desired information in an easy and timely manner. An easy way to perform such optimizations is by deleting content or pages that seem to be getting less than some x amount of traffic and redirecting users to the most closely relevant pages or the ones that seems most appropriate based on previous traffic. Taking a step back, however, when designing the content of a website it is important to keep in mind the general architecture of the information and keep it as intuitive and natural as possible. We want users to be able to find what they are looking for easily without having to go through a clutter of information to get to it. The vocabulary used in menus and call to action buttons plays a key role in such situations as it is much easier to navigate websites that follow the more standardized vocabulary. This is especially true when considering the accessibility of a website and people who use screen readers to navigate the page. In order to ensure such optimal function of the content of our website, we can use an agile content strategy that incrementally shifts the content of the site in each iteration based on the lessons learned from previous efforts. One of the most important tips outlined in Tim Frick’s *Designing for Sustainability* is to focus on keeping things simple. Embracing limitations such as time and budget can often lead us to a more simple solution which can deliver the same results in a more sustainable and economic way. Identifying underlying structures that can be found throughout a website and repurposing them for a variety of content can be very helpful with that since it decreases the amount of resources required as well as the time required in their development. Frick also emphasizes the importance of testing and setting up a fast feedback loop to ensure the content is aligned to the users’ needs. Media ------------------------------------------------------------------------------- As illustrated from the carbon emissions calculators, one of the biggest sources of emissions of a website page comes from the media loaded. Realistically it is not always possible to eliminate the use of images or videos from our websites but there are things that we can do to minimize their contribution to the energy consumption of a page. When discussing video content, Tim Frick recommends encoding video with the “highest possible compression while still maintaining image quality”[#5]. Streaming services will automatically display a video in the best possible quality but depending on the content of the video this might not always be necessary as the same images can be displayed in a more compressed format. Besides that, he notes that we should also remember to compress the audio associated with the videos as reducing the quality of the sound when possible can save some bandwidth. Moreover, implementing lazy loading is especially important when having videos in a website as it will drastically improve the load time of the site all together. Often sites have videos constantly looping in the background of a page while the user scrolls through the content which consumes a lot of energy and resources. Finally, it is always important to make video and audio accessible for people with disabilities. This is one of the cases where designing for disabilities can benefit multiple groups such as people located in areas with connections of lower bandwidth. Characteristic is [Chris Zacharias’](https://blog.chriszacharias.com/page-weight-matters) experience while developing for Youtube in 2009. At the time, the weight of a youtube page was about 1.2MB and he was challenged to decrease the size to under 100KB. After a lot of work he was able to achieve this goal but monitoring showed that the average aggregate page latency had increased after his changes. After analyzing the data, they realized that there was a disproportionate increase in traffic from regions such as Southeast Asia, South America, Africa, and even remote regions of Siberia. Further research revealed that the average page load in those regions was about 2 minutes which meant that for the previous pages that weighed over a megabyte the load times were over 20 minutes making it impossible for them to access the content of the platform all together. Reducing the size of the youtube page made it possible for more people to access the content. In cases where users do not have enough bandwidth to load images or videos, implementing accessibility features would allow for an alternative way to access that content. More commonly than videos however we see images and icons on websites. When designing websites we need to consider whether the image contributes to the page and if it could be substituted by an icon or vector image instead. Similar to fonts, here too the format of the image file affects the weight of the file. When discussing imagery, Tim Frick points out that vector image formats such as SVG files are resolution independent which means that they can scale up or down without any resolution change. On the other hand, he points out that PNG and GIF files are a good choice for diagrams or graphs that don’t need to scale while PNGs also support alpha transparency which is usually useful. When discussing JPG files, he notes that they are a good choice for photos but not other line art or logos since the compression applied often distorts the images. In any case, it is important to compress those images using tools such as [smush.it!](https://www.imgopt.com/), [Kraken.io](https://kraken.io/), or [Image Optimizer](http://www.imageoptimizer.net/Pages/Home.aspx). Considering this website as an example, the total score on [ecograder.com](https://ecograder.com/), increased by 16% by optimizing the image files using the resources mentioned before. Another method we can follow to optimize the display of images on our site is by using CSS sprites. CSS sprites essentially combine multiple graphics in a single file which can be downloaded on the user’s end once and accessed multiple times from the css script which decodes it to only use the portions necessary for each specific need without performing multiple HTTP requests. Color Palettes ------------------------------------------------------------------------------- In modern day computers and screens in general, the colors that we choose when designing websites can have a large effect on the energy consumption of the website as well. That is because of the fact that most modern screens are using OLED displays. The way that OLED displays work is that if a pixel is needed it will light itself up but if it is displaying black it will be turned off. As a result, the user's device saves energy when displaying something dark or black. Besides that, different colors also have different energy consumptions. As illustrated in the study by Dong and Zhong[#4], the energy consumption of the primary colors can differ dramatically. The researchers of this study performed an experiment to measure the energy consumption of the three different primary colors on three distinct primary screens, the findings of which are illustrated in figure [pixelPower3]. In the same study they also illustrated that even if the lightness of a color is identical, the chromaticity of a color makes a big difference on its energy consumption. In figure [pixelLight] we see that when the lightness increases the energy consumption increases as well. It is also evident however that the energy consumption in a specific lightnes level is not linear across all the colors but the power consumption difference can be as high as five times between two colors of the same lightness. In figure [colorConsumption] we see a graph generated by Google in 2016 where it is recorded that red consumes 600mW, green consumes 580mW, and blue consumes the most power at 800mW of power draw. Even though the exact values will vary by device, this gives us a general understanding of the effects that our color palette choices can have on the overall energy consumption of a site. With this knowledge, we can then use tools like the website [coolors](https://coolors.co/) that allow website designers to easily generate color palettes that best suit their needs. An [example color palette](https://coolors.co/45040c-720714-000000-12562a-063a21) would be one using mostly dark colors and hues of reds and greens instead of blues. ![Figure [pixelPower3]: Pixel Power Models of three OLED displays](PixelPower3.png width="80%") ![Figure [pixelLight]: OLED color power model in CIELAB which displays the relative power consumption of colour ranges for four different lightness levels.](PixelPowerLight.png width="80%") ![Figure [colorConsumption]: Results of 2016 Google Research regarding pixel energy consumption of different colors.](colorEnergyGraph.png width="80%") Having a completely dark website however might not always be the best option especially when considering accessibility and branding issues. Fortunately, there is a CSS media query (`prefers-color-scheme`) that helps address that problem by accessing the user’s theme preferences and allows developers to adjust the colors accordingly. World Wide Web Consortium Standards ------------------------------------------------------------------------------- As it is evident throughout this paper, accessibility and sustainability go hand in hand. When designing for sustainability we are also designing for accessibility and vice versa. As a guideline to accessible web design, the World Wide Web Consortium (W3C) published the Web Content Accessibility Guidelines (WCAG) which includes guidelines presented into four core categories: 1. **Perceivable:** information cannot be inaccessible through all of the user’s senses. 1. Text alternatives 2. Time-based media 3. Adaptable 4. Distinguishable 2. **Operable:** users must be able to operate all parts of the interface and navigation. 1. Keyboard accessible 2. Enough time 3. Seizures and physical reactions 4. Navigable 5. Input modalities 3. **Understandable:** the content and operation of the interface cannot be beyond the user’s understanding. 1. Readable 2. Predictable 3. Input assistance 4. **Robust:** Users must be able to access content as technologies advance. 1. Compatible Further than the specific accessibility guidelines, the W3C has also created the list of web standards that web developers should follow which are outlined in the table below as Frick describes them: Standards | Description ----------------------------|-------------------------------------------------- Web design and applications | These are the standards for building and rendering web pages. Includes HTML, CSS, SVG, Ajax, and so on Web of devices | These are the technologies that enable Web access anywhere, any time, using any device. Devices can range from smartphones to wearable technologies, interactive television, automobiles, and so on Web architecture | These is the foundation technologies of the Web, such as URIs, HTTP, and so on Semantic web | The technologies that enable people to create data stores, build vocabularies, and write rules for handling data using such technologies as RDF, SPARQL, OWL, and SKOS XML | This defines standards relating to XML technologies, such as XML, XML Namespaces, XML Schema, XSLT, EXI, and others Web of services | Message-based design services based on technologies like HTTP, SOAP, SPARQL, WSDL, XML, and so on. Frequently found in technologies related to payments, security, and internationalization Browsers and authoring tools| The tools we use to access and create web content: browsers, media players, content management systems, social media, photo and video sharing apps, blogging tools, and many others Following such practices encourages designers to design and plan for long term needs and the entire life span of their products instead of focusing on short term goals. Focusing on improving the usability and accessibility of the product always comes hand on hand with the overall energy consumption and sustainable nature of the product. Conclusion =============================================================================== Websites are used by millions of people all over the world daily. The introduction and widespread use of internet and computers in general has been traditionally percieved as a more sustainable and environmentally friendly option. Even though this is true to some extent it has also resulted in a blind use and production of web products that do not consider the way that those digital products affect the envrionment. In this paper we have explored the various components that come together when building a website and ultimately contribute to the total carbon emissions of the use of the site. As discussed previously all the development and design choices made during the production of a digital product need to be considered as even components such as color palettes that might initially seem relatively irrelevant to the energy consumption of a website can have a significant effect. Specifically here we have focused on some specific development and design processes. In the development process we a few components that we need to consider: [ ] **Choice of programming languages:** as we saw in figure [codingLang] due to their underlying structure different programming languages can have drastically different levels of energy consumption [ ] **Static or Dynamic nature of the website:** the number of system calls perfmed by a website and the content that needs to be retrieved each time need to be minized [ ] **File size optimization:** we need to consider the contents of our files and optize and remove any unecessary components that are not being used or could be eliminated. [ ] **Website traffic:** it is always good practice to set up a secure and protected website that monitors the users that access it Despite the choices we make regarding the set up of the website, the organization and selection of the content and elements of the site are also important. [ ] **Content strategy:** the selection and organization of the content impacts both the overall size and weight of a page as well as the experience of the user as they navigate through the website. Intuitive content strategy can both improve the experience of the user and the environmental impact of the site. [ ] **Media:** images and videos are ususally the largest files loaded in a website and so careful choice of the media used and optimization of the file sizes of the content displayed in a website is key when minimizing the weight of a page. [ ] **Color Palettes:** as we saw in figure [colorConsumption] displaying different colors can consume very different amounts of energy and so we always need to consider both sustainability and accesibility when choosing the color palettes of a digital product. [ ] **W3C Standards:** following thestandards established by the World Wide Web Consortium for website design and accessibility can both increase the usability and experience of the users while ensuring that our website is designed optimally. During the creating of this page I tried to implement most of the optimizations and solutions discussed in this paper that were possible given the contrains of its development. Of course there are a lot of this that could be done to decrease the total carbon emissions created from this page. Even though this is a relatively new research topic many people are working towards more sustainable web practices. If you are interested in this topic, the following resources are a good place to start: * [Sustainable Web Manifesto](https://www.sustainablewebmanifesto.com/) * [sustainablewebdesign.org](https://sustainablewebdesign.org/) * [sustainable.dev](https://the-sustainable.dev/) * [lowwwcarbon.com](https://lowwwcarbon.com/) References =============================================================================== [#1]: Android Developers. 2016. “Cost of a pixel color (Android Dev Summit '18).” YouTube. https://www.youtube.com/watch?v=N_6sPd0Jd3g&ab_channel=AndroidDevelopers. [#2]: Christie, James. 2013. “Sustainable Web Design – A List Apart.” A List Apart. http://alistapart.com/article/sustainable-web-design/. [#3]: Coyier, Chris. 2009. “CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks.” CSS-Tricks. https://css-tricks.com/css-sprites/. [#4]: Dong, Mian, and Lin Zhong. "Chameleon: A color-adaptive web browser for mobile OLED displays." In Proceedings of the 9th international conference on Mobile systems, applications, and services, pp. 85-98. 2011. [#5]: Frick, Tim. 2016. Designing for Sustainability: A Guide to Building Greener Digital Products and Services. N.p.: O'Reilly. [#6]: Greenwood, Tom. 2021. Sustainable Web Design. N.p.: A Book Apart. https://learning.oreilly.com/library/view/sustainable-web-design/9781098128807/. [#7]: Greenwood, Tom. 2022. “213 - Tom Greenwood - Zero Waste Web Design - video Dailymotion.” Dailymotion. https://www.dailymotion.com/video/x898l0p. [#8]: Greenwood, Tom. 2022. “The dark side of green web design.” Wholegrain Digital. https://www.wholegraindigital.com/blog/dark-colour-web-design/. [#9]: Linares-Vásquez, Mario, Gabriele Bavota, Carlos Eduardo Bernal Cárdenas, Rocco Oliveto, Massimiliano Di Penta, and Denys Poshyvanyk. "Optimizing energy consumption of guis in android apps: A multi-objective approach." In Proceedings of the 2015 10th Joint Meeting on Foundations of Software Engineering, pp. 143-154. 2015. [#10]: McGovern, Gerry. World Wide Waste: How Digital is Killing Our Planet-and what We Can Do about it. SilevrBeach Publishing, 2020. [#11]: Mightybytes, Wholegrain Digital. n.d. Sustainable Web Design: Home. Accessed December 3, 2022. https://sustainablewebdesign.org/. [#12]: “Page Weight Matters.” 2012. Chris Zacharias. https://blog.chriszacharias.com/page-weight-matters. [#13]: Pandey, Akash. n.d. “Understanding of Font Formats: TTF, OTF, WOFF, EOT & SVG.” Medium. Accessed December 3, 2022. https://medium.com/@aitareydesign/understanding-of-font-formats-ttf-otf-woff-eot-svg-e55e00a1ef2. [#14]: Pereira, Rui, Marco Couto, Francisco Ribeiro, Rui Rua, Jácome Cunha, João Paulo Fernandes, and João Saraiva. "Energy efficiency across programming languages: how do energy, time, and memory relate?." In Proceedings of the 10th ACM SIGPLAN International Conference on Software Language Engineering, pp. 256-267. 2017. [#15]: Rendle, Robin. 2018. “Dark Mode in CSS | CSS-Tricks.” CSS-Tricks. https://css-tricks.com/dark-modes-with-css/. [#16]: “System font, or web-safe font – Fonts Knowledge.” n.d. Google Fonts. Accessed December 3, 2022. https://fonts.google.com/knowledge/glossary/system_font_web_safe_font. [#17]: Wholegrain Digital. n.d. Sustainable Web Manifesto. Accessed December 3, 2022. https://www.sustainablewebmanifesto.com/. [#18]: Wiedmann, Thomas, and Jan Minx. "A definition of ‘carbon footprint’." Ecological economics research trends 1, no. 2008 (2008): 1-11.