Content area
Full text
1. Introduction
The current trend of the rapid spread of smartphones and tablet devices has made it necessary for web developers to create web pages with UIs viewable on multiple devices. The approach to solving this problem is to create responsive designs that adapt to various environments based on information such as screen size and window size. This method eliminates the need for developing different websites for every device on the market. However, creating responsive layouts that accommodate to different device size requires deep expertise in HTML and CSS.
Usual implementation techniques include using flexible grids and images, where the sizing of elements is done using relative units instead of absolute ones and CSS3 media queries where different styles can be applied for various device sizes. Numerous libraries and frameworks, such as Bootstrap[1] and Foundation[2], exist for supporting developers build responsive designs. The frameworks provide CSS rules for an initial set of standard and reusable layouts, typography, forms, buttons, navigation and other user interface components.
For many years, SuperSQL[3] (Toyama, 1998) has been developed as an extension of SQL. SuperSQL can be used to generate various kinds of structured documents such as HTML, XML, PDF, etc. based on the contents of a relational database. HTML generation using SuperSQL is designed so that it can reduce the workload and the amount of code needed to develop web pages that use data from databases. Especially, the mobile web application generation feature (Goto and Toyama, 2016) enables developers to easily create web applications fit for small-screen devices, while drastically reducing the code amount compared to using languages and methods such as PHP and Ruby on Rails. However, this feature is focused on creating web applications fit for devices with small screens and is not made for creating application fit for multiple device sizes.
This paper introduces a feature for generating responsive web pages that we added to the conventional SuperSQL system. In addition, we propose the mechanism for an automatic responsive layout generation by using the features of SuperSQL syntax rules, which can describe an intention of a layout structure directly. These features bring the methodology of the Bootstrap framework to the SuperSQL and enable the creation of responsive web pages with much less effort compared to the...