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­spon­si­ble for the same level of CO2 emissions as global air traffic and accounts for around ten percent of global elec­tric­i­ty con­sump­tion. Diesel vehicles, airplanes, and cruises easily spring to mind when it comes to en­vi­ron­men­tal 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 centers around the world, whose power con­sump­tion and cooling generate two to four percent of global CO2 emissions each year. But ul­ti­mate­ly, 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­vel­op­ers promote en­vi­ron­men­tal pro­tec­tion and sus­tain­abil­i­ty. 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­ness­es, a personal blog, or a private website as a hobby, sus­tain­able web design offers many ad­van­tages from an en­vi­ron­men­tal per­spec­tive as well as for per­for­mance and rep­u­ta­tion reasons.

For example:

• Better per­for­mance 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, JavaScript 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­ti­miza­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­ti­miza­tion (SEO).
• Positive branding: For companies it is important to think about sus­tain­abil­i­ty strate­gies 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­vi­ron­men­tal­ly conscious brand and corporate per­cep­tion.
• En­vi­ron­men­tal 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­vi­ron­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­abil­i­ty.

The word “sus­tain­abil­i­ty” is a buzzword in all areas of society – and we often see signs of sus­tain­abil­i­ty in business in the form of cer­tifi­cates and seals of approval. While most people can visualize what sus­tain­able agri­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­abil­i­ty through energy- and data-saving web de­vel­op­ment, it comes down to three points:

• Avoid un­nec­es­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­ver­tis­ing banners and animated page areas in par­tic­u­lar use a lot of data, increase energy con­sump­tion and con­se­quent­ly increase emissions. Instead of over­load­ing pages, use ap­pro­pri­ate tools, compress images, and offer high-res­o­lu­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­i­ga­tion lean
• Use locally installed fonts
• Clean Code / Green Coding
• Compress CSS
• Lazy Loading

Sus­tain­abil­i­ty also means dura­bil­i­ty. A website that has a timeless and uni­ver­sal­ly 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­tric­i­ty costs for time-consuming re­launch­es. Min­i­mal­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 centers. 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 centers that are powered by elec­tric­i­ty 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 recognize providers with green IT and green hosting strate­gies as follows:

• Use of green elec­tric­i­ty for server operation
• Proper disposal or recycling of old hardware
• Use of hardware with eco-cer­tifi­cates/labels
• Certified energy man­age­ment
• Certified reduction of CO2 emissions
• Promotion of en­vi­ron­men­tal pro­tec­tion projects
• In­tel­li­gent in­fra­struc­tures (e.g. through vir­tu­al­ized and cen­tral­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 JavaScript and avoid un­nec­es­sar­i­ly large data transfers during server com­mu­ni­ca­tion. Caching — storing data in cache memory — can also be improved to prevent un­nec­es­sary data transfers. The more efficient and resource-saving al­go­rithms and codes are, the more energy-saving and en­vi­ron­men­tal­ly friendly the website will be.

Tools to check the sus­tain­abil­i­ty and func­tion­al­i­ty of code include refac­tor­ing tools that check changes and replace obsolete code elements with new ones. There are also ver­i­fi­ca­tion tools that check codes for their intended behavior, spot errors, and fa­cil­i­tate in­te­gra­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­cien­cy but also improving your website’s carbon footprint.