How to design sustainably

by Rosalie Chan

#globalwarmingisreal

What is sustainability?

Efficient and effective solutions that are better for society, environment and the companies by effectively using natural resources and reducing waste and toxins in the environment

Sustainable design - how?

• Decrease carbon footprint
• Reduce over-consumption
• Reuse
• Recycle

Why is this important?

• Make a positive social and environmental impact
• Reduce carbon footprint
• Improve user experience
• 66 percent of millennials would pay more for a product that is more environmentally friendly

Guess what the Internet's carbon footprint is?

830 million tons of CO2/yr

• This is more than the entire aviation industry
• This is expected to double by 2020

Unsustainable design

• Rotating carousels
• High-res images
• Inefficient printing
• http://shouldiuseacarousel.com/

NO^

So how can you design apps to be more sustainable?

#1: Content-first approach

Make content easier to find

• Reduce page clicks.  By doing this, you reduce server requests and also reduce energy.
• Trade videos for images, images for text
• Be more minimalistic and simple. Remove non-essential design elements.

Tips for reducing bandwidth

• Get rid of embedded things you don’t need (maps, video, flash, ads, etc.)
• No carousels or autoplaying video!

^NO

Image tips

• Use fewer images and consolidate smaller images on your site
• Remove large header background images.  These take up a lot of bandwidth and energy!
• Use PNG images instead of JPG.  JPG is harder to render.

Font tips

• Use pure CSS icons, web icon fonts or CSS sprites.
• Large typography helps people find content faster.  

SEO Tips

• A hierarchical document structure using h1, h2, etc. helps improve SEO, so people find content faster
• Incorporate relevant HTML tags and keywords
• Reduce the energy used to find sites

#2: Optimize Performance

Efficiency = key

• If your website runs more efficiently, you use less processing power and energy => lower carbon footprint.
• Caching
• Using shared libraries
• Combine files
• Cache and compress downloads

#3: Mobile-first web design

Mobile-first web design

• This helps you avoid loading large assets meant for desktops onto phones.
• Improves site's efficiency and user experience
• Don’t load too many fonts, and make sure fonts are responsive

#4: Think about printing

Printing

• If there’s going to be one paragraph on the next page or a lot of empty space, automatically downscale text to be on fewer pages.
• On Mac, you can scale manually, but this should be automatic.

#5: Green Web Servers

Green web servers

• Use a hosting provider that runs on renewable energy
• Examples: Aiso, CanvasDreams, WindHosting, GreenGeeks, HostPapa, Host Gator
• Google, Apple and Rackspace gets some power from renewable energy
• Amazon Web Services does not
• Ecograder tells you how sustainable your website is

What about physical products?

Reduce, reuse, recycle

• Make Products Long Lasting
  • Example: Apple Chargers do not last long, need to be replaced.  Leads to more waste.
  • Reusable water bottles
• Repurpose Materials
  • Using recycled plastic
  • Shoes made of old tires

Waste is a design flaw

• Design backwards – is there a way you can design the product so that it is smaller, lighter and minimizes waste?  
• Make it local and social.  Support local economy and reduce environmental impact of shipping.

Think about packaging

• Reduce the amount of waste and CO2 emissions
• The Clever Little Bag reduced 8500 tons of paper, 20 million megaJ of electricity, 1 million liters oil, 500,000 liters diesel, 1 million liters water, 275 tons of plastic
• Make it recyclable or biodegradable

How can you be a sustainable designer?

Takeaways

• Educate yourself
• Make products upgradeable, recyclable or biodegradable
• When designing the product, ask questions about sustainability
• Think about the impact your product would have if millions used it.

Challenge

If you have a personal website, how can you make it more sustainable?

Fin