WebVisions 2013: Sustainable Web Design
•
3 recomendaciones•2,296 vistas
This presentation, given at WebVisions Chicago 2013, covers how being a B Corp led Mightybytes to define an evolving set of practices for creating sustainable websites and build a free software tool called Ecograder that assesses website sustainability. More info and a free ebook here: http://www.mightybytes.com/sustyweb
Recomendados
Más contenido relacionado
Más de Tim Frick
Más de Tim Frick (12)
Último
Último (20)
WebVisions 2013: Sustainable Web Design
- 1. a presentation by September 26, 2013 WebVisions Chicago Tim Frick @timfrick Sustainable Web Design
- 2. Mightybytes is a Certified B Corporation B Corps use the power of business to solve social & environmental problems
- 4. The B Corp community
- 5. B Corps improve quality of life in their communities more likely to donate at least 10% of profits to charity68%
- 6. B Corps improve quality of life in their communities more likely to use on-site renewable energy47%
- 7. B Corps improve quality of life in their communities more likely to use suppliers from low-income communities18%
- 8. B Corps improve quality of life in their communities more likely to give paid professional development opportunities 4x
- 9. more likely to cover at least some health insurance costs for employees 55% B Corps create higher quality jobs for their workers
- 10. more likely to give bonuses to non-executive members45% B Corps create higher quality jobs for their workers
- 11. more likely to have women & minorities in management28% B Corps create higher quality jobs for their workers
- 12. more likely to give employees at least 20 hrs per year time off to volunteer in their community 2.5x B Corps create higher quality jobs for their workers
- 13. More likely to offer products or services that directly affect an environmental issue 2.5x B Corps are better for the planet
- 14. The internet is not a green medium • Pixels are powered by electricity • Most electricity sources are non-renewable • LOTS of people use the internet Three primary reasons:
- 15. “A recent 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.” Pixels are powered by electricity The internet is not a green medium Source: US Energy Information Administration
- 16. Pixels are powered by electricity "When you think of the meteoric growth of the the internet, you can quickly see that there is an alarming problem ahead of us: the internet is on track to consume 20% of the world's power...At [its] current rate of growth it will get there within ten years." - Breakpoint, Jeff Stibel The internet is not a green medium
- 17. The internet is not a green medium Pixels are powered by electricity • This could potentially lead to energy grid problems across the planet • Significant contributor to the already critical global warming situation
- 18. 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. Most energy sources are not renewable The internet is not a green medium Source: US Energy Information Administration
- 19. The world’s data centers will 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. LOTS of people use the internet The internet is not a green medium Source: New York Times
- 20. LOTS of people use the internet The internet is not a green medium Source: A List Apart, James Christie “Right now, at least 332 million tons of CO2—40 percent of the internet’s total footprint—falls at least partially under the responsibility of people who make the web.”
- 21. How can we make the web greener? A set of practices defining how to build websites that meet present and future performance and energy efficiency standards Sustainable Web Design
- 22. Sustainable Web Design Core Components
- 23. Sustainable Web Design Challenge Reduce the impact of hosting websites
- 24. Sustainable Web Design Solution Green Hosting • Data centers powered by 100% renewable energy • Carbon offsets (RECs) if not near renewable sources • Planting trees? Nice idea, but no! • Examples: • Canvas Dreams • ASIO.net • A Small Orange • Green House Data • Host Papa • 1 & 1 Internet
- 25. Sustainable Web Design Challenge Source: Computer Hope Make content easier to find, reducing resources required to power search
- 26. Sustainable Web Design Solution Findability • Quality content & inbound links to your site • Site is easy to use, navigate, & understand • Use clear hierarchy of information & text links • Avoid duplicate content • Use 301 redirects when needed
- 27. Sustainable Web Design Challenge Streamline user experience, reducing resources needed to power applications Source: Mashable
- 28. Sustainable Web Design Solution User Experience & Design • Mobile first (add styles as the viewport grows) • Avoid Flash or other bandwidth-intensive technologies • Use CSS sprites • Avoid image carousels when possible • Compress/optimize images • Minify scripts & CSS
- 29. Sustainable Web Design Challenge Optimize website performance, reducing impact Source: WebSiteOptimization
- 30. Sustainable Web Design Solution Performance Optimization • Follow best practices for website performance • Google PageSpeed Insights • Yahoo! Performance Rules • Limit share buttons & social plugins • Enable caching
- 31. So What? Don’t I do this stuff already? If we did . . . • At 1.4MB/page average, web pages wouldn’t be 15x the size they were in 2003. • The average page wouldn’t have more than 100 HTTP requests. • Alexa’s top 2,000 retailer sites wouldn’t take an average of seven seconds to load (five more seconds than acceptable to users). Source: A List Apart, James Christie
- 32. The Challenge How can we increase awareness of web sustainability? • Help site owners and designers better understand site impact • Share ideas: • W3C Forum on SWD • LinkedIn Groups, etc. • Build sustainability tools for web designers/developers
- 33. 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. Ecograder
- 34. How it works: 1. Input your URL 2. Crawls your website 3. Assesses its sustainability level based on several key factors 4. Produces a score and report for site improvements Ecograder
- 37. Ecograder Who it’s for: • Web designers & developers • Marketing managers & website owners • Environmental nonprofits • Any environmentally conscious person who works on websites
- 38. Resources eBooks, blog posts, tutorials, checklists, stuff! Get it all here: mightybytes.com/sustyweb
- 39. Thank You a presentation by Tim Frick @timfrick
Notas del editor
- We are also a legal Illinois Benefit Corporation, which is a new legal designation for companies who want to have purpose alongside profit. All based on the stakeholder model, devised in 1984 by Professor R. Edward Freeman
- Certified B Corps go through a rigorous process that assesses a company impact in four areas.
- We ’ re in good company, currently 832 other B Corps big, small, and in-between.
- Important to note: These are comparisons to other sustainable businesses who have taken BIA. B Corps are Better Companies B Corps are better, more durable job creators B Corps were 63% more likely to survive the recession (2007-2012) than the average U.S. small business B Corps create higher quality jobs Even compared to working at another sustainable business, if you work at a B Corp . . . You ’re more likely to get a bonus even if you’re not part of the executive team (45% more likely) You ’re more likely to get at least some of your health care costs paid (55% more likely) You ’re more likely to get health benefits even if you’re part time (10% more likely) You ’re more likely to get paid professional development opportunities (4x more likely) You ’re more likely to get > 20 hrs/yr paid time off to volunteer in your community(nearly 2.5x more likely) B Corps improve the quality of life in their communities Even compared to working at another sustainable business, if you work at a B Corp . . . Your company is more likely to use suppliers certified to meet social/enviro standards (nearly 3x more likely) Your company is more likely to use suppliers from low income communities (18% more likely) Your company is more likely to be a majority women/minority-owned business (2x more likely) Your company is more likely to have women and minorities in management (28% more likely) Your company is more likely to donate at least 10% of profits or 1% of sales to charity (68% more likely) Your company is more likely to use on site renewable energy (47% more likely) Your company is more likely to use clean/low emission vehicles for transportation (> 2x more likely) B Corps are serious, well governed leaders Even compared to working at another sustainable business, if you work at a B Corp . . . Your company is more likely to evaluate its managers in writing on social/enviro goals (43% more likely) Your company is more likely to help its industry create social/enviro standards (33% more likely)
- So we asked ourselves “ what can we do to lessen the impact of what we do? ” We ’ re a web firm...our work often replaces paper, dematerializes physical objects.... How could we make a difference? The first step—and it was a doozy—was to learn more about the environmental impact of the internet. Thus, we learned.... (next slide)
- Curse you, Internet! But it replaces paper! It dematerializes many physical products! Alas...
- The rest comes from fossil fuels: coal, oil, etc.
- Disclaimer: this isn ’ t as much a set of new guidelines as it is a shift in mindset. Due to time we ’ re not going to cover specific practices but rather discuss areas for improvement.
- Server farms and data centers make up the lion ’ s share of internet-based GHG emissions. How do we lessen their impact?
- Answer: buying power. Spend your money with a provider powered 100% by renewable energy. Beware greenwashers! Some providers claim to be green but it ’ s just marketing. Find a good green hosting provider and create a relationship with them. Refer your clients.
- If the average user leaves a website 2-4 seconds after arriving, how do we help users find exactly what they ’ re looking for faster?
- Things you or your UX & SEO friends should be doing already. Also: Create good, clear concise content. Add a search field to your site. List goes on...and on.
- What can we do to streamline the user experience? Hint: mobile traffic now makes up nearly 20% of all internet traffic.
- So much of this is client-driven, so the solution starts with educating clients. Tons more: included on MB site at mightybytes.com/sustyweb
- Average number of objects in the top 1000 webpages tops 100. How can we get that number down without sacrificing user tasks, info, etc.?
- No brainers in this room. Just important to remember as you careen toward deadline. MB uses a website launch checklist, which we ’ ve added to our ebook at mb.com/sustyweb [SHOW LIST IF LONG ON TIME]
- To be fair: No one sets out to create a ginormous web page. Clients often demand: large background images social widgets and features lots of other design bells and whistles MadPow solution: Set a page size budget : start with a target page size, and stick to it. Goal: 2 seconds to load or less.
- We have potential to save up to 8B tons of CO2 by 2020. Small steps have collective impact.
- One of the things we did was build a tool to help people better understand web sustainability. Anyone seen Hubspot ’ s Marketing Grader? (great tool)
- Page speed: using Google PS Insights API, tracking HTTP requests, use of shared libraries. Findability: using MozRank Design and User Experience: Mobile First, use of Flash, etc. Green Hosting (weighted heaviest): hand-picked list. No way to craw Province of Quebec: “ You ’ re in no position to school the province of Quebec on renewable energy. ” Point is to get people talking.
- Ecograder also provides handy reports for each category with links to more resources.
- We built it to help broaden awareness of this issue.
- Sustainable Product Development Manifesto Sustainable website launch checklist Green hosting provider breakdown HTML & CSS techniques Posts on SEO, Mobile First, responsive design, etc. etc.