Website Responsiveness and Design Evaluation

This assignment evaluates the responsiveness of a given website using emulators, online tools like Responsinator and Screenfly. It analyzes the website's design, highlighting potential flaws in its implementation of responsive design concepts. The student is tasked with recommending improvements using proper CSS, HTML coding practices, and site mapping techniques to enhance user experience across various devices.

Running head: QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
Queensland University of Technology - Website Review
Name of the student:
Name of the University:
Author note:

1
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
Introduction
There used to be a time when web designers and clients had to spend extra resources
and bucks in the designing and development of separate websites to for different screens.
Now, various gadgets with a variety of screen resolutions can run the same website. The
Queensland University of Technology, in their official website https://www.qut.edu.au/, has
adapted a responsive web design layout. The website is aimed at providing an interactive and
informative interface to the students from the university or the aspirants who wish to seek
admission in the university. The website’s purpose and objectives are described in detail
through this report. Certain features of the website shall also be highlighted. This report
draws keen attention to the interactive and the design aspects of their responsive website.
The website is critically evaluated with the help of the Responsive Web Design (RWD)
principles and the Google Chrome Simulator to test various display simulations.
The Queensland University of Technology website
About
The QUT website is the official business website of this university from Queensland.
The University is counted amongst one of the most famous universities in Australia. Through
the website, they wish to reach out to millions all over the world and promote their institute.
The website helps the viewers to learn everything about the website. The website provides
detailed information about the various courses that are offered by the University. The
Universities research plans are also mentioned in the website. The aspirants can browse
through the research section of the website and gain knowledge about the university’s way of
conducting research and studies. Further, the website highlights how the University offers
customized corporate education to enhance their students’ industry experience before they

2
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
move out into the corporate world. The website also preaches about the University’s
initiatives to provide government and private sector internship opportunities, alongside
research and career consultancy. Lastly, the website tends to educate the viewers with the
campus map. They provide details of the facilities that each of their campus offers, in
addition to the extra-curricular events and programs held in the various public venues around
the city. Being a university website, qut.edu.au provides all the necessary features required by
the University students or other aspirants to know more about their education in the
university.
Special Features
The website offers quite a handsome set of features that are useful for educational
purposes. The website provides a useful navigation bar that assists the user to browse through
different sections or pages of the website. A navigation bar within a webpage is always
necessary. It is a form of user interface that consists of precious links to take the users to
other sections of the website. This clearly means that, in whichever page is the user surfing
currently, with the guidance of the navigation bar he can promptly access other pages as well.
In addition to the navigation bar feature, the website also has a good search engine
optimization. Whenever the search engines are hit with a search query about the Queensland
University of Technology, the website and its other modules are shown in the results. This
makes it easy for the users to search for specific information about the website. This feature
also helps the University to reach out to the public, thus enhancing its publicity aspects.
The website contains a well-featured list of contact details of the university, its
various campuses and of the different sections of education that the University offers. The
students, guardians and aspirants are offered with this feature to reach out to the university
and query their claims, complaints, concerns or questions. The Search Staff and Contact

3
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
feature helps the users to search for the contacts of particular staff member or of specific
course departments. A live map with pointer locations to the various campuses is also
attached with navigable abilities.
The website allows viewers to login to the website and access the services as a
registered user. For new visitors, the website has the feature to sign in as a member. The
visitors are asked to link their Australian Access Federation account to the website account in
order to sign in. Certain security measures are also adapted in this process, which the QUT
website puts in. These security features are to be discussed in details in a later section of the
report.
The ‘News’ section of the website is a phenomenal feature. The section is flashed
regularly with news and updates from the research, technological and other educational
fields, from all over QUT. In addition, the facility that it offers for International students to
educate themselves about the ongoing and course details of the University is a special point
out as well.
The social media handle links are elegantly displayed beneath every page of the
website. This is a very important feature offered by almost every modern day websites. This
feature serves various important functions for the promotion and adds greatly to the usability
aspects of the website.
Lastly, the main feature of any website that attracts the majority of traffic is the design
of it. The responsive design of the website is a key lookout. A responsive web design is the
need of the hour for any website. This allows users to visit and browse the website from any
device of their choice, without having to worry about the visibility layout issues due to
change in screen resolution (Bryant and Jones 2012).

