Responsive Web Design Project

The assignment describes a responsive web design project where I designed and developed a website using HTML5, CSS3, and JavaScript. The application was tested on various devices with small screens and had issues with losing content. The graphics were also deemed too mainstream. With more time, I would like to add features and finalize the build.

Running head: CALCULATOR WEB APPLICATION
Calculator Web App
Name of the Student:
Name of the University:
Author note:

1
CALCULATOR WEB APPLICATION
Table of Contents
The native HTML5 and CSS3 web framework………………………………………….……2
The Bootstrap Framework………………………………………………………………….…3
Features…………………………………………………………………………..……3
The Grid System………………………………………………………………….……4
Stylesheets………………………………………………………………………..……4
Re-usable components…………………………………………………………………5
The use of Javascript libraries…………………………………………………………………6
Wireframes…………………………………………………………………………….………7
Tabular View……………………………………………………………………..……7
Mobile View………………………………………………………………….…..……8
Usability Features of the Calculator Application……………………………………….……12
Application Commentary………………………………………………………….…………13
Testing…………………………………………………………………………………..……15

2
CALCULATOR WEB APPLICATION
The native HTML5 and CSS3 web framework
The web application that is being developed here is a Scientific Calculator. It needs
not any complex web technology to be developed, therefore, certain clusters of native web
technologies have been used in order to deliver a fluid performance. It was necessary to
enhance the User Interface and the look and feel of the application. The use of native HTML
and CSS components and classes helped to keep the development phase simple (Fielding
2014). Furthermore, in order to elaborate on the design aspects of the website of the
application, Bootstrap has been chosen to bring the responsive web design concept. Finally,
the Calculator application’s logical operations have been carried out using the JavaScript
framework and its library methods or functions (Shenoy and Sossou 2014).

3
CALCULATOR WEB APPLICATION
The Bootstrap Framework
The application is developed and designed with the motive to serve both the
smartphone/tablet and the computer internet users. It was therefore necessary to choose a
proper web framework that can handle the changing platforms for this application or website
as one may opt to name it. For this purpose, a thorough search was necessary. It revealed
quite a handsome number of options that can assist to build a responsive website. A
responsive website is one that fixes the positions and sizes of its elements according to the
screen sizes that it is being used in. Nene (2015), says the in a responsive website, the
webpages can easily align themselves on a variety of devices with varying screen resolutions.
This enhances the usability features of any application or website (Bryant and Jones 2012). A
website designed with responsive web design adapts its layout according to the viewing
environment by the means of fluid, proportion-based grids, CSS3 media-queries and flexible
images. With the increase in mobile traffic on the internet, every web designer’s urgent
requirement is to design for their client, the best possible responsive layout. JQuery Mobile
and Bootstrap are two of the most common frameworks that offers the web developers and
designers the scope to design hassle-free responsive layouts. Below, the Bootstrap framework
will be critically attributed along with explanations about why it was chosen to design the
Scientific Calculator application here.
Bootstrap is an open-source frond-end library that is used for the designing of
websites and web-applications, developed by Twitter (Cochran 2012). It consists of CSS and
HTML based templates for forms, buttons, tables, typography, navigation and many more.
While JQuery Mobile is mostly a script based framework, bootstrap mostly concentrates on
the front-end development only.
Features of Bootstrap

4
CALCULATOR WEB APPLICATION
Bootstrap 4 has been developed with the motif to support all the commonly used web
browsers like Firefox, Safari, Google Chrome, Internet Explorer and so on. Surprisingly, it is
a framework that is supported by the IE8 versions as well. Bootstrap 3.0 adopted the mobile-
first design philosophy that by default emphasises on responsive web design (Shenoy and
Sossou 2014).
Bootstrap is a modular framework, consisting of series of Less stylesheets. These
implement the various individual components of the toolkit. These stylesheets are commonly
kept compiled within a bundle. These are included in the various webpages, with the
programmer having the opportunity to choose which of the features that he wishes to keep
and which not. Bootstrap provides various features to enhance the look and feel of a web
design through the margin, padding and colour components. Every Bootstrap component
contains of HTML structure, CSS declarations, and also accompanying JavaScript code, in
some cases (Spurlock 2013).
Grid System
The grid system is one of the most attractive features of the Bootstrap framework. The
grid system and the bootstrap responsive design comes with a standard 1170 pixel grid
layout. Alternatively, the developer can also opt to use a variable-width layout. However, in
both the above said cases, the toolkit has four variations to make use of different resolutions
and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and
high resolution. Each variation adjusts the width of the columns according to the device
display resolutions.
Stylesheets

