{"id":33316,"date":"2022-01-24T05:02:27","date_gmt":"2022-01-24T13:02:27","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=33316"},"modified":"2024-05-20T21:00:09","modified_gmt":"2024-05-21T04:00:09","slug":"sustainable-web-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/","title":{"rendered":"Sustainable Web Design: Can You Lower Design&#8217;s Environmental Impact?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/3nK231DcZ4uZF65ktXM4geN9PNwOUDjpn-SHASNMDRT20hVp8Om8ejV9yA4OhQQgMgqxrewKUn_1eM7MoZoNIvbrbAbOHfzb3B9tv9lWiAw6ZUfC0Ap8Yx3rOYakYHzXsK9ggD9i\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-what-is-sustainable-web-design\" data-level=\"2\">What is Sustainable Web Design?<\/a><ul><li><a href=\"#h-what-are-the-benefits-of-a-sustainable-website\" data-level=\"3\">What Are the Benefits of a Sustainable Website?<\/a><\/li><\/ul><\/li><li><a href=\"#h-how-do-you-create-a-sustainable-website\" data-level=\"2\">How Do You Create a Sustainable Website?<\/a><ul><li><a href=\"#h-1-optimizing-visual-content-lazy-loading\" data-level=\"3\">1) Optimizing Visual Content &amp; Lazy Loading<\/a><\/li><li><a href=\"#h-2-css-sprites\" data-level=\"3\">2) CSS Sprites<\/a><\/li><li><a href=\"#h-3-reducing-emails\" data-level=\"3\">3) Reducing Emails<\/a><\/li><li><a href=\"#h-4-optimizing-design-workflows\" data-level=\"3\">4) Optimizing Design Workflows<\/a><\/li><li><a href=\"#h-5-mobile-first-design\" data-level=\"3\">5) Mobile-First Design<\/a><\/li><li><a href=\"#h-6-minify-html-and-css-resources\" data-level=\"3\">6) Minify HTML and CSS Resources<\/a><\/li><li><a href=\"#h-7-choosing-a-content-management-system-cms\" data-level=\"3\">7) Choosing a Content Management System (CMS)<\/a><\/li><li><a href=\"#h-8-hosting\" data-level=\"3\">8) Hosting<\/a><\/li><li><a href=\"#h-9-choose-fonts-wisely\" data-level=\"3\">9) Choose Fonts Wisely<\/a><\/li><li><a href=\"#h-10-hierarchy-navigation-links\" data-level=\"3\">10) Hierarchy, Navigation &amp; Links<\/a><\/li><li><a href=\"#h-11-use-fewer-web-pages\" data-level=\"3\">11) Use Fewer Web Pages<\/a><\/li><li><a href=\"#h-12-buy-refurbished-equipment\" data-level=\"3\">12) Buy Refurbished Equipment<\/a><\/li><\/ul><\/li><li><a href=\"#h-design-better-user-experiences-with-uxpin\" data-level=\"2\">Design Better User Experiences With UXPin<\/a><\/li><\/ul><\/div>\n\n\n\n<p>Sustainable web design is a growing movement as organizations look for every opportunity to reduce emissions and minimize their carbon footprint. If you follow <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">responsive web design<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile-first practices<\/a>, you&#8217;re already on the way to reducing your environmental impact with greener digital products.<\/p>\n\n\n\n<p>According to a March 2020 BBC article, <a href=\"https:\/\/www.bbc.com\/future\/article\/20200305-why-your-internet-habits-are-not-as-clean-as-you-think\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Why your internet habits are not as clean as you think<\/em><\/a>, the internet accounts for <em>&#8220;3.7% of global greenhouse emissions.&#8221;<\/em>\u2013which includes devices, websites, apps, data centers, and all the supporting infrastructure.<\/p>\n\n\n\n<p>This article looks at how designers, engineers, and businesses can do more to reduce emissions by making eco-friendly digital products and websites for their customers.<\/p>\n\n\n\n<p>Create a greener UX workflow by reducing time-to-market with UXPin. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">PayPal used UXPin Merge to scale design<\/a> and create massive efficiencies without adding more staff or resources. Find out more about this revolutionary code-based UX design technology and how to <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">request access to UXPin Merge<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-sustainable-web-design\">What is Sustainable Web Design?<\/h2>\n\n\n\n<p>Sustainable web design is the process of optimizing digital products and websites to reduce bandwidth and power consumption. Organizations must access several key emission-reducing strategies, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Design<\/li><li>Web Development<\/li><li>Content &amp; Marketing<\/li><li>Hosting<\/li><li>Project Management<\/li><li>Business Operations<\/li><\/ul>\n\n\n\n<p>As you can see, sustainable web design extends beyond the design and development for a holistic impact assessment to reduce greenhouse gas emissions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-are-the-benefits-of-a-sustainable-website\">What Are the Benefits of a Sustainable Website?<\/h3>\n\n\n\n<p>Designing a sustainable website or digital product isn&#8217;t just beneficial for climate change; it also creates business value and reduces costs. One of the most significant savings is hosting.<\/p>\n\n\n\n<p>Most hosting plans bill you for the amount of server space plus the number of monthly users or bandwidth. Reducing the size of your website saves server space while lowering bandwidth and requests. Companies that self-host require smaller data centers and save on energy bills.<\/p>\n\n\n\n<p>Website performance also <a href=\"https:\/\/web.dev\/why-speed-matters\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">correlates to conversion increases<\/a>, and <a href=\"https:\/\/backlinko.com\/hub\/seo\/pagespeed\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">page speed is one of Google&#8217;s rank factors<\/a>.<\/p>\n\n\n\n<p>So, businesses that optimize website and application performance benefit from cost savings and higher revenue, leading to a more sustainable business model.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-do-you-create-a-sustainable-website\">How Do You Create a Sustainable Website?<\/h2>\n\n\n\n<p>Here are 12 sustainable web design tips that improve performance, save money, increase the user experience and reduce your website&#8217;s environmental impact.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-optimizing-visual-content-lazy-loading\">1) Optimizing Visual Content &amp; Lazy Loading<\/h3>\n\n\n\n<p>According to <a href=\"https:\/\/httparchive.org\/reports\/state-of-images\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTTP Archive<\/a>, <em>&#8220;Images are the most popular resource type on the web&#8221;<\/em> and makeup 50% of the average web page size. WebP instead of JPEG or PNG can <a href=\"https:\/\/web.dev\/serve-images-webp\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">reduce file size by 25-35%<\/a> while increasing page speed performance. Switching icons and logos to SVG format can also significantly reduce page weight.&nbsp;<\/p>\n\n\n\n<p>Designers should use <a href=\"https:\/\/www.winxdvd.com\/answers\/webm-vs-mp4.htm\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WebM<\/a> instead of MP4 and GIF for video content. WebM is smaller and optimized for the web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/loading.png\" alt=\"loading\" class=\"wp-image-32518\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/loading.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/loading-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/Lazy_loading\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazing loading<\/a> is another way designers can optimize image and video content. Instead of loading all of these resources simultaneously, the browser only loads what&#8217;s above the fold and then fetches additional images and thumbnails as the user scrolls.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-css-sprites\">2) CSS Sprites<\/h3>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/css-sprites\/\">CSS sprites<\/a> is an old video game trick for loading multiple images with only one HTTP request. Instead of uploading each file individually, you stack the images vertically and combine them with a gutter between each one.<\/p>\n\n\n\n<p>Developers use CSS to set the position and dimensions, hiding the rest of the stack, making it look like a single page image. CSS Tricks has an informative article about <a href=\"https:\/\/css-tricks.com\/css-sprites\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">how to use CSS sprites<\/a>, including package managers for automating the process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-reducing-emails\">3) Reducing Emails<\/h3>\n\n\n\n<p>According to a <a href=\"https:\/\/www.bbc.com\/future\/article\/20200305-why-your-internet-habits-are-not-as-clean-as-you-think\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">BBC article<\/a>, <em>&#8220;If every adult in the UK sent one less &#8216;thank you&#8217; email, it could save 16,433 tonnes of carbon a year \u2013 the equivalent to taking 3,334 diesel cars off the road.&#8221;<\/em><\/p>\n\n\n\n<p>Organizations should audit correspondence and eliminate wasteful emails. For example, how many emails does a customer receive when they complete a sale? Can you combine these into one?<\/p>\n\n\n\n<p>According to marketing guru Neil Patel, <a href=\"https:\/\/neilpatel.com.cach3.com\/blog\/improve-email-deliverability\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">marketers should purge email lists regularly<\/a>. If you&#8217;re sending emails to inactive accounts or customers that don&#8217;t open or engage with your content, then you&#8217;re wasting money and adding unnecessary carbon emissions.<\/p>\n\n\n\n<p>Also, <a href=\"https:\/\/www.bbc.com\/future\/article\/20200305-why-your-internet-habits-are-not-as-clean-as-you-think\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">consider whether it&#8217;s necessary to include images in your emails<\/a>. A regular text email is 4g CO2, whereas an email with a photo is 50g CO2.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-optimizing-design-workflows\">4) Optimizing Design Workflows<\/h3>\n\n\n\n<p>Optimizing design workflows can reduce rework, errors, and usability issues. These problems often put a strain on resources affecting departments beyond UX.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designops\/\" target=\"_blank\" rel=\"noreferrer noopener\">DesignOps<\/a> can help organizations optimize UX workflows and create design efficiencies. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Building a design system<\/a> can also help reduce errors and time-to-market while improving the user experience with cleaner user interfaces that load faster.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-mobile-first-design\">5) Mobile-First Design<\/h3>\n\n\n\n<p>Mobile-friendly websites must be lighter to load faster on smartphones. So, adopting a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile-first design<\/a> strategy means designers create value for their users while saving the environment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/mobile-screens.png\" alt=\"mobile screens\" class=\"wp-image-32988\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/mobile-screens.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/mobile-screens-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>UXPin provides designers with <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/canvas#canvas-properties\" target=\"_blank\" rel=\"noreferrer noopener\">predefined canvas sizes<\/a> for web, iOS, and Android devices. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/adaptive-versions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adaptive Versions<\/a> allows designers to create multiple layouts for each viewport, like mobile, tablet, and desktop. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to experience mobile-first design with UXPin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-minify-html-and-css-resources\">6) Minify HTML and CSS Resources<\/h3>\n\n\n\n<p>Minifying code removes unnecessary whitespace, reduces file sizes, and increases page speed. Developers can also combine resource files, so browsers have fewer requests.<\/p>\n\n\n\n<p>There are loads of free tools for minifying HTML and CSS, including plugins for code editors and package managers. <a href=\"https:\/\/dev.co\/minify-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Minifying Javascript is a little more complicated<\/a>, so leave this for a qualified developer to handle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-choosing-a-content-management-system-cms\">7) Choosing a Content Management System (CMS)<\/h3>\n\n\n\n<p>Choosing the right CMS can also significantly impact the size of your website and page speed. WordPress is often the most popular choice, but it&#8217;s bulky, outdated, and unnecessary for most websites.<\/p>\n\n\n\n<p>Here are some lightweight alternatives for popular website use cases:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/ghost.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Ghost<\/a>: A lightweight headless CMS designed for content creators, excellent for blogs, publications, and subscription websites.<\/li><li><a href=\"https:\/\/www.gatsbyjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Gatsby<\/a>: Great for most websites, including eCommerce, single-page layouts, landing pages, web applications, portfolios, company websites, and much more.<\/li><li><a href=\"https:\/\/strapi.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Strapi<\/a>: An open-source modern headless CMS alternative to WordPress. Build everything from one-page designs to eCommerce and complex mobile and web applications.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-8-hosting\">8) Hosting<\/h3>\n\n\n\n<p>According to the US Energy Efficiency &amp; Renewable Energy Office, <a href=\"https:\/\/www.energy.gov\/eere\/buildings\/data-centers-and-servers\" target=\"_blank\" rel=\"noreferrer noopener\">data centers account for 2% of US electricity usage<\/a>. So, switching to a green web host provider can help reduce energy consumption.&nbsp;<\/p>\n\n\n\n<p>The Green Web Foundation has a <a href=\"https:\/\/www.thegreenwebfoundation.org\/directory\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">hosting directory<\/a> of 342 green hosting providers in 26 countries (figures correct as of December 2021). Green hosters use renewable energy like wind, solar, and hydro. In some circumstances, hosting providers generate more green power than they need, which they feed back into the grid.<\/p>\n\n\n\n<p>You&#8217;ll be pleased to know that many big names, including AWS, A2 Hosting, Firebase Hosting, and Siteground, are listed as US-based green hosting providers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-9-choose-fonts-wisely\">9) Choose Fonts Wisely<\/h3>\n\n\n\n<p>Fonts are known to slow page speed, particularly custom, self-hosted fonts. Consider designing your website with one of 18 <a href=\"https:\/\/blog.hubspot.com\/website\/web-safe-html-css-fonts\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">web-safe fonts<\/a> compatible with all browsers\u2013meaning the browser doesn&#8217;t need to download additional files.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/text-typing-input.png\" alt=\"text typing input\" class=\"wp-image-32516\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/text-typing-input.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/text-typing-input-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>If you are using a custom font, make sure it&#8217;s in WOFF or WOFF2 format so browsers can read and download it. You&#8217;ll also need to include a web-safe font in your font stack, or the browser will load New Times Roman if it can&#8217;t process the WOFF file.<\/p>\n\n\n\n<p>Developers can also use other tricks for custom fonts like <a href=\"https:\/\/www.freecodecamp.org\/news\/web-fonts-in-2018-f191a48367e8\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">pre-loading and CSS optimization<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-10-hierarchy-navigation-links\">10) Hierarchy, Navigation &amp; Links<\/h3>\n\n\n\n<p>Hierarchy and navigation play a crucial role in helping users find content and complete tasks quickly. Designers should prioritize essential navigation in the header (4-5 max) and secondary links in the footer.<\/p>\n\n\n\n<p>Hierarchy helps users identify important content and complete tasks quicker. Visual hierarchy is also a crucial factor for user experience and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-website-accessibility-best-practices-to-improve-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">website accessibility<\/a>.<\/p>\n\n\n\n<p>Teams should conduct regular website audits for broken internal and external links to ensure users never waste server requests with dead-end 404 errors. Use 301 redirects for internal links and find new resources for broken external links.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-11-use-fewer-web-pages\">11) Use Fewer Web Pages<\/h3>\n\n\n\n<p>Every new page visit requires the browser to send a request to the server, which returns the page&#8217;s content and resources. The more page visits you have, the more work (and energy consumption) the server must do to serve content.<\/p>\n\n\n\n<p>Designers should assess each project to determine how to reduce or consolidate pages. A single-page design is often enough for most portfolios, landing pages, corporate websites, local businesses, SaaS, and apps, to name a few.<\/p>\n\n\n\n<p>Single-page designs are good for the environment and provide a better user experience for visitors on mobile devices who only have to scroll to find what they need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-12-buy-refurbished-equipment\">12) Buy Refurbished Equipment<\/h3>\n\n\n\n<p>Businesses and designers should also consider buying refurbished equipment whenever possible. In an <a href=\"https:\/\/www.forbes.com\/sites\/christophermarquis\/2021\/01\/15\/paper-free-isnt-enough-the-keys-to-sustainable-web-design-for-every-business\/?sh=429b27f52b12\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">interview with Forbes<\/a>, co-founder of UK-based Wholegrain Digital web design agency and author of Sustainable Web Design, Tom Greenwood points out that the lifetime carbon footprint of a 13&#8243; MacBook Pro laptop is 185kg CO2, 80% of which is initial manufacture and transport.<\/p>\n\n\n\n<p>So, buying refurbished equipment can significantly reduce your company&#8217;s carbon footprint.&nbsp;<\/p>\n\n\n\n<p>Design agencies Wholegrain Digital and Mightybytes partnered on <a href=\"https:\/\/sustainablewebdesign.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">sustainablewebdesign.org<\/a>, which provides companies with <a href=\"https:\/\/sustainablewebdesign.org\/strategies\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">strategies<\/a> organizations can implement to deliver more sustainable web design projects. The website also has a carbon calculator which shows you how to <a href=\"https:\/\/sustainablewebdesign.org\/calculating-digital-emissions\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">calculate your digital emissions<\/a>.<\/p>\n\n\n\n<p>When you buy an old pc or <a href=\"https:\/\/macpaw.com\/how-to\/remove-malware-from-mac\">mac, make sure to remove malware<\/a> so you can use the computer safely. Doing so is pretty easy with virus removal and malware removal tools, so always buy used computers if you can.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-better-user-experiences-with-uxpin\">Design Better User Experiences With UXPin<\/h2>\n\n\n\n<p>Building a sustainable website starts during the design process. UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">code-based design tool<\/a> lets designers create fully functioning prototypes to eliminate costly usability issues before the <a href=\"https:\/\/www.uxpin.com\/studio\/handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoff<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to see how the world&#8217;s most advanced code-based design tool can optimize design workflows and enhance your website&#8217;s performance for a greener end-to-end design process.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sustainable web design is a growing movement as organizations look for every opportunity to reduce emissions and minimize their carbon footprint. If you follow responsive web design and mobile-first practices, you&#8217;re already on the way to reducing your environmental impact with greener digital products. According to a March 2020 BBC article, Why your internet habits<\/p>\n","protected":false},"author":3,"featured_media":33317,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,205,18,172,8,15,4,6,7],"tags":[],"class_list":["post-33316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-mobile-design","category-process","category-product-design","category-prototyping","category-responsive-web-design","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"Can You Lower Web Design's Environmental Impact? | UXPin","yoast_metadesc":"Learn how to cut environmental impact of design? Let's define what sustainable web design is and how to create sustainable websites.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Can You Lower Web Design&#039;s Environmental Impact? | UXPin<\/title>\n<meta name=\"description\" content=\"Learn how to cut environmental impact of design? Let&#039;s define what sustainable web design is and how to create sustainable websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sustainable Web Design: Can You Lower Design&#039;s Environmental Impact?\" \/>\n<meta property=\"og:description\" content=\"Learn how to cut environmental impact of design? Let&#039;s define what sustainable web design is and how to create sustainable websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-24T13:02:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-21T04:00:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Sustainable-web-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Sustainable Web Design: Can You Lower Design&#8217;s Environmental Impact?\",\"datePublished\":\"2022-01-24T13:02:27+00:00\",\"dateModified\":\"2024-05-21T04:00:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/\"},\"wordCount\":1709,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Sustainable-web-design.png\",\"articleSection\":[\"Blog\",\"Mobile Design\",\"Process\",\"Product Design\",\"Prototyping\",\"Responsive Web Design\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/\",\"name\":\"Can You Lower Web Design's Environmental Impact? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Sustainable-web-design.png\",\"datePublished\":\"2022-01-24T13:02:27+00:00\",\"dateModified\":\"2024-05-21T04:00:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn how to cut environmental impact of design? Let's define what sustainable web design is and how to create sustainable websites.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Sustainable-web-design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Sustainable-web-design.png\",\"width\":1200,\"height\":600,\"caption\":\"Sustainable web design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/sustainable-web-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sustainable Web Design: Can You Lower Design&#8217;s Environmental Impact?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Can You Lower Web Design's Environmental Impact? | UXPin","description":"Learn how to cut environmental impact of design? Let's define what sustainable web design is and how to create sustainable websites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Sustainable Web Design: Can You Lower Design's Environmental Impact?","og_description":"Learn how to cut environmental impact of design? Let's define what sustainable web design is and how to create sustainable websites.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/","og_site_name":"Studio by UXPin","article_published_time":"2022-01-24T13:02:27+00:00","article_modified_time":"2024-05-21T04:00:09+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Sustainable-web-design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Sustainable Web Design: Can You Lower Design&#8217;s Environmental Impact?","datePublished":"2022-01-24T13:02:27+00:00","dateModified":"2024-05-21T04:00:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/"},"wordCount":1709,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Sustainable-web-design.png","articleSection":["Blog","Mobile Design","Process","Product Design","Prototyping","Responsive Web Design","UI Design","UX Design","Web Design"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/","name":"Can You Lower Web Design's Environmental Impact? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Sustainable-web-design.png","datePublished":"2022-01-24T13:02:27+00:00","dateModified":"2024-05-21T04:00:09+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn how to cut environmental impact of design? Let's define what sustainable web design is and how to create sustainable websites.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Sustainable-web-design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Sustainable-web-design.png","width":1200,"height":600,"caption":"Sustainable web design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/sustainable-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Sustainable Web Design: Can You Lower Design&#8217;s Environmental Impact?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=33316"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33316\/revisions"}],"predecessor-version":[{"id":35070,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33316\/revisions\/35070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/33317"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=33316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=33316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=33316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}