webvisions 2013: sustainable web design

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