Designing for Sustainability - WebVisions 2016

Post on 14-Apr-2017

229 views 1 download

transcript

DESIGNING FOR SUSTAINABILITY @timfrick

WebVisionsSept 23, 2016

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

— Salesforce

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

AMERICAN INTERNET TRAFFIC.

— Sandvine

VIRTUAL REALITY USES 20X MORE BANDWIDTH THAN HD VIDEO.

3.2 BILLION PEOPLE ARE ONLINE20-50 BILLION DEVICES BY 2020

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

JEVONS PARADOXAVAILABILITY DRIVES CONSUMPTION

A SINGLE TWEET.02g of CO2

— Tweetfarts (not to scale)

500M TWEETS/DAY10 Metric Tons of CO2

ENTIRE INTERNET:NEARLY 1 BILLION TONS OF

ANNUAL CO2 AND RISING

SYSTEMS THINKINGCONSIDERING THE ENTIRE LIFE CYCLE

OF A DIGITAL PRODUCT OR SERVICE

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

— Dr. Pete Markiewicz

WHAT CAN WE DO?DESIGN FOR SUSTAINABILITY

EFFICIENCY RENEWABLE ENERGY

FINDABILITY USABILITY

PERFORMANCE GREEN HOSTING

FINDABILITY

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.

USABILITY

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.

PERFORMANCE OPTIMIZATION

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.

THE CAVEAT:

HTTP2

COULD BE SLOWER WITH HTTP2

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

GREEN HOSTING

GREEN HOSTING

SO MANY “GREEN” HOSTS

But are they any good?

GREEN HOSTING

A SIX YEAR JOURNEY

GREEN HOSTING

LACK OF TRANSPARENCY

Plus 50+ others…

THE LARGEST INVESTOR IN RENEWABLE ENERGY ON THE PLANET.

EFFICIENCY RENEWABLE ENERGY

3 Years, nearly 70,000 sites crawled

ECOGRADER REPORTS

ECOGRADER REPORTS

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic findability stat

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic usability stat

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic wpo stat

EFFICIENCY RENEWABLE ENERGY

Insert Ecograder infographic hosting stat

ACTION ITEMSSOME THINGS WE CAN DO

GET A GREEN WEB HOST

THE GREEN WEB FOUNDATION

Find a green web host: thegreenwebfoundation.org

RAISE AWARENESS

EFFICIENCY

— Agency Spotter

ASK COMPANIES TO SWITCHLET THEM KNOW CLEAN ENERGY

IS A CUSTOMER PRIORITY

CLICK CLEAN SCORECARD

ACTUAL WEBSITE EMISSIONS:HOW TO CALCULATE THEM?

CLEAN UP DEVICE SUPPLY CHAINS

MORE RESOURCESLINKS, BOOKS, SOFTWARE, ETC.

CLICK CLEAN REPORT & SCORECARD

clickclean.org

SUSTAINABLE WEB DESIGN BLOG

sustainablewebdesign.org

SERVING.GREEN

SUSTAINABLE UX

sustainableux.com

bcorporation.net

DESIGNING FOR SUSTAINABILITY

THANK YOUmightybytes.com

@timfrick