Analysis and Principles of Green UI Design for Web Portals | Open Access Journals

ISSN ONLINE(2320-9801) PRINT (2320-9798)

Analysis and Principles of Green UI Design for Web Portals

S.Vetrivel1, S.Pandikumar2, M.Athigopal2
  1. Associate Professor, Dept of Comp. Science, Subbalakshmi Lakshmipathy College of Science, Tamilnadu, India
  2. Asst. Prof, Dept of Comp. Science, Subbalakshmi Lakshmipathy College of Science, Tamilnadu, India
Related article at Pubmed, Scholar Google

Visit for more related articles at International Journal of Innovative Research in Computer and Communication Engineering


In the modern world technologies are the backbone of human life. But most of the technologies make impact of the society and environment. Electricity is the core problem today because entire electrical & electronic equipments and all the technologies operated by electric power, but we have limited source to produce electricity and even they arise huge environmental problem also. Over 81% of power produced by coal, oil and natural gas and it releases huge amount of CO2 in the atmosphere and it outlets global warming and climate change. So the people should aware of electricity consumption in all the field and technologies especially the IT people. This paper proposes architecture of Green Web Portal; to minimize the power consumption of web through effective design & use of website and its infrastructures. Green web gives principles and guidelines to administrators, developers and users to make energy efficient web. The main objective of this paper is to reduce the direct and indirect power consumption of internet and web technologies.


Green Web, Green IT, Web Design, Environmental impact, CO2 Emission, G-Palette.


Global Warming, Green House effects and sustainable development are key challenges of the 21st century. Power consumption and reducing CO2 gas emission becomes more and more important to all kind of people, because of rising energy costs and better ecological awareness. Hence, today many products are labeled with an eco-label to show that they are energy efficient, climate friendly or environment-friendly. In the European Union many domestic appliances and light bulbs must have an Energy Label that displays energy efficiency when they are offered for sale. Of course, computers and peripheral equipments alike are today labeled with eco-labels (energy star) which indicate that these products meet strict energy efficiency guidelines. These were all about hardware. But, is power consumption only caused by hardware? Or is it rather caused by software that offers services, which consume processor time and generate data transfer and thus are the root cause of power consumption?
This is the right time to considering software as the root cause of energy consumption; it is, in addition to hardware aspects, logical to examine how software and its offered services can contribute to energy efficiency. Especially the internet is tremendously occupying IT industry. In 2012, 2.1 billion internet users are worldwide, and internet users releasing around 300 million tonnes of CO2 a year [1].
Present web infrastructure, the data centres and network devices consume more electric power due to web traffic and data storage. Due to existing architecture, every year the internet communication devices consumes 32 TW/hr (Tera Watts per hour) and the data centre’s consume Data centers consume about 46 TeraWatt/hours in 2006 and it set to rise to 93 TW/hr by 2020 [1]. According to UK government figures, 1kWh produces 0.51kg of carbon dioxide (CO2), and 1,960kWh produces 1 tonne of CO2 [2]. Even there is minimum possibilities are there to produce electricity without CO2 emission but usage of electricity is steadily increasing every year. SO unaware of environmental impact of IT and CO2 emission, the existing internet architecture outlet more internet traffic and it consumes more power.


Dick, Markus; Kern, Eva; Drangmeister, Jakob; Naumann, Stefan; Johann, Timo et al. [3-5] have measured energy consumption of the software’s induced in personal computers and servers. They propose sustainable life cycle model for green software and analyze the user perspective of green IT and green software development. Adel Noureddine, Aurelien Bourdon, Romain Rouvoy , Lionel Seinturier et al [6] propose POWER API to measure which estimates the power consumption of processes according to different dimensions like CPU, Memory, OS and network. This preliminary study is based on an empirical evaluation of eight implementations of the Towers of Hanoi problem. Z. Li, R. Grosu, K. Muppalla, S.A. Smolka, S.D. Stoller, and E. Zadok et al [7] present a model-discovery methodology for energy-aware computing systems and they achieves high prediction accuracy through MIMO and SISO models.


Green web describes the art of developing, designing, maintaining, administrating and using a website in such a manner that direct and indirect energy consumption within the complete life cycle of a website is reduced. The objective of Green web is to minimizes CO2 emission and save environment. This green web engineering mainly focus to enhance the efficiency of
• Speed
• Storage and content size
Those three are the backbone of internet. The speed and storage is already in focus but most of the web developers not consider energy efficiency in GUI development but the GUI consumes reasonable amount of energy during web access.

Architecture of Green Web

This architecture is not intended to be an entire new web development process model nor is it exhaustive. The purpose of this architecture is to identify typical activities and roles to allow the proper assignment of principles and suggestions, which help to reduce energy consumption that is caused by a website.
The proposed architecture gives the responsibilities to administrators, developers and users, and, categorizes the web development into three phases (Fig 1). These are
• Analyse Phase
• Development Phase
• Usage Phase
The Analyse Phase of this model comprises the activities like planning and analyzing requirements. The development phase has developing the web application, creating the web design, creating the content and setting up the runtime environment. These activities are executed in parallel manner. After these, the website is launched and the Usage Phase is entered. The Usage Phase requires generally a maintenance activity which contains possibly all four development activities. This paper suggests guidelines to develop and maintain a sustainable website.


