This document discusses how web designers can create more sustainable websites that are environmentally friendly and have high performance. It provides tips for choosing a sustainable web host, optimizing images, minimizing file sizes and requests, educating contributors, and incorporating green design best practices into the development process. The overall goal is to decrease energy consumption from websites and improve the user experience.

1. Green WebDesign
improve your carbone impact & your user experience

2. Nathalie Rolland
Web Project Manager
@Kinaïa Agency
committed to sustainable development

4. Source : The Cloud begin with Coal ©Digital Power Group

5. And we still waste energy and time
23 millions GB
of useless data are downloaded
each month
source GTMétrix

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

7. The webhost choice

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

9. Green design

10. Green design is about
…how to decrease energy consumption of
computers, laptops, touch pads, mobile phones
and servers

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

12. What is already well done ?
Performance, not for green but for
User experience
Search Engine Optimisation (SEO)
Still improvements to make

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

14. Image files on a diet
with Smushit

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

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

17. CSS, Javascript and Cache
Never put inline styles or JS in the page
Minify your files
Add a cache system

18. We love hate plugins
Too many requests

20. Less requests
Think about what will not change
Try to make the page close to an HTML Page with the less requests possible

21. Educate contributors

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

23. Images files
Use resized image files
Don’t resize them in the editor…

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

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

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

27. Thank you !
@nroll82
@Agence_Kinaia
www.kinaia.fr