5
CALCULATOR WEB APPLICATION
Bootstrap provides a set of stylesheets that provide basic style definitions for all
necessary HTML components. These ranges from headings, buttons, other input elements to
tables, divs and navigation bars. These provide a uniform, modern appearance for formatting
all these images, texts and or form elements.
Re-usable components
Apart from the above said regular HTML tags and elements, Bootstrap consists of
other commonly used interface elements which are necessary to be implemented in order to
design a responsive web design. These components are implemented as CSS classes, which
must be applied to the required HTML elements in the webpages. These CSS classes are pre-
compiled and stored in the open-source project that is available for free on the official
website of Bootstrap (Mammen 2012). This makes it stand out from the rest. One can just
mention this classes within their tag elements inside their HTML codes and can eventually
view the changes in the web design. Hence, this allows the designers to re-use the CSS codes
that are stored online and hence helps to save up on a lot of web designing time.

6
CALCULATOR WEB APPLICATION
The use of JavaScript Libraries
In order to perform the operations of the application, Javascript has been used. It
allows the developers to dive deep into its library functions and use all necessary pre-written
and compiled snippets of code. Javascript is a programming language or scripting language as
many favours to call it. Since, the application here did not require any server end operations,
there was not any urgent need to apply the extended JS frameworks like Ajax and so on.
However, the javascript libraries will prove to be a great zeal designing and developing such
logic based applications. Especially for this application, the Math library class of javaScript
can provide most of the necessary methods like the trigonometric methods, the exponential
methods and so on. It must also be noted that Bootstrap itself extends many of the native
Javascript methods in order to provide the responsive features to the designers (Johansen,
Britto and Cusin 2013).

7
CALCULATOR WEB APPLICATION
Wireframes
Tabular Device View
Home Screen
The Calculator App screen

8
CALCULATOR WEB APPLICATION
The Contact Us page
Smartphone Device View
Home Page

9
CALCULATOR WEB APPLICATION
The Calculator app Page

10
CALCULATOR WEB APPLICATION
The licence page

11
CALCULATOR WEB APPLICATION
The contacts page

12
CALCULATOR WEB APPLICATION
Usability Features of the Calculator Application
The Calculator app designed here is based on the native HTML5 and CSS3
frameworks with assistance of the Bootstrap V3 for enhanced user interface. Furthermore, the
JavaScript library functions help the user to interact with the system, provide the necessary
inputs, get them processed and fetch the required outputs. The responsiveness of the web
application is the catching point of the whole project (Heitkötter, Hanschke and Majchrzak
2012).
The application, as can be seen in the wireframe diagrams, is supported on all
resolution screens. The web application aligns its layout according to the device. In this case,
the broad screen Tablet has a different view of the application from that of the smartphone
device. Having to implement the design of a mere calculator, the tablet offers the user with
additional visual elements to keep them engaged while in the calculator app page. Whereas,
in the smartphone, the user will view and access the application as a solo on the small mobile
screen. This helps in the easy click-ability of the calculator buttons and fetch quick, hassle
free results.
The home page on a broad device will seemingly attract more graphical attention of
the user whereas, on the mobile device, it is all about the functionalities of it. The attractive
background is presented narrowly on the screen whereas the welcome message and the button
is emphasized upon.
The contacts page cunningly uses the grid system of the bootstrap framework to
present the three different forms to the users. These forms have a varied layout on different
devices. On the tabular or wide screen devices, all the forms are aligned side by side, whereas
on switching to a mobile device, the forms get padded one upon the other and the user will
have to scroll up and down to access the different forms (van der Merwe, van der Merwe and
Visser 2012).

