Responsive Web Design | Portfolio | Assignment

Running head: RESPONSIVE WEB DESIGN
Responsive Web Design
Name of the Student
Name of the University
Author’s note:

RESPONSIVE WEB DESIGN1
Table of Contents
Portfolio 2.1:....................................................................................................................................2
Portfolio 2.2:....................................................................................................................................3
Portfolio 2.3:....................................................................................................................................3
Portfolio 2.4:....................................................................................................................................4
Portfolio 2.5:....................................................................................................................................4
Portfolio 2.6:....................................................................................................................................4
Bibliography:...................................................................................................................................6
Appendix:........................................................................................................................................7

RESPONSIVE WEB DESIGN2
Portfolio 2.1:
The home page has a main menu. Main menu has one logo and three links. These links
refers to home page itself and two other sections of the website. The products link is a dropdown
menu. After hovering over products link, the list of sub links will appear. These sub links refers
to domestic, industrial, military and educational robotics page. The home page has a welcome
note stating ‘Welcome to Exhibition Our Hall’. Then the layout of the exhibition hall is provided
by following the heading Exhibition Hall Layout. An image has been used for showing the
layout of the hall. Image mapping has been used for linking different robotics page to the image.
Clicking upon individual robotics section name on the image will redirect the user to that image.
Next section shows the same category of robots available for exhibition. This time, different
images of robots of a specific category has been used for individual robotics section. Text
denoting the name of the section robot has also been used for usability. These images or texts
does not have a link to different robotics section. Finally, a footer is present in the home page
that shows copyright text.
The next section is the about page. In this page same menu and footer has been used. This
page shares all the information required for visiting robot expo. The main body of the page starts
with a heading stating Exhibition Hall Details. Then the same image layout has been used. At the
left side of the body. At the right side, all the information has been provided in the form of text.
Under each heading relevant information is placed. The first heading is opening hours. In this
section information Mon - Thur : 10:00am to 4:00pm, Fri : 10:00am to, 1:00pm, 2:00pm to
6:00pm, Sat: 8:00am to 4:00pm, sun: Closed and Public Holidays: Closed is provided. The
next heading is entrance fees. Here adult, children and senior citizen entrance fees has been
provided. The organization also accept private tour request. The about page provides all the

RESPONSIVE WEB DESIGN3
information regarding private tour such as timing and contact method. The email address of
management is also present in this section.
All four of the robotics page has same layout. The images of the robots are visible within
the screen. This images are clickable. Some dummy text will appear at the below of image if it is
clicked. Images appear four per row. If the images are opened in small device it will open as one
per row. Images are responsive. The size of image adjusts based on the screen size.
Portfolio 2.2:
In order to increase visibility of the website, the major factor to consider is colour
scheme. The background and text colour must have some contrast so that texts can be read
easily. Generally, texts are of dark colours and background is of light colours. The standard
amount of white spaces will be used between the images so that each can be separated from each
other. The title and alt attributes will be used for all the img tag. Name of the image with
extension will be used in alt attribute and for title only image name will be used. For every row
only four image will be placed for large screen and for small screen only one image per row will
be used. The menu links will have white colours for both normal and visited state.
Mr./Ms. ______ has successfully completed the assigned task _______ within deadline.
He/she has helped in developing this website. His/her quality of work is remarkable.
Portfolio 2.3:
The revised flowchart includes links to each robotics page through clicking on images
provided for each category at bottom of home page. The new revised flow chart includes all the
main page links within the main menu. Each page within this website will be linked to main
menu. This way the user will be able to move to any page easily. The links within the main menu