• Configure HTTP caching
• Use HTTP compression
• Host websites with renewable energy
• Apply new technologies like cloud computing, server virtualization etc.

Configuring HTTP caching

The caching capabilities of HTTP are designed to reduce the amount of HTTP requests and transferred data volume significantly. Content that is dynamically generated by scripts or programs on the server side is usually not treated to be cacheable and therefore not tagged with caching metadata by default. However, there may be cases where dynamic content changes less frequently than once for each request. Therefore caching it may be possible without the risk of presenting obsolete data to visitors. In our opinion the following tasks are important:
• retrieving presented content dynamically out of content repositories
• presenting dynamically generated charts as images
Concerning the first point, well-engineered content management systems may be configured to use some kind of caching strategy and to support Expires and Last-Modified headers. Hence, we focus on websites or web applications that are not run via a Content Management System (CMS), but are implemented directly in scripts and programs. For instance, assuming a web based application that collects power meter readings of a family home, calculates its power consumption daily and presents it in charts on a website, the Last-Modified date can be set to the date and time where the last meter reading has been inserted into the database. We recommend that web developers implement support for Expires and Last-Modified headers in their web programs and scripts whenever possible, to decrease the transferred data volume and thus power consumption.

HTTP Compression

Today, many modern web browsers support any one of compression. Compression reduces not only response size and thus transfer time, but also power consumption as a result of the smaller size and shorter transfer times. Web browsers usually support the GZIP compression format or DEFLATE. Both formats are especially named in the HTTP/1.1 specification. The Accept-Encoding header is used by web browsers to indicate which content encodings they support. A web server may compress the content using one of the compression methods listed by the browser and must notify the browser within the Content- Encoding response header which compression method is used. By this compression method reasonable size can reduced (table 1)


This paper gives the guideline to the developers to build energy efficient website. The guidelines are
• Use server-side sniffing
• Convert table layout to CSS layout
• Reduce Domain Name System (DNS) lookups to reduce the overhead of DNS delay by splitting lookups between two to four unique hostnames.
• Make Ajax cacheable and small to avoid unnecessary HTTP requests
• Minimize initial display time
• Minimize HTTP requests
• Minimize JavaScript
• Minimize and optimize CSS
• Make JavaScript and CSS files external
• Optimize graphical element and logos
• Resize and optimize images
• Optimize photographs
• Optimize video and animations

Server Side Sniffing

Browser sniffing is one area where JavaScript is in widespread use. To minimize the JavaScript overhead that your users must download, you can substitute server-side or PHP and JSP sniffing instead. The Server-side sniffing or hybrid sniffing to detect a wide variety of parameters, including Flash, screen size, connection speed, cookies, and browser and software versions and transfer content based on parameters.

Minimize JavaScript

JavaScript is used widely on websites to enhance interactivity. JavaScript code fragments are often embedded directly in HTML or in specific JavaScript files. The former increases the response size, whereas the latter increases the amount of HTTP requests especially when more than one JavaScript file is used in a website. To minimize HTML content size we suggest externalizing any JavaScript code fragments embedded in HTML into special JavaScript files. On the one hand, this results in an extra HTTP request, but on the other hand it
1. enables browsers to cache these files and to provide them in subsequent requests without calling the origin server
2. reduces the HTML download size especially when the HTML content cannot be cached because it must be recalculated for each request

Minimize and Optimize CSS

Minimizing and optimizing CSS files offers many possibilities to reduce HTTP requests. Savings from 40% to 60% are possible, if HTML or JavaScript operation is implemented with CSS. Through a layout, which is designed with CSS, it is possible to save 25% to 50% of HTML file size.
CSS (Cascading Style Sheet) provides grouping multiple selectors with the same declaration and grouping multiple declarations with the same selector in one rule set. Duplicate element declarations can be avoided through the use of inheritance. Some separated property declarations can be combined in one single declaration. Margin, border, font, background, list-style and outline are special shorthand notations which combine separate single properties. Names of classes or IDs should be short or abbreviated. Positioning CSS in the top (head) and JavaScript at the bottom (body) of your HTML enables progressive rendering. Mispositioned CSS or JavaScript can delay the rendering of content in browsers.


GUI plays vital role in energy consumption because every color and controls requires different level of power. So the developer should give more attention to design GUI.

Optimize Graphical Elements and Logos

In recent, 54% of an average website is high graphical site [12]. Because of this, optimizing images is a promising way to minimize HTTP responses. Typically a logo is not a photograph or chart and in comparison to these smaller, so it can be saved as a GIF or PNG file. PNG has a better compression algorithm and especially flat-color images are 10% to 30% smaller than in GIF [12]

