smashing conference short talk on sustainable webdesign and coding practices
DESCRIPTION
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.TRANSCRIPT
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
Pixels are powered by electricity
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
Because you want your users to have an efficient site experience and deliver a great product to your client.
Why should you care?
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 defining how to build websites that meet present and future performance and energy efficiency standards.
a presentation by
Design Techniques
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:
Design Techniques > Mobile First!Mobile traffic makes up nearly 30% of all internet traffic - and it’s growing all the time.
Design Techniques > Use SpritesSprites are useful to sustainability and page speed because it reduces the number of HTTP requests needed to load that specific page.
Via: NCCGroup
Design Techniques > Compress & Optimize ImagesOne 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.
Design Techniques > Avoid CarouselsFrom usability issues to massive increases in bandwidth, carousels often come packaged with problems.The Grid Approach
A Single, Primary Banner
Equivalent Buckets
Design Techniques > Limit Share Buttons & Social PluginsYes, widgets and plug-ins can save you time as a designer, but the costs to the user experience can be detrimental.
Load Time 1.38swith share icons
Load Time 0.24swithout share icons
Via: Stack Overflow
Design Techniques > Avoid FlashFor 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 & 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.
a presentation by
Green Hosting
Green HostingThe 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)
Go forth and conquer the web!
a presentation by
June 16, 2014
@ambersiscoe
Thank you Smashing!
Amber Vasquez