4
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
All the above mentioned features shall be discussed in details with keen attention
towards the pros and cons of each. This will help to identify all the positive and negative
aspects of the website.
Critical evaluation
In this section, the website will be critically evaluated with regards to identifying all
positive and negative aspects of its features. The website has quite a quality amount of
features available for the visitors. All the features that have been mentioned above are
extremely useful but in the same time, they need evaluation. The ability of these features
must be tested to get a clear overview about the working of the same. Each feature that the
website provides are to be thoroughly used and tested in different screen resolutions and
evaluated accordingly.
The positive aspects of the website
Not all features are perfectly implemented in the website. However, there are plenty
of great design implementations highlighted through the website. The website promises the
best operational and servicing facilities through some of their features. The positive aspects
of the website are listed and discussed below:
 Responsive relative layout: The website can remodel itself according to the screen
size on which it is accessed from. After running the website on all the recommended
screen resolutions through the Google Chrome Simulator, it can be stated that the
website can easily adapt itself with the changing screen sizes. All the options, tabs,
images and texts presented in the website align themselves perfectly on every
available screen resolutions or devices. Unlike static units of a non-responsive

5
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
webpage where contents maintain their sizes no matter the resolution changes and
provide a poor interface, the relative layout is a smart and useful technique.
One great aspect of resolution-based customization can be observed in
the navigation bar adjustment. In medium sized mobile-based screens like 480x640 or
even smaller 200x320, the navigation bar does not appear in the same way as it does
in the broad-screen view. The navigation tabs coil up into one unit and is found in the
navigation button. The functioning of the tabs, however remain the same.
 The Navigation Bar: The navigation bar that bosses the entire website’s road map
has been designed with utter supremacy. Each of the tabs presented in the navigation
bar allow flexible hyper-linking to the other important pages on the website. The
visitors can easily navigate back and forth a webpage through this. However, here it
has been designed with an eye to do more than just simple webpage navigation. On
hovering over each tab of the navigation bar, the user can view the respective contents
of that particular page in a gist. On hovering away from the respective tab, the
floating information page disappears. This helps the users to decide beforehand on
whether to visit the tab or not, depending on its contents. These tabs are found inside
the navigation buttons in smaller screens as mentioned above.
 Flow of contents: The contents of the website do not coincide with each other when
the screen size is altered. Rather, they adjust their layout accordingly to maintain the
original spacing and margin specifications. The figure below shows this aspect of the
website with contrast to other static designs.

6
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
 The Search Feature: The search option works pretty fast and with utmost accuracy.
It also provides the user with the opportunity to navigate between the fields that they
wish to search in. This makes it simpler to search for the exact query, amongst
multiple similar results.
 Use of graphics: The graphical images used in the website are of high quality. The
images do not pixelate at any level of stretching. It must also be noted that the images
used are very attractive and they help to convey the exact message of the respective
web page.
The Negative aspects of the website
On close study of the website, several more aspects of the website could be framed
out. Apart from the above mentioned pros of the website and its design, below, the negative
aspects of the same shall be highlighted. They are as follows:
 The cover image layout: On reducing the screen size in the simulator to fit the size of
a medium or small mobile device, the cover image layout does not fit in properly. The
image crops out from one side. This portrays a negative aspect of the website’s
design.
 The image change buttons on the cover images: On opening the website on a
smaller screen, these buttons disappear. This seems to be quite a mentionable flaw in
the design of the website. The ability to swipe among these images also disappears in

7
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
the mobile versions. In order to make the design responsive, the designer must have
had to drop this feature.
Reviews by two other persons
Person 1: please fill
Age: please fill
Gender: please fill
Profession: please fill
While reviewing the site we found that there are some links on the pages that contains
a long block of text that is intended to use meta tags. This meta tags helps the web sites to
have a better rank in the search engine results so that the existing and the potential users find
the sites easily without spending time and effort in searching the site.
In addition to that, some of the internal links does not have any text indicating their
destination where as it is important for the links to describe their destination. This helps in
improving both SEO (search engine optimization) and the user’s interaction with the site.
Person 2: please fill
Age: please fill
Gender: please fill
Profession: please fill
While testing and analyzing the site we found that, with a slow internet speed the
website is rendered multiple times on the device screen. This happened due to the lack of use
of the height and width tags for the images on the webpages.

