Responsive Web Design (RWD) Term 1 2019 Portfolio 1

This document is about the first portfolio of the Responsive Web Design (RWD) course in Term 1 of 2019. It includes project proposal, site planning, design considerations, and implementation details.

COIT 20268 - Responsive
Web Design (RWD) Term 1
2019
April 25
2019
Student ID:
Student Name: Portfolio 1

Contents
Portfolio 1.1....................................................................................................................3
Portfolio 1.2....................................................................................................................5
Portfolio 1.3....................................................................................................................8
Portfolio 1.4..................................................................................................................10
Portfolio 1.5..................................................................................................................12
Portfolio 1.6..................................................................................................................15
References....................................................................................................................17
2 | P a g e

Report
Portfolio 1.1
Project Proposal
 Site title – Robot Expo
 Developer – WIMP Engineering R&D Consultants
 Rationale or focus – the main objective of the website is to demonstrate
different types of robots e.g. domestic robots, industrial robots, military
robots, educational robots etc. The website is giving complete information
about Robot Expo. The floor plan of the exhibition, the business hours etc. all
are being displayed on the website.
Planning the Site
Main elements–
Following pages are having main elements of the Robot Expo-
Home Page: the home page of the website is the main page that is representing all the
important stuff which is available on the Robot Expo. All types of robots are being
shown on the home page. The business hours and Robot Expo floor plan both are
being displayed at the home page.
Navigation Bar: the navigation bar is containing the links of all pages which are
available on the Robot Expo website to demonstrate the robots and all other things
available at Robot Expo. Domestic robots, industrial robots, military robots,
educational robots, About and Contact Us pages are linked in the navigation bar.
The domestic robots page is showing all the domestic robots, their name, image etc.
The military robots page is showing all the military robots, their name, image etc.
The educational robots page is showing all the educational robots, their name, image
etc.
The industrial robots page is showing all the industrial robots, their name, image etc.
The About page is showing information regarding Robot Expo.
The Contact Us page is showing the contact detail of Robot Expo and showing the
location of Robot Expo on Google Map also.
3 | P a g e

Content– the website is containing 8 pages that are showing complete information
regarding Robot Expo. All types of robots, business hours, about Robot Expo, Contact
detail etc. are being displayed on the website.
Target Audience– Robot Expo is very interesting for all age group members. The
website is showing different types of robots which are very interesting for all age
group persons.
Design Considerations– there are so many design standards which should be
followed while designing the website. In designing the Robot Expo website,
following design standards are considered-
- It should work well in all browsers like Google Chrome, Safari, and Internet
Explorer etc.
- It should be developed in HTML 5 and CSS 3.
- The website’s resolution should be 1024x768 to 1280x1024 pixels.
- There is static content being used only on the website. No dynamic content
from database will be used on the website.
- The layout should be very easy to understand, attractive and familiar.
- The navigation should be very clear and visible.
Limiting Factors– there are some limitations in the website like below-
- No other language can be used except HTML and CSS.
- No database can be used.
- No Visual design tools can be used.
4 | P a g e

Portfolio 1.2
Main Page
The above image is the home page of the Robot Expo website. It is showing all the
available robots on Robot Expo, business hours and floor map. Each robot image will
redirect to the specific page.
In footer section, copy right information will be shown.
5 | P a g e

Section Page
The above image is the section page of the Robot Expo website like Domestic Robots,
Industrial Robots etc.
6 | P a g e

Content Page
The above image is the section page of the Robot Expo website like “About” page.
7 | P a g e

Portfolio 1.3
Site Specification
Client- Robot Expo.
Client Specification- there are some specification which are given by client to implement in
the website. The website should follow these specifications mentioned below-
- The website should contain Robot Expo logo on every page.
- Business hours should be shown in new window and it should be on the
home page only.
- Use images which are given by the client only and do not edit or crop any
image.
- The web pages can use dummy content for clarity in spite of related content.
- The navigation should connect all pages except business hours and the home
page should connect all pages including business hours page.
Mission- the main objective of the website is to demonstrate different types of robots
e.g. domestic robots, industrial robots, military robots, educational robots etc. The
website is giving complete information about Robot Expo. The floor plan of the
exhibition, the business hours etc. all are being displayed on the website
Site’s Success Measurement- the measurement of website success is like below-
- The business growth is the direct measurement of the site’s success. If the
business growth is high as compared to previous years, the site is successful.
- If the website traffic is increasing every day, it is the best point for the
website and the website is successful.
- If users are giving good feedback about the website that means the website
is successful.
Intended Audience- the audience for the Robot Expo may be of any age group
because every age group person enjoys the robotics and takes interest in it.
User Satisfaction- user satisfaction is very important and useful and the users are
satisfied or not may be known by following ways-
- By taking user’s reviews.
- By taking feedbacks from users.
8 | P a g e

