Define responsive design for web-forms using layout editor

Sammanfattning: There has recently been an emergence of new devices in which users can access the web. These devices have significantly smaller screen sizes than the more common desktop. This results in that the approach to designing web content has to be changed. The approach to design web content that adapts its visual layout to different screen sizes, is referred to as Responsive Web Design. Ida Infront is a company that develops systems and solutions for informationintensive businesses. They are currently examining how to design a layout editor that can be used to define responsive design for web-forms. The purpose of this project is to design and implement a prototype of such a layout editor, which will then be evaluated by Ida Infront. The project is divided into two phases, starting out with the research process, followed by the prototype design process. In the research process, the following is examined: structure of the XML file describing web-forms, Responsive Web Design techniques and technologies appropriate for the layout editor. In the prototype design process, a layout editor prototype allowing responsive design for web-form components, is designed and implemented. The responsive design configuration is added to the web-form XML file. We found that Bootstrap is a suitable technology to define responsive design of web-forms, since placement of web-form components can be translated into a Bootstrap grid system. The resulting layout editor prototype allows responsive configuration in Bootstrap. This is done by utilising the grid system as the underlying structure for placement of web-form components. The prototype also allows configuration for each of the four Bootstrap device classifications, named xs, sm, md and lg. Position and size of webform components are stored for each Bootstrap device classification. The resulting responsive configuration is added into the existing XML file for the web-form.