designing for sustainability - webvisions 2016

62
DESIGNING FOR SUSTAINABILITY @timfrick WebVisions Sept 23, 2016

Upload: tim-frick

Post on 14-Apr-2017

231 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Designing for Sustainability - WebVisions 2016

DESIGNING FOR SUSTAINABILITY @timfrick

WebVisionsSept 23, 2016

Page 2: Designing for Sustainability - WebVisions 2016
Page 3: Designing for Sustainability - WebVisions 2016
Page 4: Designing for Sustainability - WebVisions 2016

90% OF ALL DATA WAS CREATED WITHIN THE LAST 12 MONTHS.

— Salesforce

Page 5: Designing for Sustainability - WebVisions 2016

STREAMING MEDIA SERVICES NOW ACCOUNT FOR OVER 70% OF PEAK NORTH

AMERICAN INTERNET TRAFFIC.

— Sandvine

Page 6: Designing for Sustainability - WebVisions 2016

VIRTUAL REALITY USES 20X MORE BANDWIDTH THAN HD VIDEO.

Page 7: Designing for Sustainability - WebVisions 2016

3.2 BILLION PEOPLE ARE ONLINE20-50 BILLION DEVICES BY 2020

Page 8: Designing for Sustainability - WebVisions 2016
Page 9: Designing for Sustainability - WebVisions 2016

RENEWABLE ENERGY IN U.S.LESS THAN 15%.

Page 10: Designing for Sustainability - WebVisions 2016

JEVONS PARADOXAVAILABILITY DRIVES CONSUMPTION

A SINGLE TWEET.02g of CO2

— Tweetfarts (not to scale)

500M TWEETS/DAY10 Metric Tons of CO2

Page 11: Designing for Sustainability - WebVisions 2016

ENTIRE INTERNET:NEARLY 1 BILLION TONS OF

ANNUAL CO2 AND RISING

Page 12: Designing for Sustainability - WebVisions 2016

SYSTEMS THINKINGCONSIDERING THE ENTIRE LIFE CYCLE

OF A DIGITAL PRODUCT OR SERVICE

Page 13: Designing for Sustainability - WebVisions 2016
Page 14: Designing for Sustainability - WebVisions 2016

U.S. E-WASTE FOR ONE YEAR: 1.15M TRUCKS FULL

Page 15: Designing for Sustainability - WebVisions 2016
Page 16: Designing for Sustainability - WebVisions 2016

— Dr. Pete Markiewicz

Page 17: Designing for Sustainability - WebVisions 2016

WHAT CAN WE DO?DESIGN FOR SUSTAINABILITY

Page 18: Designing for Sustainability - WebVisions 2016

EFFICIENCY RENEWABLE ENERGY

Page 19: Designing for Sustainability - WebVisions 2016

FINDABILITY USABILITY

PERFORMANCE GREEN HOSTING

Page 20: Designing for Sustainability - WebVisions 2016

FINDABILITY

Page 21: Designing for Sustainability - WebVisions 2016

6 CONTENT STRATEGY/SEO TIPS

1. Answer questions with great content & clear CTAs.2. Optimize content, tags, etc. for search phrases.3. SEO practices to increase page/domain authority.4. Make navigation & labels clear and obvious.5. Add search on site.6. Streamline your process: lean/agile, collaboration.

Page 22: Designing for Sustainability - WebVisions 2016

USABILITY

Page 23: Designing for Sustainability - WebVisions 2016

6 UX DESIGN TIPS

1. Mobile first, responsive, etc.2. Optimize design assets for performance.3. Avoid dark patterns. (darkpatterns.org)4. Help users make more sustainable choices.5.Test design decisions via user & A/B testing, etc.6. Lean/agile workflows: design/dev teams collaborate.

Page 24: Designing for Sustainability - WebVisions 2016

PERFORMANCE OPTIMIZATION

Page 25: Designing for Sustainability - WebVisions 2016

6 PERFORMANCE OPTIMIZATION TIPS1. Create a page weight budget.2. Follow Google/Yahoo! performance guidelines.3. Use W3C web standards.4. Accessibility: 508-compliance at the very least.5. Optimize files: scripts, HTTP requests, etc.6. Lean/agile workflows: design/dev teams collaborate.