8
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
Recommendations for the improvements of the site
In order to improve the quality of the user experience as well as its online presence. In
our investigation, we found that, the there are some page in the website that are not optimized
using the CSS for the Printing purpose. Therefore, it is suggested to the use the required CSS
to make the pages optimized for printing.
Again, the images on different pages of this site are not placed on the pages using the
height and width HTML tags. Due to this reason, multiple images are stretched on the web
pages of the site and the pages of the site took more time to load completely in the browser.
Even though these tags (height and width tags) are optional but these tags help the browsers
to arrange the page with a faster speed while keeping the defined image size on the pages of
the site.
In further investigation of the site, we found that the site does not use any sitemap.
The sitemap is important for a site as well as for its visitors. Use of sitemaps provides
multiple benefits for the website, the sitemaps not only make the navigation process easier
and better but also it helps the site to improve the visibility in the search results of different
search engines. It offers the prospect to notify the search engines immediately after any
modifications on the pages of the web site.
Relevance with the RWD principle
The pages of the given site (qut.edu.au) maintained the consistent layout and style
across the total site. In addition to that, the contents on the pages are placed at the
appropriate locations as required to the site hierarchy. After completing any action on the
different pages of the website, the visitor or the user gets appropriate responses against their
actions. On the pages, there are sufficient information about their positions in between a
process.

9
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
For the users the pages of the site also provide simple error handling for the users
who may have entered some invalid input in some input field and as well as in a search field
on the web pages. In addition to that the pages of the visitors or the users of the site can
easily reverse their action at any point of time they realize that they have committed some
mistake in their previous actions (Mohorovičić 2013).
On the pages of the site, there are sufficient visual indications or prompts for the
visitors/user so that they can find out the functionality of a control item. Therefore, the users
do not have to recall things in order to understand the ongoing process on the pages.
Simulation software tools used for review
For the review of the site, we have used the google developer tools. The advantage
and the disadvantages of these tools are described below;
Advantages
Use of this simulation tool helps in the testing of the website in multiple screen sizes
for a provided smartphone/tablet device, which leads to lessening the cost for the testing of
the websites.
In addition to that, one of the most important factors in case of mobile and tablet
devices is the touch event, which cannot be done on the desktops whereas chrome device
emulator can easily imitate and respond against single touch events.
Disadvantages
Even though the google chrome device emulator is helpful in testing the site in
different view ports, but as the emulator cannot emulate the rendering engine of a physical
device then it represents some erroneous results. The rendering engine of a site consist of

10
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
codes that interprets the HTML, CSS and JS for a site and presents in front of the user of the
site.
Other tools to test responsiveness
responsinator.com: This is an online tool that checks the responsiveness of a site
using the pixel values and orientation of the device (Kim 2013).
Screenfly: This is another testing site that tests a site with different pixel values and
screen lengths. In addition to that, the tool detects the URL of the entered site if it has a
mobile version and redirects as well as represents the site.

11
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
Figure1: 1280*768 1:

12
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
Figure 2: 480*640
Figure 3:700*960
Figure 4:200*320

13
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
Figure 5: 400*640
Conclusion
As a conclusion, it can be stated that even though the website provides the viewers
with all necessary information and couple of interesting features, it lags behind in certain
aspects of designing. The report also states that the use of graphics and layouts are fine
enough to make it look attractive on any device. However, the reviews from the peers bring

14
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
to light that the website has serious flaws in the implementation of responsive design
concepts. The use of proper CSS and HTML code concepts is recommended along with site
mapping.

15
QUEENSLAND UNIVERSITY OF TECHNOLOGY - WEBSITE REVIEW
References
Bryant, J. and Jones, M., 2012. Responsive web design. In Pro HTML5 Performance (pp. 37-
49). Apress, Berkeley, CA.
Kim, B., 2013. Responsive web design, discoverability, and mobile challenge. Library
technology reports, 49(6), pp.29-39.
Mohorovičić, S., 2013, May. Implementing responsive web design for enhanced web
presence. In Information & Communication Technology Electronics & Microelectronics
(MIPRO), 2013 36th International Convention on (pp. 1206-1210). IEEE.
QUT. (2018). Home. [online] Available at: https://www.qut.edu.au [Accessed 17 Jan. 2018].