Smashing Conference Short Talk on Sustainable Webdesign and coding practices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Smashing Conference Short Talk on Sustainable Webdesign and coding practices

on

  • 221 views

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 ...

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.

Statistics

Views

Total Views
221
Views on SlideShare
216
Embed Views
5

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 5

https://twitter.com 4
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Smashing Conference Short Talk on Sustainable Webdesign and coding practices Presentation Transcript

  • 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