Articles
| Open Access |
DOI: Implementing Sustainable Digital Design Principles into Web Product Development.
Abramau Usevalad , Senior Art Director, Kargo Jersey City, NJ, USAAbstract
This article examines the principles of sustainable digital design as a holistic approach to web‐product development, wherein each interface optimization considers not only user experience and business metrics but also the material costs of computation, data transmission, and rendering. The relevance of this work is driven by the rapid increase in energy consumption of data centers and user devices under the influence of digitalization, and by the necessity to minimize the carbon footprint of web services amid constraints of the “green” energy system and social responsibility for product accessibility. It seeks to organize and measure important ways of eco-friendly web design—the choices of loading, dark styles, graphic types, shortening and shaking trees, client or server rendering options, adaptive delivery of content, and CO₂ budgets—based on their effects on speed, energy used by devices, and the environment. For this purpose, a careful look at industry reports, acade͏mic tests, and real-world studies was done, plus a metric comparison from the Web Almanac Core, Web Vitals, and lab tests. The novelty of this work lies in integrating ecological, economic, and technical metrics into a unified methodology. For each technique, comparable numerical estimates of carbon‐emission reduction and business‐efficiency gains are presented, and recommendations are developed for their combined application within the CO₂ budget of first‐screen delivery. Key findings indicate that activating lazy loading with a single HTML attribute can reduce transferred data volume and improve Time to Interactive by 20–30%; employing a dark theme on OLED displays under bright lighting can decrease display power consumption by up to 47%; and replacing PNG images with SVG sprites can reduce graphic payload by 60–80%. This article will be valuable to web designers, front‐end developers, product managers, and IT strategists seeking to marry high interface performance with a minimal
carbon footprint.
Keywords
sustainable digital design, web performance, lazy loading, dark theme, SVG, server‐side rendering, tree shaking, adaptive loading, CO₂ budget
References
“Measuring the Emissions & Energy Footprint of the ICT Sector,” World Bank, 2024. Accessed: Apr. 11, 2025. [Online]. Available: https://documents1.worldbank.org/curated/en/099121223165540890/pdf/P17859702a98880540a4b70d57876048abb.pdf
“AI is set to drive surging electricity demand from data centres while offering the potential to transform how the energy sector works,” IEA, Apr. 10, 2025—https://www.iea.org/news/ai-is-set-to-drive-surging-electricity-demand-from-data-centres-while-offering-the-potential-to-transform-how-the-energy-sector-works (accessed Apr. 12, 2025).
M. Wiegand, “Site Speed is (Still) Impacting Your Conversion Rate,” Portent, Apr. 20, 2022. https://portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm (accessed Apr. 13, 2025).
M. Bervell, “The Business Case for Digital Accessibility: A Revenue-Generating Investment,” Test Party, Mar. 05, 2025. https://testparty.ai/blog/the-business-case-for-digital-accessibility (accessed Apr. 14, 2025).
S. Judis and E. Portis, “Media,” The Web Almanac by HTTP Archive, Dec. 2024, Accessed: Apr. 15, 2025. [Online]. Available: https://almanac.httparchive.org/en/2024/media
Vasile Crudu, “Why You Should Use Lazy Loading Alongside Minification in WordPress for Optimal Performance,” MoldStud, Apr. 16, 2025. https://moldstud.com/articles/p-why-you-should-use-lazy-loading-alongside-minification-in-wordpress-for-optimal-performance (accessed Apr. 17, 2025).
J. McAlister, “How we made our website use 50% less energy,” Fast Familiar Workroom, Mar. 23, 2021. https://workroom.fastfamiliar.com/how-we-made-our-website-use-50-less-energy/ (accessed Apr. 16, 2025).
Y. Charlie Hu, “Shedding light on dark mode to save energy,” Purdue University, 2022. https://engineering.purdue.edu/ECE/News/2022/shedding-light-on-dark-mode-to-save-energy (accessed Apr. 15, 2025).
M. Turner, “Popular ‘power saving’ mobile feature is sucking your battery,” The Sun, Feb. 20, 2025. https://www.thesun.co.uk/tech/33472529/power-saving-mobile-dark-mode-sucking-battery/ (accessed Apr. 16, 2025).
Princewillton, “Dark Mode Usage Statistics,” Helpfultech, Apr. 28, 2024. https://helpfultech.net/dark-mode-usage-statistics-2024.html (accessed Apr. 17, 2025).
N. Palombi, “SVG files: what are they and how to use them?,” Webflow, 2025. https://webflow.com/blog/svg-file (accessed Apr. 17, 2025).
“A Developer’s Guide to SVG Optimization,” Cloudinary, Jan. 15, 2025. https://cloudinary.com/guides/image-formats/a-developers-guide-to-svg-optimization (accessed Apr. 17, 2025).
J. Wagner, “Reduce JavaScript payloads with tree shaking,” web.dev, 2018. https://web.dev/articles/reduce-javascript-payloads-with-tree-shaking (accessed Apr. 19, 2025).
“How We Reduced Our JavaScript Bundle Size by 70% While Adding Features,” Medium, Apr. 21, 2025. https://javascript.plainenglish.io/how-we-reduced-our-javascript-bundle-size-by-70-while-adding-features-cb784a948631 (accessed Apr. 20, 2025).
“The most effective ways to improve Core Web Vitals,” web.dev, 2024. https://web.dev/articles/top-cwv (accessed Apr. 20, 2025).
Maharaf Hossen, “Next.js vs React: Why Next.js is the Future of Web Development,” Medium, Feb. 24, 2025. https://maharafhossen.medium.com/next-js-vs-react-why-next-js-is-the-future-of-web-development-60f7d8060fea (accessed Apr. 21, 2025).
Google, “Mobile Site Abandonment after Delayed Load Time,” Think with Google. https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-site-load-time-statistics/ (accessed Apr. 21, 2025).
M. Mihajlija, “Adaptive loading: improving web performance on slow devices,” web.dev. https://web.dev/articles/adaptive-loading-cds-2019 (accessed Apr. 22, 2025).
Laurent Devernay Satyagraha, Burak Güneli, I. Akrap, A. Dawson, M. Gifford, and T. Frick, “Sustainability,” The Web Almanac by HTTP Archive, Nov. 2024, Accessed: Apr. 24, 2025. [Online]. Available: https://almanac.httparchive.org/en/2024/sustainability
“How is your website impacting the planet?” Wholegrain Digital. https://www.websitecarbon.com/ (accessed Apr. 24, 2025).
“Chrome Lite Pages - For a faster, leaner loading experience,” Chromium Blog, Mar. 12, 2019. https://blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html (accessed May 01, 2025).
J. Morehead, “Introducing Google News Lite mode — faster news for slower networks,” Google, Sep. 27, 2016. https://blog.google/outreach-initiatives/google-news-initiative/introducing-google-news-lite-mode/ (accessed May 03, 2025).
C. Welch, “Google is ditching Chrome’s data saver mode on Android,” The Verge, Feb. 23, 2022. https://www.theverge.com/2022/2/23/22947441/google-lite-mode-data-saver-chrome-android-discontinued (accessed May 06, 2025)
Article Statistics
Copyright License
Copyright (c) 2025 Abramau Usevalad
This work is licensed under a Creative Commons Attribution 4.0 International License.
Authors retain the copyright of their manuscripts, and all Open Access articles are disseminated under the terms of the Creative Commons Attribution License 4.0 (CC-BY), which licenses unrestricted use, distribution, and reproduction in any medium, provided that the original work is appropriately cited. The use of general descriptive names, trade names, trademarks, and so forth in this publication, even if not specifically identified, does not imply that these names are not protected by the relevant laws and regulations.