Successfully reported this slideshow.
Your SlideShare is downloading. ×

Start Your Journey In Creating Sustainable Web Designs

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Tm Sustainability Booklet
Tm Sustainability Booklet
Loading in …3
×

Check these out next

1 of 31 Ad

Start Your Journey In Creating Sustainable Web Designs

Download to read offline

In this talk, Claire will talk through tips she's learned and applied with her product teams to be conscious and start their journey on creating sustainable web designs. She well touch on:
- What is sustainable web design
- What are her top tips on how to ensure your web design is sustainable
- What challenges has she encountered, and
- What other improvements is she looking to incorporate to her process

In this talk, Claire will talk through tips she's learned and applied with her product teams to be conscious and start their journey on creating sustainable web designs. She well touch on:
- What is sustainable web design
- What are her top tips on how to ensure your web design is sustainable
- What challenges has she encountered, and
- What other improvements is she looking to incorporate to her process

Advertisement
Advertisement

More Related Content

Similar to Start Your Journey In Creating Sustainable Web Designs (20)

Advertisement

More from UXDXConf (20)

Recently uploaded (20)

Advertisement

Start Your Journey In Creating Sustainable Web Designs

  1. 1. Sustainable Web Design Claire Thornewill
  2. 2. —A COLLEAGUE “It does not need to be plastic... there are recyclable bottles as well”
  3. 3. vs.
  4. 4. It is more important to practice sustainable habits than favour one material over the other.
  5. 5. Claire Thornewill Web Performance Consultant Netcentric GmbH
  6. 6. The Internet
  7. 7. DIGITAL = GREEN
  8. 8. DIGITAL = GREEN
  9. 9. 1.6 billion tons in greenhouse gas emissions annually most polluting country in the world of global greenhouse emissions
  10. 10. 3.7% of global greenhouse emissions most polluting country in the world 1.6 billion tons in greenhouse gas emissions annually
  11. 11. 3.7% of global greenhouse emissions 3rd most polluting country in the world 1.6 billion tons in greenhouse gas emissions annually
  12. 12. Email alone... typical year of incoming mail for a business user 136 kg 1 less email one fewer “thank you” email a day would save more than 16,433 tonnes of C02 equivalent to taking 3,334 diesel cars off the road
  13. 13. Behaviour... low-carbon technology resulting in higher-carbon because we use it more one-sixtieth the footprint of a letter sending 60 times more emails
  14. 14. It is not what you are consuming, it is about how you consume it.
  15. 15. —TOM GREENWOOD Sustainable Web Design “Sustainable web design is an approach to designing web services that prioritises the health of our planet”
  16. 16. SUSTAINABLE good ux performant
  17. 17. Where do I even start?
  18. 18. ● www.ecograder.com ● www.websitecarbon.com ● webpagetest.org ● Page Speed Insights Measure
  19. 19. #1519d3 #1519d3 #1519d3
  20. 20. The whole team Define a purpose. don’t put something on the web unless it really matters to you and your users Less is more. the faster users fulfill their goal, the less energy they will spend Define a budget. embrace performance budgets and learn to live within them
  21. 21. https://www.performancebudget.io/
  22. 22. Designers JEDI practices. Assets. using images efficiently is one of the best strategies to reduce file sizes and energy use Custom fonts. try to use system fonts that are already on the users device Dark mode. Using dark designs reduces the brightness the screen, which means the less energy is used shift our perspective to design for the least privileged users Justice, Equity, Diversity, and Inclusion
  23. 23. Content & Marketing Reduce heavy content. Give it an expiry date. consider that your content should be taken down after it has served its purpose be mindful with the type of content you are using on the page and reduce the imagery that has little purpose Make it actionable. make content as clear as possible to reduce the time users spend on deciding which path to take
  24. 24. Content & Marketing Reduce heavy content. Give it an expiry date. consider that your content should be taken down after it has served its purpose be mindful with the type of content you are using on the page and reduce the imagery that has little purpose Make it actionable. make content as clear as possible to reduce the time users spend on deciding which path to take
  25. 25. Developers Up to date tech stack. Reduce Javascript. ask yourself if JS is really necessary and how you can make it more efficient technology keeps evolving and getting more advanced and efficient so make sure you are up to date Switch to a green host. the energy news to come from somewhere to run data center and the cooling systems, make sure it is renewable
  26. 26. Impact low high Impact Reduce media files Dark mode Reduce Javascript Update stack regularly Optimise hosting Optimise assets & fonts etc. Remove old content JEDI principles
  27. 27. It is not what you are consuming, it is about how you consume it.
  28. 28. Live more consciously and mindfully in everything you do. At home. At work.
  29. 29. Claire Thornewill Web Performance Consultant Netcentric GmbH

