Sustainable Web Design
•
3 gefällt mir•8,507 views
A presentation on sustainable web design and its core components: Green Hosting Findability User Experience and Design Performance Optimization
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Sustainable Web Design
Ähnlich wie Sustainable Web Design (20)
Mehr von Tim Frick
Mehr von Tim Frick (13)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Sustainable Web Design
- 1. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Chicago Interactive Design & Development Meetup June 18, 2013 Wednesday, June 19, 13
- 2. Mightybytes is an Illinois B Corporation Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 3. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup But why? • Pixels are powered by electricity. • Most electricity sources are non-renewable. • LOTS of people use the internet. The Internet is not a green medium Wednesday, June 19, 13
- 4. “A new report by The New York Times on the internet's energy consumption estimates that data centers worldwide use 30 billion watts of electricity, including as much as 10 billion watts in the United States alone.” Source: US Energy Information Administration The Internet is not a green medium Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Pixels are powered by electricity. Wednesday, June 19, 13
- 5. As of 2011, only about 19% of electricity generated in the world and 12.7% of energy generated in the United States comes from renewable resources. Source: US Energy Information Administration The Internet is not a green medium Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Most electricity sources are non-renewable. Wednesday, June 19, 13
- 6. The world’s data centers are projected to surpass the airline industry as a greenhouse gas polluter by 2020, according to a study by McKinsey & Co. Over that time, the carbon dioxide emissions attributable to the electricity consumed by fast expanding data centers will rise fourfold. Source: New York Times Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup LOTS of people use the internet. The Internet is not a green medium Wednesday, June 19, 13
- 7. Human activities have contributed to the highest CO2 levels in 650,000 years, and surfing, clicking, & streaming isn’t exempt. Source: Steria The Internet is not a green medium Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Image source: Metro Transportation Library & Archive Wednesday, June 19, 13
- 8. How can we make the web greener? Sustainable Web Design: A set of practices that define how to build websites that meet present and future performance and energy efficiency standards. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 9. Sustainable Web Design Core Components: • Green Hosting • Findability • User Experience and Design • Performance Optimization Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 10. Sustainable Web Design Green Hosting: • Data centers powered by 100% renewable energy • Carbon offsets if not near renewable sources • Planting Trees? Nice idea, but no! • Examples: • Canvas Dreams • ASIO.net • A Small Orange • Pair Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup • Green House Data • Host Papa • 1&1 Internet • Dreamhost Wednesday, June 19, 13
- 11. Sustainable Web Design Findability: • Quality content and inbound links to your site • Site is easy to use, navigate, and understand • Use clear hierarchy of information and text links • Avoids duplicate content • Use 301 redirects when needed • Many other techniques Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Useful resource: Moz Wednesday, June 19, 13
- 12. Sustainable Web Design User Experience and Design: • Provide a streamlined experience to all users • Mobile First (add styles as the viewport grows) • Avoid Flash • Use CSS Sprites • Avoid image carousels • Compress/optimize images • Minify scripts and CSS • Many other techniques Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 13. Sustainable Web Design Performance Optimization: • Follow best practices for website performance • Google PageSpeed Insights • Yahoo! Performance Rules • Limit share buttons and social plugins • Enable caching • Many other techniques Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 14. The Challenge How can we increase awareness of web sustainability? • Help website owners better understand the impact. • Share ideas: • Sustainable Web Design W3C Forum • Linkedin Groups, etc. • Build sustainability tools for web designers/developers. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 15. EcoGrader (www.ecograder.com) is a free tool that measures the sustainability of your website and provides a general roadmap for making improvements and decreasing greenhouse gas (GHG) emissions. Meet EcoGrader Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 16. How it works: EcoGrader 1. Input your URL 2. Crawls your website 3. Assesses its sustainability level based on several key factors 4. Produces a score and a report for site improvements Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 17. What it grades: EcoGrader • Green hosting • Findability • Design & User Experience • Flash Avoided • Mobile Optimized • Performance • PageSpeed score • HTTP requests Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 18. Who it’s for: • Web designers & developers • Marketing managers and website owners • Environmental nonprofits • Any environmentally conscious person who works on websites EcoGrader Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 19. Grading the Fortune 500 websites. (fastcoexist.com) EcoGrader Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Who it could benefit: Wednesday, June 19, 13
- 20. Case Study Mattel: How it scored: • 25/100 EcoGrader • Non-sustainable hosting • Not mobile optimized • Flash on homepage • Nearly 100 HTTP requests Wednesday, June 19, 13
- 21. Case Study CompassX Strategy: How it scored: • 88/100 EcoGrader • Green hosting • Mobile optimized • Avoids Flash • Zippy page speed • Low number of requests Wednesday, June 19, 13
- 22. EcoGrader (Pro?) Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Where its going: • More metrics graded • Analytics dashboard: track your progress • Carbon offset resource Wednesday, June 19, 13
- 23. • Save the Planet Through Sustainable Web Design, Pete Markiewicz http:// www.netmagazine.com/features/save-planet-through-sustainable-web- design • Hack the Planet poster, James Christie http://jcux.co.uk/cleanux/ixd.html • Mightybytes blog: http://www.mightybytes.com/blog/tags/tag/ sustainablewebdesign/ • Sustainable Web Ecosystem Design, Greg O’Toole https:// www.springer.com/computer/swe/book/978-1-4614-7713-6 • Power, Pollution, and The Internet http://www.nytimes.com/2012/09/23/ technology/data-centers-waste-vast-amounts-of-energy-belying-industry- image.html?_r=0 • W3C Sustainable Web Forum http://www.w3.org/community/sustyweb/ • Sustainable Virtual Design Blog http:// sustainablevirtualdesign.wordpress.com/ Resources Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Wednesday, June 19, 13
- 24. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup Thank YouThank You @timfrick @julianrockfish Wednesday, June 19, 13
Hinweis der Redaktion
- Slide 2: Mightybytes is an Illinois B Corp that subscribes to the triple bottom line philosophy of People, Planet, Profit. B Corps use the power of business to solve social and environmental problems.
- Slide 3: The biggest misconception is that the internet is a green medium, or more green than a physical product. It is actually not safe to assume that a dematerialized product consumes fewer resources. In fact Alma Media (news) did the research and when their website was read for extensive periods of time, it consumed more overall energy and resources than the equivalent paper edition, and resulted in greater net damage to the environment.
- Slide 4: The fact of the matter is pixels use a lot of electricity. 30 billion watts worth. This visual assumes an average electric oven at 350 degrees, an average plasma television. These stats came from the power consumption database. http://www.tpcdb.com
- Slide 5 : 87% of US energy comes from non-renewable resources. Only 12.7% is sourced from hydropower, biomass, biofuel, wind, geothermal and solar.
- Slide 6: The internet is a big carbon emitter too. Consider that a tweet or a Google search uses approximately .02 grams of CO 2 . Not much, right? But there is approximately 500 million tweets sent per day, generating 10 metric tons of CO 2 ...DAILY! And that’s just Twitter. Sources: Treehugger: http://www.treehugger.com/clean-technology/twittering-adds-how-much-to-your-carbon-footprint.html CNET: http://news.cnet.com/8301-1023_3-57541566-93/report-twitter-hits-half-a-billion-tweets-a-day/
- Slide 7 : The fact of the matter is that neither your browsing nor your sites are exempt from impacting the environment. It’s time to change the way we craft web experiences.
- Slide 8 : It’s not all doom and gloom! Humanity has the ability to make design and development sustainable to ensure that websites meet the needs of the present without compromising the ability of future generations to meet their own needs.
- Slide 9 : the core components of sustainable web design are green hosting, findability, UX / design, and performance optimization.
- Slide 10 : Did you know roughly 50 million servers contribute to an internet carbon footprint equivalent to 5% of total global greenhouse emissions? Since servers require power 24 hours a day, it’s important to consider a green hosting provider that uses 100% renewable energy.
- Slide 11 : Findability comes into play because the faster users can find what they need, the less resources and bits they use. The same goes for the energy Google applies to find and index your site. It is critical that your site’s content is easily indexed by search engines. If you have a search function on your website, even better!
- Slide 12 : In recent years, efficiency has taken a back seat to the pursuit of the coolest interface. According to web performance guru Steve Souders, around 85% of efficiency gains come from reworking the user interface of a site. If you need whiz bangery, do it wisely. CSS3 has helped make it possible to do cool design without a ton of images.
- Slide 13 : Sustainable websites perform well. They serve up valuable data as quickly as possible without roadblocks, and cut back on server requests.
- Slide 14 : Average web page size has increased to 1MB (source Pete M. article)
- Slide 15: We built EcoGrader (which is free!) to help you better understand the environmental impact of your website, and guide you on how to improve its sustainability with achievable tips.
- Slide 16 : EcoGrader is very simple. Just input your URL, and press Grade Me. We’ll provide you with a score, as well as actionable tips to improve your site.
- Slide 17 : These four pillars of EcoGrader’s scoring mechanism are consistent with everything we’ve been talking about, and this is just the start!
- Slide 18: Mightybytes built EcoGrader to help people better understand web sustainability and forge a path toward building more efficient websites. There are multiple groups who could find its resources helpful.
- Slide 19 : Fortune 500, CSR departments. Think about this: 60% of American executives think their social responsibility strategies resulted in improving corporate reputation and see this as a business benefit. Source: Social Science Research Network
- Slide 20 : Barbie burned a hole in the ozone! Because Mattel threw every bell and whistle at their website, their EcoGrader score is only 25/100. Maybe she should look into LEED certification for that Dream Home.
- Slide 21: CompassX used EcoGrader to improve their site nearly 20 points. Keep in mind green hosting, page speed, and mobile optimization are heavily weighted metrics in the EcoGrader algorithm.
- Slide 22: Virtual life cycle assessment, check for CDNs, page size detection, CSS3 over images (in the case of gradients, buttons), export reports, track progress and improvement, easy resource for offsets.
- Slide 23: