CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home - Sustainable Web Design</title> <link rel="pingback" href="https://sustainablewebdesign.org/wp/xmlrpc.php"> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="Sustainable web design is an approach to designing digital products and services that puts people and planet first." /> <link rel="canonical" href="https://sustainablewebdesign.org/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Home" /> <meta property="og:description" content="Sustainable web design is an approach to designing digital products and services that puts people and planet first." /> <meta property="og:url" content="https://sustainablewebdesign.org/" /> <meta property="og:site_name" content="Sustainable Web Design" /> <meta property="article:modified_time" content="2024-01-19T22:16:03+00:00" /> <meta property="og:image" content="https://sustainablewebdesign.org/app/uploads/2021/01/arrows.svg" /> <meta name="twitter:card" content="summary_large_image" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://sustainablewebdesign.org/","url":"https://sustainablewebdesign.org/","name":"Home - Sustainable Web Design","isPartOf":{"@id":"https://sustainablewebdesign.org/#website"},"primaryImageOfPage":{"@id":"https://sustainablewebdesign.org/#primaryimage"},"image":{"@id":"https://sustainablewebdesign.org/#primaryimage"},"thumbnailUrl":"https://sustainablewebdesign.org/app/uploads/2021/01/arrows.svg","datePublished":"2020-12-23T16:22:19+00:00","dateModified":"2024-01-19T22:16:03+00:00","description":"Sustainable web design is an approach to designing digital products and services that puts people and planet first.","breadcrumb":{"@id":"https://sustainablewebdesign.org/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://sustainablewebdesign.org/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://sustainablewebdesign.org/#primaryimage","url":"https://sustainablewebdesign.org/app/uploads/2021/01/arrows.svg","contentUrl":"https://sustainablewebdesign.org/app/uploads/2021/01/arrows.svg","width":412,"height":313},{"@type":"BreadcrumbList","@id":"https://sustainablewebdesign.org/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home"}]},{"@type":"WebSite","@id":"https://sustainablewebdesign.org/#website","url":"https://sustainablewebdesign.org/","name":"Sustainable Web Design","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://sustainablewebdesign.org/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}</script>  <link rel='dns-prefetch' href='//cdnjs.cloudflare.com' /> <link rel='dns-prefetch' href='//cdn.jsdelivr.net' /> <link rel='dns-prefetch' href='//use.fontawesome.com' /> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/sustainablewebdesign.org\/wp\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.7.1"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <link rel='stylesheet' id='formidable-css' href='https://sustainablewebdesign.org/wp/wp-admin/admin-ajax.php?action=frmpro_css&ver=1231940' type='text/css' media='all' /> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://sustainablewebdesign.org/wp/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='safe-svg-svg-icon-style-inline-css' type='text/css'> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #FFF;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--teal: #10626f;--wp--preset--color--purple: #270075;--wp--preset--color--yellow: #FFF800;--wp--preset--color--off-white: #F9F9F9;--wp--preset--color--light-gray: #979797;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='font-awesome-css' href='//use.fontawesome.com/releases/v5.8.2/css/all.css?ver=6.7.1' type='text/css' media='all' /> <link rel='stylesheet' id='main-css-css' href='https://sustainablewebdesign.org/app/themes/swdorg/public/css/style.css?ver=1738615294' type='text/css' media='screen' /> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js?ver=6.7.1" id="jquery-js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js?ver=6.7.1" id="js-cookies-js"></script> <link rel="https://api.w.org/" href="https://sustainablewebdesign.org/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://sustainablewebdesign.org/wp-json/wp/v2/pages/14" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://sustainablewebdesign.org/wp/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7.1" /> <link rel='shortlink' href='https://sustainablewebdesign.org/' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://sustainablewebdesign.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fsustainablewebdesign.org%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://sustainablewebdesign.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fsustainablewebdesign.org%2F&format=xml" /> <link rel="icon" href="https://sustainablewebdesign.org/app/uploads/2021/01/cropped-Group-3-32x32.png" sizes="32x32" /> <link rel="icon" href="https://sustainablewebdesign.org/app/uploads/2021/01/cropped-Group-3-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://sustainablewebdesign.org/app/uploads/2021/01/cropped-Group-3-180x180.png" /> <meta name="msapplication-TileImage" content="https://sustainablewebdesign.org/app/uploads/2021/01/cropped-Group-3-270x270.png" /> </head> <body class="home page-template-default page page-id-14 wp-embed-responsive"> <div class="overlay"> <div class="overlay-content"><a class="overlay-close" href="#"><span class="fas fa-times"></span></a> <div class="post-content"></div> </div> </div> <div class="underlay"> <div class="blue-triangle"></div> <div class="orange-square os1"></div> <div class="orange-square os2"></div> <div class="yellow-triangle yt1"></div> <div class="yellow-triangle yt2"></div> <div class="blue-blob"></div> <div class="red-rectangle rr1"></div> <div class="red-rectangle rr2"></div> </div> <aside aria-label="Skip to main content"> <a class="skip" href="#main">Skip to Main Content</a> </aside> <div class="wrapper"> <header id="site-header" role="banner"> <div class="container"> <div class="nav"> <div class="logo"> <a href="https://sustainablewebdesign.org/" title="Sustainable Web Design" rel="home"> <img src="https://sustainablewebdesign.org/app/uploads/2020/12/SustainableWebDesign-logo.svg" alt="Sustainable Web Design Logo" /> </a> </div> <div class="menu"> <button class="menu-toggle" aria-label="Menu"><span class="fas fa-bars"></span></button> <nav aria-label="Primary"> <div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14 current_page_item menu-item-19"><a href="https://sustainablewebdesign.org/" aria-current="page">Home</a></li> <li id="menu-item-767" class="menu-item menu-item-type-post_type_archive menu-item-object-guidelines menu-item-767"><a href="https://sustainablewebdesign.org/guidelines/">Guidelines</a></li> <li id="menu-item-486" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-486"><a href="https://sustainablewebdesign.org/estimating-digital-emissions/">Emissions</a></li> <li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a href="https://sustainablewebdesign.org/digital-carbon-ratings/">Ratings</a></li> <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://sustainablewebdesign.org/contact/">Contact</a></li> </ul></div> <div class="mobile-popup"> <div class="button">This website emits 0.49g of C02 <span class="fas fa-arrow-right"></span></div> <div class="content"> <button class="close_button">X</button> <div class="inner-content"> <h2 class="wp-block-heading">Want to see how your website impacts the planet?</h2> <p>If you're interested in implementing sustainable web design practices but not sure where to start, these two free tools can help.</p> <p>Wholegrain Digital's Website Carbon can help you estimate site-based emissions while Mightybytes' Ecograder offers handy reports on how to improve your website's environmental impact.</p> <a href="https://ecograder.com" class="btn external" target="_blank">Launch Ecograder</a> <a href="https://www.websitecarbon.com/" class="btn external" target="_blank">Explore Web Carbon Calculator</a> </div> </div> </div> <div class="accessibility-tools"> <button class="accessibility-btn" aria-label="Accessibility Controls Toggle" aria-haspopup="true" aria-expanded="false">Accessibility Controls</button> <div class="accessibility-controls"> <button class="increase"><span class="fas fa-plus"></span>Increase font size</button> <button class="decrease"><span class="fas fa-minus"></span>Decrease font size</button> <button class="reset"><span class="fas fa-undo"></span>Reset font size</button> <button class="contrast"><span class="fas fa-adjust"></span>Toggle high contrast</button> <button class="grayscale"><span class="fas fa-toggle-on"></span>Toggle greyscale</button> <button class="dark"><span class="fas fa-lightbulb"></span>Toggle dark mode</button> <button class="noshapes"><span class="fas fa-shapes"></span>Toggle background shapes</button> </div> </div> </nav> </div> </div> </div> </header> <div class="container bodycontainer"> <main id="main" tabindex="-1"> <h1 class="wp-block-heading contain-left">What is sustainable web design?</h1> <div class="bubble"> <div class="inner_bubble"> <div class="inner_bubble_btn"> This website emits 0.49g of C02<br /> <img decoding="async" src="/app/themes/swdorg/public/images/white-arrow.svg" alt="Arrow" /> </div> <div class="inner_bubble_open"> <button class="close_button">X</button> <div class="content"> <h2 id="toc-1" class="wp-block-heading">Want to see how your website impacts the planet?</h2> <p>If you’re interested in implementing sustainable web design practices but not sure where to start, these two free tools can help.</p> <p>Wholegrain Digital’s Website Carbon can help you estimate site-based emissions while Mightybytes’ Ecograder offers handy reports on how to improve your website’s environmental impact.</p> <a href="https://ecograder.com" class="btn external" target="_blank">Launch Ecograder</a> <a href="https://www.websitecarbon.com/" class="btn external" target="_blank">Explore Web Carbon Calculator</a> </div> </div> </div> </div> <p class="contain-left large">Web technology has the potential to bring huge benefits to society and the environment, but only if we use it wisely…</p> <div style="height:130px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="wp-block-heading contain-center">The problem</h2> <p class="contain-center">The internet currently produces approximately <strong>3.7% of global carbon emissions</strong>, which are rising in line with our hunger to consume more data. Increasingly, web technologies are also being used to sow discontent, erode privacy, prompt unethical decisions, and, in some countries, undermine personal freedoms and the well-being of society.</p> <div class="stats"> <div class="stat"> <h1>4th</h1> <p>Communications tech will emit more carbon by 2025 than any country except China, India, and the U.S.</p> <a href="https://internethealthreport.org/2018/the-internet-uses-more-electricity-than/" aria-label="Source for statistic #1" target="_blank">View Source</a> </div> <div class="stat"> <h1>29%</h1> <p>Renewables made up only 29% of global electricity generation in 2020. </p> <a href="https://www.c2es.org/content/renewable-energy/" aria-label="Source for statistic #2" target="">View Source</a> </div> <div class="stat"> <h1>19 M</h1> <p>A typical data center can use between 11 and 19 million liters of water per day. </p> <a href="https://www.newscientist.com/article/2342490-how-much-water-do-data-centres-use-most-tech-companies-wont-say/" aria-label="Source for statistic #3" target="">View Source</a> </div> </div> <div class="wp-block-image contain-center"> <figure class="aligncenter size-large is-resized"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2021/01/arrows.svg" alt="" style="object-fit:contain;width:412px;height:313px"/></figure></div> <div class="wp-block-group contain-center"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading contain-center">How do we do it?</h2> <p><strong>Sustainable web design</strong> is an approach to designing web services that puts people and planet first. It delivers digital products, services, and data that respect the principles of the <em>Sustainable Web Manifesto</em>: clean, efficient, open, honest, regenerative, and resilient.</p> <a href="https://www.sustainablewebmanifesto.com/" class="btn external" target="">Read the Manifesto</a> <div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div> </div></div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%"> <h2 id="toc-2" class="wp-block-heading">Discover the Web Sustainability Guidelines (WSGs)</h2> <p>Select a category to learn about using the WSGs to deliver more sustainable web projects. </p> <a href="https://sustainablewebdesign.org/guidelines/" class="btn internal" target="">View all guidelines</a> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="categories"> <p class="category-links"> <a href="/guideline-categories/user-experience-design/" class="btn btn-all btn-user-experience-design active">UX Design   <span class="fas fa-arrow-right"></span></a> <a href="/guideline-categories/web-development/" class="btn btn-all btn-web-development active">Web Development   <span class="fas fa-arrow-right"></span></a> <a href="/guideline-categories/hosting-infrastructure-and-systems/" class="btn btn-all btn-hosting-infrastructure-and-systems active">Hosting & Infrastructure   <span class="fas fa-arrow-right"></span></a> <a href="/guideline-categories/business-strategy-and-product-management/" class="btn btn-all btn-business-strategy-and-product-management active">Business & Product Strategy   <span class="fas fa-arrow-right"></span></a></p></div></div> </div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <h2 id="toc-3" class="wp-block-heading">Useful resources</h2> <p>Check out these books for more information on sustainable web design and related topics.</p> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="books"> <div class="column"> <div class="book"> <a href="https://abookapart.com/products/sustainable-web-design" target="_blank"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2021/01/SWD-Tom-Greenwood-Cover.jpg" alt="Sustainable Web Design cover" /></a><br /> <a class="btn external" href="https://abookapart.com/products/sustainable-web-design" aria-label="Explore Book 1: Sustainable Web Design cover" target="_blank">Explore</a> </div> <div class="book"> <a href="https://gerrymcgovern.com/books/world-wide-waste/" target="_blank"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2021/01/world-wide-waste.png" alt="World Wide Waste" /></a><br /> <a class="btn external" href="https://gerrymcgovern.com/books/world-wide-waste/" aria-label="Explore Book 2: World Wide Waste" target="_blank">Explore</a> </div> <div class="book"> <a href="https://nathan.com/design-is-the-solution/" target="_blank"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2021/01/design-is-the-solution.png" alt="Design is the Solution" /></a><br /> <a class="btn external" href="https://nathan.com/design-is-the-solution/" aria-label="Explore Book 3: Design is the Solution" target="_blank">Explore</a> </div> </div> <div class="column"> <div class="book"> <a href="https://learning.oreilly.com/library/view/designing-for-sustainability/9781491935767/" target="_blank"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2021/01/designing-for-sustainability.png" alt="Designing for Sustainability" /></a><br /> <a class="btn external" href="https://learning.oreilly.com/library/view/designing-for-sustainability/9781491935767/" aria-label="Explore Book 4: Designing for Sustainability" target="_blank">Explore</a> </div> <div class="book"> <a href="https://sustainablewww.org/sustainable-web-design-in-20-lessons-book" target="_blank"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2023/03/Andersen-SWD20-bookcover.png" alt="Sustainable Web Design in 20 lessons" /></a><br /> <a class="btn external" href="https://sustainablewww.org/sustainable-web-design-in-20-lessons-book" aria-label="Explore Book 5: Sustainable Web Design in 20 lessons" target="_blank">Explore</a> </div> <div class="book"> <a href="https://ethicaldesignhandbook.com/" target="_blank"><img decoding="async" src="https://sustainablewebdesign.org/app/uploads/2021/01/the-ethical-design-handbook.png" alt="The Ethical Design Handbook" /></a><br /> <a class="btn external" href="https://ethicaldesignhandbook.com/" aria-label="Explore Book 6: The Ethical Design Handbook" target="_blank">Explore</a> </div> </div> </div></div> </div> </main> </div> <footer class="site-footer"> <div class="footer-left"> <h2>Join the W3C Community Group</h2> <p class="large">Help us create measurable sustainability standards for the web.</p> <a class="btn external" href="https://www.w3.org/community/sustyweb/" target="_blank">Join the group</a> <div class="credits"> <p>This site is brought to you by</p> <div class="logos"><a href="https://www.mightybytes.com/" target="_blank"><img src="/app/themes/swdorg/public/images/mightybytes-logo.svg" alt="Mightybytes" /></a> <a href="https://wholegraindigital.com/" target="_blank"><img src="/app/themes/swdorg/public/images/wholegrain-logo.svg" alt="Wholegrain Digital" /></a></div> </div> </div> <div class="footer-right"> <div class="carbon"> <img src="/app/themes/swdorg/public/images/Lightning-Icon.svg" alt="Website Carbon" /> <p class="carbon-text">This page loaded in <strong>0.25 seconds</strong> and emitted just <strong>0.5g of CO2</strong></p> <a class="btn external" href="https://websitecarbon.com/" target="_blank">Visit Website Carbon</a> </div> <div class="ecograder"> <img src="/app/themes/swdorg/public/images/Ecograder-Icon.svg" alt="Ecograder" /> <p>How green is your website?</p> <a class="btn external" href="https://ecograder.com/" target="_blank">Visit Ecograder</a> </div> </div> </footer> <div class="copyright">© Copyright Sustainable Web Design 2025. <a href="/privacy-policy/">Privacy Policy</a>. </div> <link rel='stylesheet' id='block-acf-bubble-css' href='https://sustainablewebdesign.org/app/themes/swdorg/public/css/blocks/bubble.css?ver=6.3.12' type='text/css' media='all' /> <link rel='stylesheet' id='block-acf-stats-css' href='https://sustainablewebdesign.org/app/themes/swdorg/public/css/blocks/stats.css?ver=6.3.12' type='text/css' media='all' /> <link rel='stylesheet' id='block-acf-categories-css' href='https://sustainablewebdesign.org/app/themes/swdorg/public/css/blocks/categories.css?ver=6.3.12' type='text/css' media='all' /> <link rel='stylesheet' id='block-acf-books-css' href='https://sustainablewebdesign.org/app/themes/swdorg/public/css/blocks/books.css?ver=6.3.12' type='text/css' media='all' /> <style id='core-block-supports-inline-css' type='text/css'> .wp-container-core-columns-is-layout-1{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-2{flex-wrap:nowrap;} </style> <script type="text/javascript" src="https://sustainablewebdesign.org/app/themes/swdorg/public/js/app.js?ver=6.7.1" id="main-js-js"></script> <script type="text/javascript" src="https://sustainablewebdesign.org/app/themes/swdorg/public/js/blocks/books.js?ver=6.3.12" id="block-acf-books-js"></script> <script async defer src="https://scripts.withcabin.com/hello.js"></script> </body> </html>