New Technique Checks Web Page Layouts with Computer Vision Algorithms

Internet access has become available on many devices, ranging from three inch smartphones, tablets, car entertainment systems, TVs, to PCs with extra-large LCD screens. Testing the appearance of Web pages for a variety formats, however, has turned into an extremely tedious task. The problem is simple: each browser typically renders the same page differently, so Web designers need to inspect the final layout with several browser versions such as the Internet Explorer, Firefox, or Google Chrome, to name just a few, on several operating systems. Clearly such manual testing has become impractical, even for small Web sites.

A novel software technique is about to revolutionize the quality assurance on the Web. It automates the comparison of HTML pages across many browsers and a diverse range of formats. “This provides web designers with an extremely useful tool which allows them to check newly developed webpages for consistency in presentation in a range of browser and display configurations”, says the TLB Innovation Manager, Dr Hubert Siller.  The Technologie-Lizenz-Büro (TLB) GmbH has managed the patenting process for this unique innovation and is now in charge of its commercialization.

Traditionally, most tools have focused on analyzing HTML source code syntax to infer how browsers might render a Web page. However, they have all failed in practice to produce metrics that Web designers typically need. HTML code that is syntactically complying with all the relevant World Wide Web Consortium (W3C) standards might still lead to widely differing layouts – pictures might be slightly shifted, thus influencing text wrapping; fonts and menus layouts might vary; or some elements might not be displayed at all and instead be substituted by empty boxes. Web standards tolerate this kind of freedom, so it’s up to the Web developers to visually inspect each page for all combinations of browsers, screen resolutions, and operating systems. This is overwhelming for a large number of Web pages and leads to unsystematic intuitive testing in practice.

Dr. Victor Pankratius, a computer scientist, has developed a testing approach that automates and simplifies this examination greatly.  Back in 2005 at the Karlsruhe Institute of Technology, Pankratius developed a software solution to solve this problem.  Pankratius currently lives in the USA and conducts research at the renowned MIT in Cambridge, Massachusetts, where he and his team advance the frontiers of scientific software and parallel computing in astroinformatics. In 2013, the US patent office issued the patent no. 8,478,041 that covered his invention. This patented methodology has continued to gain in significance in today’s Internet environment due to an ever-increasing diversity of formats and representations of content.

The Technologie-Linzenz-Büro (TLB) GmbH is currently looking for licensees who wish enhance their portfolio with this innovative technique and offer services to web designers and developers.  The business model is simple, but highly effective for all parties involved: Web designers and application developers send the HTML code and related content to a service provider who will assume the testing responsibility for all popular browser/display combinations.  In a first step, screen shots from different browser and format combinations are automatically superimposed and compared. Relevant differences are highlighted in color to alert the web designer where additional work is required. To scale up for a large number of pages, the process can generate key numerical metrics that characterize the visual match and produce a ranking according to the most problematic pages. Thus, Web design becomes more efficient and the cost for creating and maintaining Web applications can be significantly reduced.

 

For further information, please contact Dr.-Ing. Hubert Siller, email: hsiller@tlb.de