Green WebDesign improve your carbone impact

& your user experience

Nathalie Rolland

Web Project Manager

@Kinaïa Agency

committed to sustainable development

Source : The Cloud begin with Coal ©Digital Power Group

And we still waste energy and time

23 millions GB of useless data are downloaded

each month source GTMétrix

What can we do ?

Choose a webhost committed in sustainable development

Work differently to make our websites use less energy (server + devices)

Explain this to contributors !

The webhost choice

A webhost committed in sustainable developpement

Less energy through :

• The infrastructure – Green building

– Less cooling

• Low energy servers

• Our webhost needs 40% energy less than a standart data center

Green design

Green design is about

…how to decrease energy consumption of computers, laptops, touch pads, mobile phones

and servers

3 ways to decrease energy consumption

The weight and number of files loaded on a page

The number of php requests

The number of javascript events to get less CPU used

What is already well done ?

Performance, not for green but for User experience

Search Engine Optimisation (SEO)

Still improvements to make

On mobile phones, users

hate waiting

hate getting no answer

hate when their batteries are getting to low on their mobile phones, touch pads or laptops

Image files on a diet

with Smushit

Think Mobile First and give the good picture to the good device

The srcset attribut <img src="images/01-small.jpg "

srcset="images/01-small.jpg 300w,

images/01-medium.jpg 640w,

images/01-large.jpg 1024w,

images/01-extralarge.jpg 1280w"

sizes="100vw"

alt="" />

To better understand srcset attribut : (EN) http://ericportis.com/posts/2014/srcset-sizes/ http://responsiveimages.org/

And PictureFill for all browsers

CSS, Javascript and Cache

Never put inline styles or JS in the page

Minify your files

Add a cache system

We love hate plugins

Too many requests

Less requests

Think about what will not change

Try to make the page close to an HTML Page with the less requests possible

Educate contributors

Never forget to educate contributors

So easy to add beautiful (heavy) pictures

So easy to add a plugin not green at all

So easy to add everything without thinking about the consequences.

Images files

Use resized image files

Don’t resize them in the editor…

Explain and make it easier to do

Show them pictures really long to load

Explain that performance has an impact on Search Engine Optimisation

Create the image files’ formats that fit their website

The editor matter

Styles

<p style="font-color: pink; font-family: comic

sans ms ; font-size: 30px";>

Nice links Read the documentation Download the documentation (PDF)

How to incorporate Green design in your process ?

Make your team understands why it’s important

Look for solutions with your team

Make a ToDoList with these solutions

Educate your contributors…

Thank you ! @nroll82

@Agence_Kinaia www.kinaia.fr