Optimize Photographs

The file size of a photograph is mostly greater than that of a logo. Consequently, there are more options to reduce the file size. Special techniques to reduce the file size are
• Contextually crop to show only the most relevant parts of the image
• Resize images to the exact pixel dimensions.
• Combine images to save HTTP requests, and optionally create a usemap or CSS sprite
• Blur backgrounds for JPEG.
• Use CSS borders or backgrounds instead of embedding borders in images
• Replace GIFs and JPEGs with PNG images where appropriate
• Specify image size in HTML with width and height attributes

Optimize Videos and Animations

Multimedia files like videos account for 98.6% of the transferred bytes in the Internet [12]. The majority of multimedia traffic comes from files that are larger than 1 MB. More than 87% of all streaming media is abandoned by users in the first 10 seconds, however, wasting up to 20% of server bandwidth [11]. So, although videos account for a small percentage of requests, they make up the majority of the traffic on the Web. In 1997, 90% of online videos were less than 45 seconds in length (Figure 2) [8]. In 2005, the median video was about 120 seconds long [9]. By 2007, the median video was 192.6 seconds in duration [10]. The median bit rate of web videos grew from 200 Kbps in 2005 to 328 Kbps on YouTube in 2007. So, by late 2007, the median video weighed in at more than 63 MB in file size. Hence, minimizing multimedia files can reduce traffic.
Basic techniques to optimize are editing with special web settings, using special codec’s, reducing the frame rate and using professional equipment. Here, non-optimized images and too many animation frames are the problems. The pictures should be optimized with image processing programs before they are imported in Flash. Animations should have a reduced frame rate [12].

Compressing videos for the Web

After getting the video prepared and adjusted, you can compress it. People are more accepting of temporal compression (over time) than spatial compression (frame per frame). One must compress the size of one’s video so that it can be successfully streamed or downloaded to one’s target audience. This process is called encoding in the industry, and it is full of hard, interdependent decisions.


Display unit (LCD or CRT or LED) is the major electricity consumer of the computer. So one has to focus to reduce the power consumption of monitors by design graphical user interfaces with colors. Color is a one of the main characteristics of GUI because the monitors consume more energy when displaying certain colors. Here this paper proposes guidelines to energy consumption of colors in website design.
In practical the bright colors require more intensity than dark colors, so the bright colors consume more power in display unit ( For example whit is most expensive color and black is most economic color; it requires minimum wattage than other colors. The real time testing of power consumption using watt meter the table shows the White color takes 21.5 W/hr more energy than Black color in CRT. In LCD is requiring less energy different than CRT (Table 2).
The grayscale color also consumes reasonable but average power consumption (table 3).
In modern graphics there are millions of color are used in typical monitor settings. This paper extracts the statistics through some base solid colors. Those Colors are costly colors because they are requires average of 70 W/hr


Through the previous experimental results this paper proposes low wattage color palette called G-Palette. The GPalette colors are consuming around 2 to 3 watts less than its corresponding colors ( ts-with-emergy-c.html). The white color also is in this palette because it’s the base color and it used to derive remaining colors.
The hex codes of the proposed palettes are as follows:
• #002060(Dark blue)
• #822007 (Rusty red)
• #19472a (Forest green)
• #3d414c (Cobalt)
• #b2bbc0 (Blue grey)
• #7B870B (Olive)
• #000000 (Black)
• #ffffff (White)
The developers consider G-Palette for efficient GUI development. Here some of the comparison of solid color with GPalette wattage.


The achievement of energy efficient the user also participate in the contest. This paper gives the guidelines to the user to achieve energy efficiency. The guidelines as follows
-Configure web browser properly
• Configure large caches in web browsers
• Don’t clear caches during browser shutdown
• Use advertisement blockers, add-on and flash contents
• Use browser supporting HTTP compression
-Visualize green power status of a website
-Use renewable energy on client machines
-Use ISPs which operate data centre with renewable energy.


This paper stated the importance of energy consumption of IT industry and it proposes the guidelines and architecture of effective design of web portals. The paper has shown that substantial energy savings can be achieved by effective design, administering, using the web portal without sacrificing performance and changing the colors without loss of good visual perception. On a technical level, the paper mainly focuses to optimize speed, storage, and GUI and it’s presented three phases of development life cycle and each phase propose design principles. This again categorizes into the admin level, developer level and user level. This paper proposed a new energy efficient color palette named GPalette By designing of web portal with G-Palette colors and graphic element optimization, every portal can save up to 4-6 W/hr power on GUI.
In future these principles will extend to all kind of web applications like Green search engines, Green Mail Server, Green Social Networks etc. through this one can achieve 30%- 40% energy savings from energy consumption of entire web access.

Tables at a glance

Table icon Table icon Table icon Table icon Table icon
Table 1 Table 2 Table 3 Table 4 Table 5

Figures at a glance

Figure 1 Figure 2 Figure 3
Figure 1 Figure 2 Figure 3