An Extension of the Web-Page Layout Optimization Method for Multimodal Browsing Sizes

Recently, Web-page browsings at various terminals have become popular due to deployments of small mobile devices and large flat displays. To deal with this recent trend, we have proposed a Web-page layout optimization method for multimodal browsing sizes. It dynamically changes box locations and font sizes by switching CSS files for different browsing sizes, so that the main content can be accessed without the screen scroll operation even at a small size whereas the blank space is avoided at a large size. However, in this method, any box location must be specified by the absolute value in HTML/CSS files, which is not easy under a variety of browsing sizes. In this paper, we propose the extension of this method for flexible Web-page designs using the normal flow, the liquid layout, and the float property, where the browser automatically arranges the boxes. Using Ajax, the box location and the font size is switched to fit to the current browsing size by our method. The effectiveness of our proposal is verified through a usability test using sample Web-pages at small sizes.