Responsive Web Design for Robo Expo: Semester Project

Desklib offers solved assignments and past papers to help students succeed.

Table of Contents
Introduction................................................................................................................................3
Portfolio 2.1................................................................................................................................4
Portfolio 2.2..............................................................................................................................27
Portfolio 2.3..............................................................................................................................28
Portfolio 2.4..............................................................................................................................30
Portfolio 2.5..............................................................................................................................31
Portfolio 2.6..............................................................................................................................32
Conclusion................................................................................................................................36
References................................................................................................................................37
List of figures
Figure 1: welcome page.............................................................................................................4
Figure 2: timing page.................................................................................................................5
Figure 3: book ticket..................................................................................................................6
Figure 4: domestic robots...........................................................................................................7
Figure 5: military robots.............................................................................................................8
Figure 6: educational robots.......................................................................................................9
Figure 7: industry robots..........................................................................................................10
Figure 8: welcome page on mobile..........................................................................................11
Figure 9; educational robots page on mobile...........................................................................12
Figure 10: military robots page on mobile...............................................................................13
Figure 11: industry robots page on mobile..............................................................................14
Figure 12: domestic robots page on mobile.............................................................................15
Figure 13: timing page on mobile............................................................................................16
Figure 14: book ticket page on mobile.....................................................................................17
Figure 15: welcome page on tablet..........................................................................................17
Figure 16: educational robots page on tablet...........................................................................18
Figure 17: military robots page on tablet.................................................................................19
1

Figure 18: industry robots page on tablet.................................................................................20
Figure 19: domestic robots page on tablet...............................................................................21
Figure 20: timings page on tablet.............................................................................................22
Figure 21: book ticket page on tablet.......................................................................................22
Figure 22: welcome page on laptop.........................................................................................23
Figure 23: book tickets page on laptop....................................................................................23
Figure 24: timing page on laptop.............................................................................................24
Figure 25: military robots page on laptop................................................................................24
Figure 26: industry robots on laptop........................................................................................25
Figure 27: educational robots on laptop...................................................................................25
Figure 28: domestic robots on laptop.......................................................................................26
Figure 29: basic flowchart........................................................................................................28
Figure 30: detailed flowchart...................................................................................................29
Figure 31: business hours.........................................................................................................30
Figure 32: book ticket page represented as the form...............................................................31
Figure 33: mobile view............................................................................................................32
Figure 34: tablet view...............................................................................................................33
Figure 35: laptop view.............................................................................................................34
2

Introduction
The website named Robo Expo is designed to give information about the exhibition. It
contains detailed information about various types of robots namely educational robots,
industry robots, military robots, and domestic robots. It also contains information about
robots that fall under the above categories. It also provides flexibility to the users to book
tickets by entering their details. In the report, every basic detail is provided along with the
feedback of different users. The user can also check the opening and closing hours of the
exhibition and also the day offs. It also contains the fare details for adults, children, and
senior citizen.
3

Portfolio 2.1
Figure 1: welcome page
The above image of the mockup shows the welcome page of the website which will get open
on the opening of the site. This page contains a summary of the website along with the useful
links to various web pages.
4

Figure 2: timing page
The above wireframe is the mockup of the timing page which shows the opening and closing
times of the exhibition and also the day offs. It includes the fare for adults, children, and
senior citizen along with some additional information about the private tours.
5

Figure 3: book ticket
This wireframe is the mockup of the ticket booking through which a person is able to book
the tickets by entering some details like name, age, gender, and origin country. The person
can also write something in the comment section and then can submit it by the use of the
submit button.
6

Figure 4: domestic robots
This mockup shows the page of domestic robots. This page contains the link of other pages
and also contains the information about the domestic robots with is type and link to open that
particular domestic robot.
7

Figure 5: military robots
This is the mockup for military robots page. The page contains the links to different web
pages along with the information for different types of military robots and the link to visit
these web pages.
8

Figure 6: educational robots
This page is the mockup for the educational robots containing information about it and link to
visit different types of educational robots. It also contains the picture of different robots
which falls under the category of educational robots.
9

Figure 7: industry robots
This is the mockup for industry robots which contain information about it along with the
pictures and links to visit different types of industry robots individually.
10

Checking the responsiveness of the website on the mobile screen, laptop, and tablet
Figure 8: welcome page on mobile
11

Figure 9; educational robots page on mobile
12