13
CALCULATOR WEB APPLICATION
One of the major accessibility features of the application is the navigation bar. This is
the general feature that allows the users to navigate within the website to access all the
different functionalities and information. To exaggerate the experience, special Bootstrap
classes were used to make the navigation system more fluid. This means that the long
navigational menu will be seem different on different devices. On a broad device, the user
will be able to view the complete navigation menu at once, whereas on a mobile device, to
save up the space and adhere to responsive layout concepts, the navigation menu is crippled
into one menu under the Navigation Menu icon. The user can access these options after
clicking on this icon.
Application Commentary
The app development process included several stages. For me, it started with the
design stage, graduated through the development phase and finally was completed with the
testing phase. I had to first make choices for the designs of the application. This included the
page designs on pen and paper. Two different sets of designs were made, one for the mobile
device and the other for the broad screen tablets of PC screens. Then, the designs were
brought to life digitally using the wireframe diagrams. This helped me to get a clear view of
how the application is going to stand out, what are the features that I must put in and their
positions, sizes and so on were all decided.
Once the sketch design stage was done with, it was time for the application to be built.
It first included the HTML, CSS and Bootstrap designing phase. It took me about 5 days to
design and test the complete website layouts and the calculator app using the above said
design frameworks. I had to test the design on two different resolution screens, one being a
PC monitor and the other an I-Phone. I had made sure to implement all the necessities to
uplift the responsive design phenomena. It was one of my prime goals to make the
application user friendly by providing a smooth and easy user interface.

14
CALCULATOR WEB APPLICATION
Once done with the designing, it was now time to start with the javascript. I had faced
a few problems in this phase. The coding part was easily done and compiled, thanks to the
library functions that the Javascript framework provides; however, I had troubles linking
the .js file to my html. Due to some unknown reasons the errors kept creeping in, therefore I
had to decide upon giving up the separate javascript file, and instead write an internal script
section within my html page. This had strikingly solved the issue and my app was up and
running.
However, on doing the testing part, I realized that there was still flaws in my design of
the application. The application, though immensely fluid and responsive in nature may seem
to be losing out of the screen on certain very small screen devices. This is one of the design
bugs, which I must fix in the recent future. Apart from that, one huge weakness of this project
is the graphics. The graphics used in the project are too mainstream and hence they need
immediate up-gradations. Apart for these, the application works fine, especially the
calculations are fast and correct every time. With more time in my pocket, I would like to sit
on this for a while, try to add some more features to the application and finalize the build.

15
CALCULATOR WEB APPLICATION
Testing Screenshots
Home Page

16
CALCULATOR WEB APPLICATION
The navigation menu

17
CALCULATOR WEB APPLICATION
Contact Us Page

18
CALCULATOR WEB APPLICATION
The Calculator

19
CALCULATOR WEB APPLICATION
References
Bryant, J. and Jones, M., 2012. Responsive web design. In Pro HTML5 Performance (pp. 37-
49). Apress, Berkeley, CA.
Cochran, D., 2012. Twitter bootstrap web development how-to. Packt Publishing Ltd.
Fielding, J., 2014. Beginning Responsive Web Design with HTML5 and CSS3. Apress.
Hall, P., 2013. The bootstrap and Edgeworth expansion. Springer Science & Business Media.
Heitkötter, H., Hanschke, S. and Majchrzak, T.A., 2012, April. Evaluating cross-platform
development approaches for mobile applications. In International Conference on Web
Information Systems and Technologies (pp. 120-138). Springer, Berlin, Heidelberg.
Johansen, R.D., Britto, T.C.P. and Cusin, C.A., 2013, May. CSS browser selector plus: a
JavaScript library to support cross-browser responsive design. In Proceedings of the 22nd
International Conference on World Wide Web (pp. 27-30). ACM.
Mammen, E., 2012. When does bootstrap work?: asymptotic results and simulations (Vol.
77). Springer Science & Business Media.
Nebeling, M. and Norrie, M.C., 2013, July. Responsive design and development: methods,
technologies and current issues. In International Conference on Web Engineering (pp. 510-
513). Springer, Berlin, Heidelberg.
Nene, A.R., 2015. Responsive Web Design. International Journal Of Engineering And
Computer Science, 4(03).
Nixon, R., 2012. Learning PHP, MySQL, JavaScript, and CSS: A step-by-step guide to
creating dynamic websites. " O'Reilly Media, Inc.".

20
CALCULATOR WEB APPLICATION
Robbins, J.N., 2012. Learning web design: A beginner's guide to HTML, CSS, JavaScript,
and web graphics. " O'Reilly Media, Inc.".
Shao, J. and Tu, D., 2012. The jackknife and bootstrap. Springer Science & Business Media.
Sharkie, C. and Fisher, A., 2013. Jump start responsive web design. SitePoint.
Shenoy, A. and Sossou, U., 2014. Learning Bootstrap. Packt Publishing Ltd.
Spurlock, J., 2013. Bootstrap: Responsive Web Development. " O'Reilly Media, Inc.".
van der Merwe, H., van der Merwe, B. and Visser, W., 2012. Verifying android applications
using Java PathFinder. ACM SIGSOFT Software Engineering Notes, 37(6), pp.1-5.