Define responsive design for web-forms using layout editor

87 Pages·2015·2.17 MB·English

DEGREE PROJECT, IN COMPUTER ENGINEERING , FIRST LEVEL
STOCKHOLM, SWEDEN 2015
Define responsive design for
web-forms using layout editor
JIMMY HYTÖNEN & ROBIN ANDERSSON
KTH ROYAL INSTITUTE OF TECHNOLOGY
INFORMATION AND COMMUNICATION AND TECHNOLOGY
Define responsive design for
web-forms using layout
editor
Jimmy Hytönen & Robin Andersson
June 23, 2015
Bachelor’s thesis
Supervisor: Fadil Galjic
Examiner: Anders Sjögren
Abstract
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.
IdaInfrontisacompanythatdevelopssystemsandsolutionsforinformation-
intensive businesses. They are currently examining how to design a layout
editor that can be used to define responsive design for web-forms. The pur-
pose of this project is to design and implement a prototype of such a layout
editor, which will then be evaluated by Ida Infront.
Theprojectisdividedintotwophases,startingoutwiththeresearchpro-
cess, followed by the prototype design process. In the research process, the
following is examined: structure of the XML file describing web-forms, Re-
sponsive 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 trans-
lated 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 compo-
nents. TheprototypealsoallowsconfigurationforeachofthefourBootstrap
device classifications, named xs, sm, md and lg. Position and size of web-
form components are stored for each Bootstrap device classification. The
resultingresponsiveconfigurationisaddedintotheexistingXMLfileforthe
web-form.
Keywords: Forms, Responsive Web Design, XML, Javascript, Gridster
Abstract
Den senaste tiden så har det uppkommit nya enheter som man kan komma
åt webben med. Dessa enheter har betydligt mindre skärmar än de mer
vanliga stationära enheterna. Det har resulterat i att sättet man designar
webbinnehåll måste ändras. Metoden att designa webbinnehåll så det an-
passarsingrafiskautformningefterolikaskärmstorlekarkallasförresponsiv
webb design.
Ida Infront är ett företag som utvecklar system och lösningar för infor-
mationsintensiva verksamheter. De undersöker just nu hur man designar
en layout editor som kan användas för att definiera responsiv design för
webb-formulär. Syftet med detta projekt är att designa och implementera
en prototyp av en sådan layout editor, som sedan kommer utvärderas av Ida
Infront.
Examensarbetet är uppdelat i två faser, det inleds med forskningsfasen
och efterföljs av prototypfasen. I forskningsfasen undersöks följande: struk-
turen i XML filen som beskriver webb-formulär, olika tekniker för responsiv
webb design och lämpliga teknologier att använda i en layout editor. I pro-
totypfasen, designas och implementeras en prototyp som gör det möjligt att
definera responsiv konfiguration för webb-formulär. Konfiguration för re-
sponsiv design läggs till i den befintliga XML filen.
Vi kom fram till att Bootstrap är en lämplig teknologi för att definera
responsiv design för webb-formulär. Eftersom placeringen av komponenter i
webb-formulär kan översättas till Bootstraps rutnät. Den resulterande lay-
out editorn gör det möjligt att definera responsiv design i Bootstrap. Detta
genomattanvändaBootstrapsrutnätsomunderliggandestrukturförplacer-
ingavwebb-formuläretskomponenter. Prototypengördetocksåmöjligtatt
konfiguera för var och en av de fyra Bootstrap enhets klasserna, namngivna
som xs, sm, md och lg. Position och storlek för webb-formulärets kompo-
nenter lagras för varje Bootstrap enhets klass. Den resulterande responsiva
konfigurationen läggs till i den befintliga XML filen för webb-formuläret.
Nyckelord: Formulär, ResponsivWebbDesign, XML,Javascript, Grid-
ster
Acknowledgements
First we would like to give our sincerest thanks to our supervisors from the
ICT-school at KTH for being supportive and helpful during the process of
working on this thesis.
Additionally, we would like to express our gratitude towards Ida Infront
for making this thesis possible. Specifically, Magnus Grimsell for coming up
with the idea for this thesis and entrusting us to carry out the investigation.
Frida Vestman for giving us continuous feedback on the product. Johnny
HensegårdforhistechnicalexpertiseinthedevelopmentenvironmentatIda
Infront.
i
List of acronyms and
abbreviations
Abbreviation Description
HTML HyperText Markup Language
W3C World Wide Web Consortium
CSS Cascading Style Sheets
RWD Responsive Web Design
XML Extensible Markup Language
MVC Model View Controller
MVVM Model View ViewModel
CRUD Create, Read, Update and Delete
GUI Graphical User Interface
WYSIWYG What You See Is What You Get
SAD Software Architecture Document
ii
Contents
Acknowledgements i
List of acronyms and abbreviations ii
1 Introduction 1
1.1 General introduction to responsive design . . . . . . . . . . . 2
1.2 Introduction to Ida Infront . . . . . . . . . . . . . . . . . . . 2
1.3 Problem definition . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Research questions . . . . . . . . . . . . . . . . . . . . . . . . 3
1.5 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.6 Delimitations . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Theoretical Background 6
2.1 Web-form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1.1 What are web-forms? . . . . . . . . . . . . . . . . . . 6
2.1.2 Designing a web-form . . . . . . . . . . . . . . . . . . 7
2.1.3 Web-form grid structure . . . . . . . . . . . . . . . . . 8
2.2 Static Web Design . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.1 What is Static Web Design? . . . . . . . . . . . . . . . 8
2.2.2 Supporting multiple devices in Static Web Design . . 9
2.3 Responsive Web Design . . . . . . . . . . . . . . . . . . . . . 9
2.3.1 Media Queries . . . . . . . . . . . . . . . . . . . . . . 10
2.3.2 Fluid Grid Design . . . . . . . . . . . . . . . . . . . . 12
2.3.3 Flexible Grid Design . . . . . . . . . . . . . . . . . . . 14
2.3.4 Mobile First Approach . . . . . . . . . . . . . . . . . . 15
2.4 Design with Bootstrap . . . . . . . . . . . . . . . . . . . . . . 15
2.4.1 What is Bootstrap? . . . . . . . . . . . . . . . . . . . 15
2.4.2 Grid system for different devices . . . . . . . . . . . . 16
2.4.3 Mobile First . . . . . . . . . . . . . . . . . . . . . . . . 18
3 Methodology 19
3.1 Research process . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Identifying problem areas . . . . . . . . . . . . . . . . . . . . 21
3.3 Identifying specialised research questions . . . . . . . . . . . . 21
3.4 Collecting information . . . . . . . . . . . . . . . . . . . . . . 22
3.5 Prototype design process . . . . . . . . . . . . . . . . . . . . . 23
4 Empirical basis 25
4.1 XML structure of forms . . . . . . . . . . . . . . . . . . . . . 25
4.2 HTML components in web prototype . . . . . . . . . . . . . . 29
5 Analysis 33
5.1 Specialised research questions and answers . . . . . . . . . . . 33
5.1.1 Responsive behaviour of web-form component . . . . . 33
5.1.2 Components in XML file . . . . . . . . . . . . . . . . . 36
5.1.3 Technologies . . . . . . . . . . . . . . . . . . . . . . . 37
5.2 Main research questions and answers . . . . . . . . . . . . . . 38
5.2.1 Dynamic layout editing . . . . . . . . . . . . . . . . . 39
5.2.2 Layout editor and Bootstrap . . . . . . . . . . . . . . 41
5.2.3 Persist configuration into XML . . . . . . . . . . . . . 44
6 Discussion 48
6.1 Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
6.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
6.3 Sustainability & ethics . . . . . . . . . . . . . . . . . . . . . . 50
6.4 Future work . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
6.4.1 Generate web-form with responsive configuration . . . 51
6.4.2 XML configuration file . . . . . . . . . . . . . . . . . . 51
6.4.3 Configuration for 1 view instead of 4 . . . . . . . . . . 52
6.4.4 Alternatives to Angular Gridster . . . . . . . . . . . . 53
Appendix A - Lightweight Software Architecture Document 59
Chapter 1
Introduction
Responsive Web Design (RWD) or Responsive Design is an approach to
define layout configuration for web pages.[1] RWD makes use of different
techniques, such as fluid grids, flexible grids and media queries, to adapt
web content to different screen sizes.[2][3] The need to design web applica-
tions to be responsive is important to provide optimal user experience.[4]
The conventional way is to let developers configure the responsive de-
sign. This means that if a user wants to configure RWD behaviour, they
need to communicate their configuration to a developer. This in turn can
lead to problems like misunderstandings about the design and additional
costs. What if users could configure responsive behaviour without going
through developers, but instead use a GUI (Graphical User Interface)?
Ourtaskistoimplementaprototype,whichcanbeusedtoconfigurethe
graphical layout of a web-form using responsive design in a drag-and-drop
client. The prototype should allow users to configure the responsive design
without doing any programming, but rather using the prototype interface.
The company Ida Infront, which initially gave us the task to develop the
prototype, will then see how the prototype can help their clients to define
the responsive design of their web-forms.
1
CHAPTER 1. INTRODUCTION
1.1 General introduction to responsive design
Responsive Web Design consists of several techniques which attempts to
adapt web content so that it is displayed correctly on different screen sizes.
The common denominator is that they need to rely on CSS to change the
layout.[5]
The need for Responsive Web Design emerged as soon as the first mobile
devicewithbrowsingcapabilitieshitthemarket.[1]Thisisduetothereason
that websites were adapted to desktop devices that use screens many times
larger than mobile devices. This meant that the old static design which had
been in use needed to be extended in order to support these new devices.
In the field of web design and development, we are quickly getting to
the point of being unable to keep up with the endless new resolutions and
devices.[6]Formanywebsites, creatingadifferentversionforeachresolution
and new device would be impossible, or at least impractical. Should we just
suffer the consequences of losing visitors from one device, for the benefit of
gaining visitors from another? Or is there another option? Responsive Web
Design is the approach that suggests that design and development should
respond to the users behaviour and environment based on screen size, plat-
form and orientation. The practice consists of a mix of flexible grids, fluid
grids and an intelligent use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically switch to accommo-
date for resolution. In other words, the website should have the technology
to automatically respond to the users preferences. This would eliminate the
need for a different design for each new gadget on the market.
1.2 Introduction to Ida Infront
Ida Infront develops systems and solutions for complex and information-
intensive businesses. The company have their own range of products un-
der the name of iipax, such as document and form handling through iipax-
permission.[7] Ida Infront has discovered a need to make some of these ap-
plications available online, i.e.web applications rather than desktop appli-
2