Responsive Web Design Portfolio: Robot Expo Website

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

Responsive web design
Portfolio 2

Contents
Introduction.................................................................................................................................................3
Portfolio 2.1.................................................................................................................................................4
Portfolio 2.2...............................................................................................................................................11
Portfolio 2.3...............................................................................................................................................14
Portfolio 2.4...............................................................................................................................................15
Portfolio 2.5...............................................................................................................................................16
Portfolio 2.6...............................................................................................................................................17
Conclusion.................................................................................................................................................19

Introduction
The aim of the portfolio report is to design and implement the Robot expo website. On the basis of
design, its wireframe prototype needs to be designed. The website needs to be checked on multiple
devices and browsers to check its effectiveness. The website needs to be justified for the color schemes,
white spaces and graphics used in it.

Portfolio 2.1

Page responsiveness in Chrome browser

Page responsiveness in Chromium browser

Page responsiveness in Mozilla firefox browser

Page responsiveness in IPhone

Page responsiveness in I pad

Portfolio 2.2
Navigation has been used in the screens of “Robotexpo” website by providing links on the side bar
available on each screen. Clicking on the links available the page will be redirected to a new screen. In
each screen, the navigation bar is placed which links every page to each other, total number of screens
linked to each other includes, Welcome page, About us page, Domestic page, military page, Industry
page, Educational page, time and fees page and contact us page.
Clicking on this link,
about us page opens
up

To enhance the website design, the color scheme is a combination of Blue and white. White background
has been chosen for the pages whereas the navigation bar or side menu contains blue background. The
text color on the white background has been chosen as black to enhance the visibility of text. In darker
background the text has been displayed using white color.
White spaces used around each graphic is different according to the content present on the screen but
white spaces have been used to make sure that content is clearly visible to the user and the overall
screens are interactive.
The form of graphics for the website is as below:
 Tables for time and fees page to list out the timings on different days and to describe fees for
individual on the basis of age factor.
 The form element has been used in the Contact Us page where the user can fill out different
fields present in the form.
 Sections have been used for Domestic, Military, Educational and Industry page because these
pages need separate section to display the images and description below them.
Testing the image in different browsers
1. Chrome
2. Chromium