Mobile-Friendly Bravo Consulting Website

ITECH 7415 ASSESSMENT TASK 2
MOBILE-FRIENDLY BRAVO CONSULTING WEBSITE
APPROVAL AND SIGNATURE

Abstract
The project is regarding mobile friendly bravo consulting website. The current
bravocareers site (https://bravocareers.com).The website works well in a computer browser,
however, it does not work well in a mobile browser in a smaller screen. Thus, we are going to
reengineer the website to make it mobile friendly. Our main motive is to develop a mobile
friendly website for bravocareers. But as we are designing it, we can also add some other features
including responsive design like different effects to the element’s buttons, textboxes etc. Current
site is not having an animation and any effects or styles in the site. It is simply designed. So, we
now identify the gaps the site and eradicate them. We are using technologies like bootstrap and
jQuery to develop a responsive website and to add different effects to the website.

Table of Contents
Abstract........................................................................................................................ 2
Introduction.............................................................................................................. 5
Problem Statement............................................................................................................ 6
Stakeholders............................................................................................................ 7
Scope....................................................................................................................... 7
Goals and Objectives....................................................................................................... 8
Literature Review........................................................................................................... 9
Mobile Friendly Websites................................................................................................ 9
Literature Review Findings............................................................................................ 10
Theories Adoption....................................................................................................... 10
Justification............................................................................................................... 11
Conclusion................................................................................................................ 11
Methodology................................................................................................................ 12
Introduction............................................................................................................... 12
SDLC approach.......................................................................................................... 12
Agile Methodology...................................................................................................... 12
Product Vision......................................................................................................... 13
Product Backlog...................................................................................................... 14
User Stories............................................................................................................ 15
Work Breakdown Structure......................................................................................... 19
Product Schedule..................................................................................................... 19
Gantt Chart............................................................................................................. 20
Sprint Stand-Up record.............................................................................................. 20
Findings and Discussion................................................................................................. 24
Findings.................................................................................................................... 24
Discussion................................................................................................................. 24
Including the viewpoint metadata................................................................................. 25
Creating responsively large buttons............................................................................... 25
Compressing the Images and CSS................................................................................ 25
Creating a desktop to Mobile view switch.......................................................................25
Reducing page down scrolling..................................................................................... 26
Summary of Findings, Limitations, and Recommendation....................................................26
Application of the findings............................................................................................. 26

Activity Diagrams....................................................................................................... 27
Limitation and Exclusions of the website...........................................................................28
Unit Testing............................................................................................................... 28
Risk Management........................................................................................................ 29
Risk Identification.................................................................................................... 29
Risk Analysis.......................................................................................................... 29
Risk Control........................................................................................................... 29
Website Improvement................................................................................................... 30
Team Reflection.......................................................................................................... 31
Conclusion................................................................................................................... 32
References.................................................................................................................... 33

Introduction
Bravocareers is one of Melbourne’s oldest consulting firms providing services to students
and professionals in Australia and India. Recently they have gone through a significant
remodeling and launched a new site https://bravocareers.com.
In this project, we have to find the flaws in the website https://bravocareers.com. The
project’s main motto is to develop or -remodel the current website in a mobile-friendly manner
using the latest technologies. To analyze and identify the website https://Bravocareers.com on
mobile version across all platforms for gaps and issues that are causing the website to misbehave
and to design an approach through agile or waterfall framework to develop a solution to rectify
the issues, which enables the user to have seamless operation of the website on mobile browsers
across all platforms, considering various risk factors and deliver on time.
Latest technologies include Bootstrap; JQuery is used to develop a completely mobile
friendly application more simply. Bootstrap is a Cascading Style Sheets (CSS) based framework
which has custom classes pre-defined in it, which help in the projection of a website in mobile-
friendly view. Bootstrap is implemented in two ways. First one is Content Delivery Network
(CDN). We include Bootstrap CDN to import its CSS files into the website directly. CDN
technique is very fast since the user might have opened some other websites which are also using
CDN. So, the loading time of the website is fast. The second one, we have to manually download
bootstrap code & upload files with the HTML files of our website.
JQuery is a JavaScript Query-based framework. It simplifies the JavaScript code. There
are many other JavaScript frameworks, but JQuery has a straightforward syntax & extendable.
JQuery having many inbuilt functions which enable the user to develop website quickly with
many features like animation, automatic adjustment. Many of the websites we visit regularly are
made of bootstrap. Bootstrap self-adjust the data and components according to the resolution of
the device.
There are many uses in re-developing (remodeling) the website in a mobile-friendly
manner:
1. Reduction of Cross-Browser Issues (Consistency):
Many websites have this issue of not being compatible across multiple browsers.
The website does not look the same in all browsers. Some browsers will give preference to data

saving, and others will give preference to the user interface. After designing the responsive
website, there will be no cross-browser issues.
2. Highly Responsive:
The website is highly responsive. Website (bravocareers.com) can be fit in any
device that the internet users are using. Layout errors can be removed entirely from the website.
3. User Attention:
The loading time will be faster when compared to other websites. So, that we can
get the user attention. So that user will feel better while using the website.
4. The natural flow of the website:
The user can navigate easily through the pages of the website. When a website is
developed with only Html and CSS, the user cannot easily understand the flow of the website.
Moreover, the layout when using only Html and CSS (not responsive) which cannot be
adequately rendered in all devices will make the user uncomfortable.
Problem Statement
Old browsers may not be compatible for viewing the mobile-friendly website since the
website is developed using HTML5, CSS3, Bootstrap which are not supported by old browsers. If
data saver mode is enabled in a browser, the browser cannot load any responsive content, since
JavaScript & JQuery will not be enabled while the mobile is in data saver mode. Slow internet
may cause issues with the responsive aspects of the page because of improper execution of JS.
Lots of unused bootstrap code will be loaded into the website; as a result, the page weight
will be increased. Overriding the pre-defined CSS code is a mess even for a slight modification in
the website. Re-Designing the entire structure of the website is challenging.
The current version of the website (bravocareers.com) has a bad layout, re-direction
errors, misaligned text, poor performance. The primary focus of the project is to improve the
functionality and performance of the website. It can be done either by redesigning it from ground
zero or by making changes to the existing website. It is better to redesign the website, both for the
desktop version and the mobile version than to make improvements to the existing site. The

newly redesigned website will have better user experience (app-like interface) with better
performance.
Stakeholders
The stake holders of the website are the management of bravocareers company who runs
processes in the consulting company. These are the people who will be generating a financial
muscle for the work done in order to make the redesigning a possibility. Once the software has
been developed, the stakeholders will get a demonstration of the software, all the functional and
the non-functional requirements will be demonstrated as well as the risk management and
software maintenance strategies. The stakeholders are very important to the planning and
development of the software successfully. For this reason, the software has to meet the
requirements which were set during the planning stage as the stakeholders are not programmers
of the software, their main intention is to see that the software is able to the works as per the
initial planning and it can therefore solve the problems which necessitated them to implement the
software in the company processes.
Scope
1. Analyse the current website and identify the gaps that are causing the website behaving
differently between computer and mobile environments.
2. Discuss and gather users’ requirements.
3. Document both functional and non-functional requirements.
4. Go through the design and scoping phases following either waterfall or agile framework.
5. Develop a plan based on a risk management exercise to redevelop the website.
6. Develop the website using technologies that can be accommodated within the current
website environment or hosting.
7. Create a unit, system and pre-production test environments.
8. Generate a detail test report highlighting the main requirement of Mobile Friendliness are
well addressed.
9. Implement the website in production environment.
10. Finalise all the documents and handover the projects artefacts to the client.