Smashing Conference Short Talk on Sustainable Webdesign and coding practices
23
a presentation by June 16, 2014 @ambersiscoe Sustainable Web Design & Coding Amber Vasquez
-
Upload
mightybytes -
Category
Design
-
view
103 -
download
0
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 of Smashing Conference Short Talk on Sustainable Webdesign and coding practices
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
