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