Technical Issues in the Site’s Development- following technical issues may occur in
the website during development-
- The server may down.
- The website may not work on any browser properly.
- DNS error may occur.
Flowchart –
Flowchart Description-
- The Home page is the main page of Robot Expo website and is connecting
all the pages.
- It is showing the internal links of the website.
- The same navigation is on all the pages of the website.
Reason to Choose the Particular Structure- the reason behind the chosen website
structure is following-
- It is very attractive and familiar.
- It is easy to use.
- The content used on the website is very easy and readable.
- All pages are interlinked with each other.
- All pages are following same structure.
9 | P a g e
Domestic Industrial Military Educational About Contact
Robot Expo |
HOME

Portfolio 1.4
Implementation of CSS3- CSS (Cascading Style Sheet) is used as external CSS in
the Robot Expo website. All the design is handled by the CSS only. It is very
beneficial to use same CSS on all pages because if there is some change in all pages,
only one change is required in CSS> there is no need to change all pages separately.
The CSS classes, divs, tags etc. are used as follows-
Body Class
body{
width:80%;
max-width:1280px;
min-width:700px;
font-family:Droid Serif;
margin:0 auto;
min-height:100%;
position:relative;
background:#CCCCCC;
}
Header Classes
header {
padding:0;
}
header h1 {
margin:0 30%;
width:20%;
text-align:center;
display:inline;
font-size:26px;
}
10 | P a g e

Footer Class
footer {
background:#666666;
padding:1% 0;
position:absolute;
bottom:0;
font-size:13px;
width:100%;
}
footer ul {
list-style:none;
padding:0;
margin:0 auto;
width:25%;
text-align:center;
}
footer ul li {
display:inline;
margin:5%;
}
footer ul li a {
text-decoration:none;
color:#FFFFFF;
}
footer ul li a:hover {
border-bottom:solid 1px #000000 ;
}
11 | P a g e

Portfolio 1.5
Type Hierarchy
Styles and Typefaces: all styles and typefaces which are implemented in the website
are made by the CSS only. Different styles are managed by CSS like below-
Body Style
body{
width:80%;
max-width:1280px;
min-width:700px;
font-family:Droid Serif;
margin:0 auto;
min-height:100%;
position:relative;
background:#CCCCCC;
}
Header Style
header {
padding:0;
}
header h1 {
margin:0 30%;
width:20%;
text-align:center;
display:inline;
font-size:26px;
}
12 | P a g e

Heading Levels
Different headings are available in HTML like Heading 1 as H1, Heading 2 as H2,
and Heading 3 as H3 etc.
H1 works as main heading.
H2 works as sub heading.
H3 works as sub heading similarly.
H4 works as sub heading similarly.
H5 works as sub heading similarly.
In Robot Expo website H1 heading is being used as main heading. H3 is being used
on Home page while H5 is being used in section pages.
Hypertext Links
Hyperlinks are used to redirect on another pages in the same window or new window.
Hyperlinks on pages are being used in the following ways-
- On Navigation bar
- On images
Navigation hyperlinks are implemented in CSS like below-
nav{
background:#666666;
padding:0.5% 0;
font-size:20px;
}
nav ul li{
display:inline-block;
width:12.5%;
table-layout:fixed;
}
nav ul ul {
display:none;
13 | P a g e

padding: 0;
position: absolute;
top:101%;
box-shadow:1px 1px 1px #999999;
width:10%;
}
nav ul ul li {
float: none;
margin-top:1px;
position: relative;
display:block;
width:100%;
}
Portfolio 1.6
Box Model Convention
Box model convention can be clearly understood by the below image. The important
factors are managed by CSS only. Position, margin, border, padding etc. all are
defined in the CSS classes.
14 | P a g e

body{
width:80%;
max-width:1280px;
min-width:700px;
font-family:Droid Serif;
margin:0 auto;
min-height:100%;
position:relative;
background:#CCCCCC;
}
Before Applied BMC
15 | P a g e

After Applied BMC
16 | P a g e

References
Argon Design (2014), 5 Aspects of good user interface, Retrieved from:
http://www.argondesign.com/news/2014/feb/5/5-aspects-good-user-interface/
Fadeyev D. (2009). 8 Characteristics of Successful User Interface. Retrieved from:
http://usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-
interfaces/
17 | P a g e