Editor's Notes

  • “I would recommend to have some small bottles of water available, as the tap water is not being used so often, we should not take any risk drinking from it.”

  • How many of you choose glass over plastic - how many of you do it because you are trying to do your part?
  • Glass has an advantage in recyclability and the production of the packaging, however, because of the enormous difference in weight, the impact of glass, especially in the transportation phase, is significantly higher.
    You might instinctively reach for a glass bottle to avoid buying a plastic alternative, but glass also takes more resources and energy to produce.
  • How many of you use a tote bag because it’s better for the environment
  • 32 Bags!
    what people are talking about enough are the carbon emissions of things and so we think we are being green.
    It has been calculated that a tote bag needs to be used 327 times - 10.464 uses here you see
    There are so many ways it costs the planet that you haven’t thought about
    Awareness is what missing - I am only learning myself.
  • Its not about the material - its about the behaviour - because if you dont think about it it can have quite an environmental cost that we dont think we are

    https://www.envirotech-online.com/news/business-news/44/breaking-news/glass-vs-plastic-which-bottles-are-worse/48297
  • I want to talk about a really large hidden environmental cost that many people havent thought about.

  • When we think digital we think eco
    Reading newspaper online does not waste paper … same as reading a book, sending an email instead of a letter (its faster, its cheaper and its way more convenient)

    Right, because newspaper needs paper and Internet doesn’t … sooo, Internet is green … unfortunately that is not the case.

  • Even though it doesn’t use paper or plastic, Internet uses one other very important and often eco problematic resource … ELECTRICITY
    Electricity needs to be produced somewhere and unfortunately most common way still is by burning fossil fuels. 80%
  • According to the BBC 1.6 billion tons of greenhouse gas emissions estimated to be produced in the manufacture and running of digital technologies between all internet users around the world ca. 4 Billion
    it means each of us is responsible for ca. 414kg of carbon dioxide a year -
    A typical tree can absorb around 21 kilograms of carbon dioxide (CO2) per year => 20 trees

    https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think
    https://www.viessmann.co.uk/heating-advice/how-much-co2-does-tree-absorb

  • According to the BBC - the internet alone makes up 3.7% of global greenhouse emissions, according to some estimates. It is similar to the amount produced by the airline industry globally and these emissions are predicted to double by 2025.
  • According to the BBC - the internet alone makes up 3.7% of global greenhouse emissions, according to some estimates. It is similar to the amount produced by the airline industry globally and these emissions are predicted to double by 2025.
  • typical year of incoming mail for a business user – including sending, filtering and reading – creates a carbon footprint of around 136kg -equivalent to driving 320km in an average car. Thats a little more than london to leeds
    A recent study by the energy company OVO found that the UK sends more than 64 million unnecessary emails every day. Furthermore, if we sent one fewer “thank you” email a day, it would save more than 16,433 tonnes of carbon dioxide a year. That figure is the equivalent to taking 3,334 diesel cars off the road. The total impact is up to 23,475 tonnes of CO2 a year.
  • The average email has just one-sixtieth the footprint of a letter, according to a back-of-the-envelope comparison. That looks like a carbon saving unless you end up sending 60 times more emails than the number of letters you would have posted in days gone by. Lots of people do. This is a good example of the rebound effect – a low-carbon technology resulting in higher-carbon living simply because we use it more.
  • Live more consciously and mindfully - same goes for your internet consumption

    Go straight to a website and remove a step by removing your search - 16 million trees would need to be planted to offset the pollution caused by the estimated 1.9 trillion searches on google alone


  • -- sustainable web design is mostly about lowering the amount of energy needed to access the website
    -- intertwined with UX and performance
    We have the responsibility as designers, developers and product managers to be mindful about how we design and build things


    -- you can reduce your carbon footprint by using sustainable design and development practices: the lighter the site is the less energy it uses, less bandwidth and less computational resources it will use and as a bonus you will get fast and smooth user experience

    -- all roles are equally responsible and for each of these optimisation PO has to be onboard, designer has to take into consideration when designing and developer has to implement it


  • Most important thing when it comes to optimising and natural step one is always: measure
    How bad/good it actually is ?
  • Most important thing when it comes to optimising and natural step one is always: measure
    How bad/good it actually is ?
  • [aprox … XX min]

    Measurements for google.com on website carbon

  • https://addyosmani.com/blog/performance-budgets/

    -we bloat pages with features because they are popular, standard, cool, cute, sexy
  • JEDI - When we shift our perspective to design for the least privileged users who have slow connections and more basic devices, we not only create more accessible and equitable digital experiences, we also create more efficient experiences that use less data and less processing energy.
    We built a tool to simulate: connection speed, CPU level, memory level, reduce motion, save data, tracking

    Assets - Ensure that all images have a justifiable purpose. Size images as small as possible to achieve your objectives and see if you can achieve similar visual impact with alternatives such as SVG graphics and CSS styles. Are images scaled appropriately for display devices? Are file sizes optimized? Does the CMS automatically resize uploaded user images to ones more appropriate to the web?
    Custom Fonts -A typical custom font file can be over 200kb and may only include a single weight. Multiple typefaces and multiple font weights can add up quickly, increasing energy use and causing slow performance. If you need them, OPTIMISE: subset and use latest formats woff2 and dont load them in your Header
    Dark mode -To see something on the screen a lot of small lamps have to shine in different color, and you can guess, the less bright light is, less energy it uses, which means darker designs support sustainable design and it is less strain on the eyes
  • -- for years now enemy no1 for developers have been carousels
  • -- for years now enemy no1 for developers have been carousels
  • Everyday technology is more advanced than the day before - So revising stack on a regular basis and seeing what is new can make a huge impact
    Chrome Dev Summit - 80 petabytes of unneeded Legacy JS is being delivered per month => that was recalculated to 54,000 metric tons of CO2 => which needs 37 million trees to offset ⇒ 37 million trees just because of Legacy JS !!!
    Host providers have thousands of computers to process data and the room gets very warm - They need to keep the air cool, so air conditioning systems are a must for this industry and those systems consume a lot of energy. The Green Web Foundation is doing a fantastic job by providing a list of the most eco-friendly host providers in the world. Consider picking one of them for your next project.

  • Live more consciously and mindfully - same goes for your internet consumption

    Go straight to a website and remove a step by removing your search - 16 million trees would need to be planted to offset the pollution caused by the estimated 1.9 trillion searches on google alone



×