Sus­tain­able Web Design

Sus­tain­able websites can reduce energy con­sump­tion and CO2 emissions through efficient design, lean codes, CO2-reduced hosting and long-lasting page design. How can sus­tain­able web design be put into effect?

Internet use is now re­spons­ible for the same level of CO2 emissions as global air traffic and accounts for around ten percent of global elec­tri­city con­sump­tion. Diesel vehicles, aero­planes, and cruises easily spring to mind when it comes to en­vir­on­ment­al pollution, but we ought to consider smart­phone and computer use in addition when it comes to our carbon footprint.

The main reason for the Internet’s high energy re­quire­ments are the servers in data centres around the world, whose power con­sump­tion and cooling generate two to four percent of global CO2 emissions each year. But ul­ti­mately, websites also play a role: the more data a website consumes, the higher its power con­sump­tion. A simple website, for example, generates around 1.76 grams of CO2 per view. 20,000 views are already 352 kilograms of CO2.

It is therefore more than ap­pro­pri­ate that IT companies and de­velopers promote en­vir­on­ment­al pro­tec­tion and sus­tain­ab­il­ity. This can be achieved through sus­tain­able web design (also known as green web design).

Whether it’s a pro­fes­sion­al website for artists or busi­nesses, a personal blog, or a private website as a hobby, sus­tain­able web design offers many ad­vant­ages from an en­vir­on­ment­al per­spect­ive as well as for per­form­ance and repu­ta­tion reasons.

For example:

• Better per­form­ance via better loading times: The success of a website depends, among other things, on the loading time. If a page takes longer than three seconds to load, half of the visitors have already moved on. A sus­tain­able website often loads faster and is more pleasant to use. Reasons include reduced resource con­sump­tion, lean code, and smaller data sizes due to less CSS, JavaS­cript elements, com­pressed images, and videos. Faster load times and lower power con­sump­tion in turn mean more cost-effective energy man­age­ment.
• SEO op­tim­isa­tion via better ranking: A fast page loading speed and a user-friendly design can also have a positive influence on search engine rankings. Indeed, both are among the most important Google ranking factors. For this reason, sus­tain­able web design is also important for search engine op­tim­isa­tion (SEO).
• Positive branding: For companies it is important to think about sus­tain­ab­il­ity strategies in addition to im­ple­ment­ing them for customers in the form of Green Marketing. This includes green web design, which can be displayed on your website and thus ensures a better, en­vir­on­ment­ally conscious brand and corporate per­cep­tion.
• En­vir­on­ment­al pro­tec­tion and resource con­ser­va­tion: Efficient websites with long-lasting, sus­tain­able design not only have a positive impact on visitor numbers and business success, but also on the en­vir­on­ment. Less power con­sump­tion through sus­tain­able websites and green hosting with green power mean less CO2 emissions and thus a con­tri­bu­tion to more sus­tain­ab­il­ity.

The word `sus­tain­ab­il­ity´ is a buzzword in all areas of society – and we often see signs of sus­tain­ab­il­ity in business in the form of cer­ti­fic­ates and seals of approval. While most people can visualise what sus­tain­able ag­ri­cul­ture, waste reduction, and emission-free traffic look like, sus­tain­able web design remains a bit of a head-scratcher. The question with green web design is: What does a sus­tain­able website even look like? Below, we’ll present four points that will help you un­der­stand and use sus­tain­able web design.

For more sus­tain­ab­il­ity through energy- and data-saving web de­vel­op­ment, it comes down to three points:

• Avoid un­ne­ces­sary data con­sump­tion
• Provide an efficient page ar­chi­tec­ture
• Use only media data with added value

Images, thumb­nails, videos, style elements, ad­vert­ising banners and animated page areas in par­tic­u­lar use a lot of data, increase energy con­sump­tion and con­sequently increase emissions. Instead of over­load­ing pages, use ap­pro­pri­ate tools, compress images, and offer high-res­ol­u­tion video quality as an option rather than default. In addition, check which mul­ti­me­dia elements offer any added value to your site visitors at all.

Further energy-saving green web design tips and tricks include:

• Keep page nav­ig­a­tion lean
• Use locally installed fonts
• Clean Code / Green Coding
• Compress CSS
• Lazy Loading

Sus­tain­ab­il­ity also means dur­ab­il­ity. A website that has a timeless and uni­ver­sally design — and does not follow short-lived fashion and design trends — ages more slowly and reduces the effort required for redesign and revision. This not only saves on staffing costs, but also elec­tri­city costs for time-consuming re­launches. Min­im­al­ist elegance with a clear, pragmatic structure and a long-term classic aesthetic is a sensible step towards green web design.

According to the Guardian, the internet produces 300 million tons of CO2 per year, a quarter of which is emitted by data centres. That’s a stag­ger­ing number, so if you want to offer a sus­tain­able website, you should also think about the power con­sump­tion of the servers in web hosting. Green Hosting is the term used for hosting servers and data centres that are powered by elec­tri­city from renewable sources. So, as a website owner, pay attention to whether Green Hosting is offered or used by your host.

Green IT in turn, focuses not only on energy supply, but also on sus­tain­able and holistic pro­duc­tion and provision, smart IT use, and proper disposal of IT products.

You can recognise providers with green IT and green hosting strategies as follows:

• Use of green elec­tri­city for server operation
• Proper disposal or recycling of old hardware
• Use of hardware with eco-cer­ti­fic­ates/labels
• Certified energy man­age­ment
• Certified reduction of CO2 emissions
• Promotion of en­vir­on­ment­al pro­tec­tion projects
• In­tel­li­gent in­fra­struc­tures (e.g. through vir­tu­al­ized and cent­ral­ized services)

Lean, clear code supports sus­tain­able web design by ensuring less data con­sump­tion and less effort in main­tain­ing code. Efficient pro­gram­ming can compress scripts such as CSS and JavaS­cript and avoid un­ne­ces­sar­ily large data transfers during server com­mu­nic­a­tion. Caching — storing data in cache memory — can also be improved to prevent un­ne­ces­sary data transfers. The more efficient and resource-saving al­gorithms and codes are, the more energy-saving and en­vir­on­ment­ally friendly the website will be.

Tools to check the sus­tain­ab­il­ity and func­tion­al­ity of code include re­fact­or­ing tools that check changes and replace obsolete code elements with new ones. There are also veri­fic­a­tion tools that check codes for their intended behavior, spot errors, and fa­cil­it­ate in­teg­ra­tions. By keeping your code as clear and concise as possible, you’ll prevent code smell and code rot (obsolete, useless code elements) in the long run, not only in­creas­ing code ef­fi­ciency but also improving your website’s carbon footprint.