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