a presentation by
June 16, 2014
@ambersiscoe
Sustainable
Web Design &
Coding
Amber Vasquez
Who is Mightybytes?
The big problem we’re facing:
THE INTERNET IS NOT A GREEN MEDIUM
Via: MNN
The world’s data centers will surpass the airline industry as a greenhouse
gas polluter by 2020.
Source: New York Times
Pi...
As of 2011, only about 19% of electricity generated in the world and 12.7%
of energy generated in the United States comes ...
Because you want your users to have an efficient site experience
and deliver a great product to your client.
Why should yo...
Because efficient sites = happy customers = conversions.
Why should your clients care?
a presentation by
What is Sustainable
Web Design?
So, what is Sustainable Web Design?
Core Components
• Design Techniques
• User Testing
• Green Hosting
A set of practices ...
a presentation by
Design
Techniques
Design Techniques Overview
• Use carousels
• Use share buttons and social plugins
• Use Flash
Sustainable design is access...
Design Techniques > Mobile First!
Mobile traffic makes up nearly 30% of all internet traffic - and it’s
growing all the ti...
Design Techniques > Use Sprites
Sprites are useful to sustainability and page speed because it reduces
the number of HTTP ...
Design Techniques > Compress &
Optimize Images
One quick and easy step
that you can take to
minimize a website’s carbon
fo...
Design Techniques > Avoid Carousels
From usability issues to massive increases in bandwidth, carousels
often come packaged...
Design Techniques > Limit Share Buttons &
Social Plugins
Yes, widgets and plug-ins can save you time as a designer, but th...
Design Techniques > Avoid Flash
For the most part, everything that can be done in Flash can be done
in HTML instead.
a presentation by
User
Testing
User Testing
• A/B testing
• 5 second test
• Site architecture testing
• Prototyping
Testing your site designs & prototype...
a presentation by
Green
Hosting
Green Hosting
The servers that host your website require power 24 hours a day, so
the single biggest positive impact you c...
Go forth and conquer the web!
a presentation by
June 16, 2014
@ambersiscoe
Thank you
Smashing!
Amber Vasquez
Upcoming SlideShare
Loading in …5
×

Smashing Conference Short Talk on Sustainable Webdesign and coding practices

604 views

Published on

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.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
604
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Smashing Conference Short Talk on Sustainable Webdesign and coding practices

  1. 1. a presentation by June 16, 2014 @ambersiscoe Sustainable Web Design & Coding Amber Vasquez
  2. 2. Who is Mightybytes?
  3. 3. The big problem we’re facing: THE INTERNET IS NOT A GREEN MEDIUM Via: MNN
  4. 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. 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. 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. 7. Because efficient sites = happy customers = conversions. Why should your clients care?
  8. 8. a presentation by What is Sustainable Web Design?
  9. 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. 10. a presentation by Design Techniques
  11. 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. 12. Design Techniques > Mobile First! Mobile traffic makes up nearly 30% of all internet traffic - and it’s growing all the time.
  13. 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. 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. 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. 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. 17. Design Techniques > Avoid Flash For the most part, everything that can be done in Flash can be done in HTML instead.
  18. 18. a presentation by User Testing
  19. 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. 20. a presentation by Green Hosting
  21. 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. 22. Go forth and conquer the web!
  23. 23. a presentation by June 16, 2014 @ambersiscoe Thank you Smashing! Amber Vasquez

×