Short talk I gave at Smashing Conference in NYC on June 16th, 2014 on sustainable web design and coding practices. It was a 15 minute talk on how designers and coders can start to implement these practices in a practical and fast way to have the greatest impact on user experience, page speed, load time and thus make their sites more earth friendly.

1. a presentation by
June 16, 2014
@ambersiscoe
Sustainable
Web Design &
Coding
Amber Vasquez

2. Who is Mightybytes?

3. The big problem we’re facing:
THE INTERNET IS NOT A GREEN MEDIUM
Via: MNN

4. The world’s data centers will surpass the airline industry as a greenhouse
gas polluter by 2020.
Source: New York Times
Pixels are powered by electricity

5. 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 electricity sources are not renewable
Source: US Energy Information Administration

6. Because you want your users to have an efficient site experience
and deliver a great product to your client.
Why should you care?

7. Because efficient sites = happy customers = conversions.
Why should your clients care?

8. a presentation by
What is Sustainable
Web Design?

9. So, what is Sustainable Web Design?
Core Components
• Design Techniques
• User Testing
• Green Hosting
A set of practices defining how to build websites that meet present
and future performance and energy efficiency standards.

10. a presentation by
Design
Techniques

11. Design Techniques Overview
• Use carousels
• Use share buttons and social plugins
• Use Flash
Sustainable design is accessible across platforms and efficient as well.
• Design Mobile First
• Use Sprites
• Compress/optimize images
Do: Don’t:

12. Design Techniques > Mobile First!
Mobile traffic makes up nearly 30% of all internet traffic - and it’s
growing all the time.

13. Design Techniques > Use Sprites
Sprites are useful to sustainability and page speed because it reduces
the number of HTTP requests needed to load that specific page.
Via: NCCGroup

14. Design Techniques > Compress &
Optimize Images
One quick and easy step
that you can take to
minimize a website’s carbon
footprint is to optimize
images, making them
smaller and faster to load.

15. Design Techniques > Avoid Carousels
From usability issues to massive increases in bandwidth, carousels
often come packaged with problems.
The Grid Approach
A Single, Primary Banner
Equivalent Buckets

16. Design Techniques > Limit Share Buttons &
Social Plugins
Yes, widgets and plug-ins can save you time as a designer, but the
costs to the user experience can be detrimental.
Load Time 1.38s
with share icons
Load Time 0.24s
without share icons
Via: Stack Overflow

17. Design Techniques > Avoid Flash
For the most part, everything that can be done in Flash can be done
in HTML instead.

18. a presentation by
User
Testing

19. User Testing
• A/B testing
• 5 second test
• Site architecture testing
• Prototyping
Testing your site designs & prototypes, and using expected design
patterns all help you create a design that gets your users to the
content, and creates a more efficient site.

20. a presentation by
Green
Hosting

21. Green Hosting
The servers that host your website require power 24 hours a day, so
the single biggest positive impact you can make through your website
is to host it with a provider that runs on 100% renewable energy.
• Canvas Dreams – 100% wind powered and a B Corporation
• AISO.net – 100% solar energy powered
• Host Gator – Buys Renewable Energy Certificates (REC)

22. Go forth and conquer the web!

23. a presentation by
June 16, 2014
@ambersiscoe
Thank you
Smashing!
Amber Vasquez