Page 26: Designing for Sustainability - WebVisions 2016

THE CAVEAT:

HTTP2

Page 27: Designing for Sustainability - WebVisions 2016

COULD BE SLOWER WITH HTTP2

1. Concatenating CSS and JavaScript files.2. Embedded image data.3. Domain Sharding.4. CSS Sprites.

Page 28: Designing for Sustainability - WebVisions 2016

GREEN HOSTING

Page 29: Designing for Sustainability - WebVisions 2016

GREEN HOSTING

SO MANY “GREEN” HOSTS

But are they any good?

Page 30: Designing for Sustainability - WebVisions 2016

GREEN HOSTING

A SIX YEAR JOURNEY

Page 31: Designing for Sustainability - WebVisions 2016

GREEN HOSTING

LACK OF TRANSPARENCY

Plus 50+ others…

Page 32: Designing for Sustainability - WebVisions 2016

THE LARGEST INVESTOR IN RENEWABLE ENERGY ON THE PLANET.

Page 33: Designing for Sustainability - WebVisions 2016

EFFICIENCY RENEWABLE ENERGY

Page 34: Designing for Sustainability - WebVisions 2016

3 Years, nearly 70,000 sites crawled

Page 35: Designing for Sustainability - WebVisions 2016

ECOGRADER REPORTS

Page 36: Designing for Sustainability - WebVisions 2016

ECOGRADER REPORTS

Page 37: Designing for Sustainability - WebVisions 2016
Page 38: Designing for Sustainability - WebVisions 2016

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic findability stat

Page 39: Designing for Sustainability - WebVisions 2016

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic usability stat

Page 40: Designing for Sustainability - WebVisions 2016

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic wpo stat

Page 41: Designing for Sustainability - WebVisions 2016

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic hosting stat

Page 42: Designing for Sustainability - WebVisions 2016

ACTION ITEMSSOME THINGS WE CAN DO

Page 43: Designing for Sustainability - WebVisions 2016

GET A GREEN WEB HOST

Page 44: Designing for Sustainability - WebVisions 2016

THE GREEN WEB FOUNDATION

Find a green web host: thegreenwebfoundation.org

Page 45: Designing for Sustainability - WebVisions 2016

RAISE AWARENESS

Page 46: Designing for Sustainability - WebVisions 2016

EFFICIENCY

— Agency Spotter

Page 47: Designing for Sustainability - WebVisions 2016

ASK COMPANIES TO SWITCHLET THEM KNOW CLEAN ENERGY

IS A CUSTOMER PRIORITY

Page 48: Designing for Sustainability - WebVisions 2016

CLICK CLEAN SCORECARD

Page 49: Designing for Sustainability - WebVisions 2016
Page 50: Designing for Sustainability - WebVisions 2016
Page 51: Designing for Sustainability - WebVisions 2016

ACTUAL WEBSITE EMISSIONS:HOW TO CALCULATE THEM?

Page 52: Designing for Sustainability - WebVisions 2016

CLEAN UP DEVICE SUPPLY CHAINS

Page 53: Designing for Sustainability - WebVisions 2016
Page 54: Designing for Sustainability - WebVisions 2016
Page 55: Designing for Sustainability - WebVisions 2016

MORE RESOURCESLINKS, BOOKS, SOFTWARE, ETC.

Page 56: Designing for Sustainability - WebVisions 2016

CLICK CLEAN REPORT & SCORECARD

clickclean.org

Page 57: Designing for Sustainability - WebVisions 2016

SUSTAINABLE WEB DESIGN BLOG

sustainablewebdesign.org

Page 58: Designing for Sustainability - WebVisions 2016

SERVING.GREEN

Page 59: Designing for Sustainability - WebVisions 2016

SUSTAINABLE UX

sustainableux.com

Page 60: Designing for Sustainability - WebVisions 2016

bcorporation.net

Page 61: Designing for Sustainability - WebVisions 2016

DESIGNING FOR SUSTAINABILITY

Page 62: Designing for Sustainability - WebVisions 2016

THANK YOUmightybytes.com

@timfrick