webvisions 2013: sustainable web design
DESCRIPTION
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/sustywebTRANSCRIPT
a presentation by
September 26, 2013WebVisions Chicago
Tim Frick@timfrick
SustainableWeb Design
Mightybytes is a Certified B CorporationB Corps use the power of business to solve social & environmental problems
The B Corp community
B Corps improve quality of life in their communities
more likely to donate at least 10% of profits to charity68%
B Corps improve quality of life in their communities
more likely to use on-site renewable energy47%
B Corps improve quality of life in their communities
more likely to use suppliers from low-income communities18%
B Corps improve quality of life in their communities
more likely to give paid professional development opportunities
4x
more likely to cover at least some health insurance costs for employees
55%
B Corps create higher quality jobs for their workers
more likely to give bonuses to non-executive members45%
B Corps create higher quality jobs for their workers
more likely to have women & minorities in management28%
B Corps create higher quality jobs for their workers
more likely to give employees at least 20 hrs per year time o! to volunteer in their community
2.5x
B Corps create higher quality jobs for their workers
More likely to o!er products or services that directly a!ect an environmental issue
2.5x
B Corps are better for the planet
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:
“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
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, Je! Stibel
The internet is not a green medium
The internet is not a green mediumPixels are powered by electricity
• This could potentially lead to energy grid problems across the planet
• Significant contributor to the already critical global warming situation
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
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
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.”
How can we make the web greener?
A set of practices defining how to build websites that meet present and future performance and energy e"ciency standards
Sustainable Web Design
Sustainable Web DesignCore Components
Sustainable Web Design ChallengeReduce the impact of hosting websites
Sustainable Web Design SolutionGreen Hosting
• Data centers powered by 100% renewable energy
• Carbon o!sets (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
Sustainable Web Design Challenge
Source: Computer Hope
Make content easier to find, reducing resources required to power search
Sustainable Web Design SolutionFindability
• 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
Sustainable Web Design ChallengeStreamline user experience, reducing resources needed to power applications
Source: Mashable
Sustainable Web Design SolutionUser 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
Sustainable Web Design ChallengeOptimize website performance, reducing impact
Source: WebSiteOptimization
Sustainable Web Design SolutionPerformance Optimization
• Follow best practices for website performance
• Google PageSpeed Insights
• Yahoo! Performance Rules
• Limit share buttons & social plugins
• Enable caching
So What?Don’t I do this stu! 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
The ChallengeHow 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
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
How it works:1. Input your URL2. Crawls your website3. Assesses its sustainability level
based on several key factors4. Produces a score and report
for site improvements
Ecograder
What it grades:
Ecograder
Handy dandy reports
Ecograder
EcograderWho it’s for:
• Web designers & developers
• Marketing managers & website owners
• Environmental nonprofits
• Any environmentally conscious person who works on websites
ResourceseBooks, blog posts, tutorials, checklists, stu!!
Get it all here: mightybytes.com/sustyweb
Thank You
a presentation by
Tim Frick@timfrick