Browse Prior Art Database

A Method for Improving Efficiency of Web Page Measurement Disclosure Number: IPCOM000011707D
Original Publication Date: 2003-Mar-12
Included in the Prior Art Database: 2003-Mar-12
Document File: 2 page(s) / 153K

Publishing Venue



Disclosed is a simple and useful tool to enable web developers to quickly verify whether the dimension of each component in a web page is compliant to the specified standard. When developing GUI, web designer needs to meet certain standards regarding the dimension of each component it contains. An example of this standard is's v11 standard for internet pages. To meet the standard, web designer needs to ensure that all components in each page adhere to the specified dimensions. Using programs such as pixel ruler to measure each component in every page is very tedious and time consuming. The conventional measurement method using pixel ruler is to set the pixel ruler in vertical mode, position the ruler and then measure the height of the component. To measure its weight, the user will need to set the pixel ruler in horizontal mode, position the ruler and then take its measurement. This operation needs to be done for each and every component and/or areas to be measured. In addition to this, differences on how certain browser displays each component add another complexity to this problem, since web designer has to repeat the same measurement in different browsers. The core idea of the invention is to eliminate the process of moving the pixel ruler around for each measurement in every page. Typically, a web page comprises of a common layout and its specific content. The elements in the content include image, buttons, links, etc. By using the tool, developer can define the rules to be applied in common layout for all the pages as well as to elements in the content. Grid lines representing the common layout rules will be displayed on the browser screen, enabling the developer to justify whether the current page meets the standard. These grid lines can be regenerated when the browser goes to the next page. If gaps are detected between the grid line and the actual page layout, web designer can know the offset by specifying the start and end points of the gaps. The same rule applies to element in the content except that additional information, e.g. the type of the content, needs to be specified. In all cases, web designer does not need to move around the pixel ruler and repeat the same measurement on every page. Additionally, the tool will generate a report containing all the measurements (in a file) and allow web designer to do correction after all the measurements have been done.

This text was extracted from a PDF file.
At least one non-text object (such as an image or picture) has been suppressed.
This is the abbreviated version, containing approximately 86% of the total text.

Page 1 of 2

A Method for Improving Efficiency of Web Page Measurement

A web page consists of several areas. For example, as specified in the v11 standard as follows:

Figure 1. page layout / column grid standard

The process flow of the tool is as follows:

a. Specify the rules:

Web designer will specify the page layout information in the tool to allow grid lines to be displayed in each page. For instance, 250 pixel from the left. For element information, web designer will have to provide the type and dimension, e.g. width is 443 pixels, and height is 33 pixels.

b. Running the tool:

Once the rules have been defined in the tool, web designer will open the browser and go to the page to be checked. At this point, user can invoke the tool to display the grid lines. E.g.


[This page contains 1 picture or other non-text object]

Page 2 of 2

Figure 2. Grid lines displayed in the browser

By having the grid lines to appear in the browser~fs window, web designer can easily justify whether each area is compliant to the standard. The tool will also allow web designer to check any distance in terms of pixels between any two points on the screen. For element checking, web designer has to first specify its type with the dimension information before the tool can tell whether it is compliant to the dimension in the defined rules.

c. Viewing the report

All the functions executed with its output will be output in a report file. This allow web designer to perform corrective acti...