Responsive Web Design (COIT 20268) Portfolio 2 Report Analysis

This report presents a comprehensive analysis of a responsive web design portfolio (Portfolio 2) for the COIT 20268 course, focusing on the development of a museum website. The report details the website's structure, including the main page, section pages, and article pages, highlighting the use of specific images with special effects and transitions. It outlines the website's navigation flow using a flowchart, showcasing the menu structure and linked pages. The report also covers the implementation of an opening hours and fee section using HTML lists and a feedback form for user input. Furthermore, it includes a series of test cases to evaluate the website's functionality and user analysis, providing insights into user experience and design effectiveness. The report concludes with assumptions, references to relevant sources, and an overall evaluation of the project's design and usability, demonstrating the student's understanding of responsive web design principles and best practices.

COIT 20268 - Responsive Web Design (RWD)
(Term 2 – 2017)
Portfolio 2
Student Name:
Student ID:
1 | P a g e

Contents
Portfolio 2.1....................................................................................................................3
Portfolio 2.2....................................................................................................................6
Portfolio 2.3....................................................................................................................8
Portfolio 2.4....................................................................................................................8
Portfolio 2.5....................................................................................................................9
Portfolio 2.6....................................................................................................................9
References....................................................................................................................10
2 | P a g e

Report
Portfolio 2.1
Main Page
Museum of Art & Craft website is showing the complete detail about museum of Art
& Craft. The home page is showing all available items of the museum. Chinese,
Eastern and European types of things are available on website’s home page.
3 | P a g e

Exact home page is looking like this-
4 | P a g e

Section Page
The section page of the Museum of Art & Craft website is showing the complete
detail about one subject e.g. Chinese things, European things etc. The above picture is
showing the rough idea about section page. Exact section page is looking like this-
5 | P a g e

Article Page
The content page of the Museum of Art & Craft website is showing the complete
detail about one subject e.g. information about a specific item of Chinese things,
European things etc. The above picture is showing the rough idea about content page.
Exact content page is looking like this-
6 | P a g e

Portfolio 2.2
All used images are the provided images only. No image is cropped or changed at all.
All are having a special effect or transition and a thin border to give attractive look to
the website.
Website pages are looking like below-
7 | P a g e

Green and grey colour combination is used to make the website layout. Green colour
is on the background while grey in the middle division.
The image tag has so many attributes like Src, Title, Class and Alt. All attributes have
specific value and uses. The Alt attribute is used to display alternate text if the image
is not found the location that is given in the Src attribute. The title attribute is used to
display the title of the image and Class attribute is used to show the images in a
specific form.
8 | P a g e

Portfolio 2.3
Flowchart
Flow chart is showing all important menus on the web pages. All the given menus are at the top of
the website. All are linked with the navigation bar. There are some more pages in the website but
that are not necessary and required to use in the menu bar. Therefore, those are connected at the
home page of the museum website.
The pages that are available at the home page only- Map and Opening Hours page. Both pages are
giving detail about map of the museum and timings and fee of the museum respectively.
Portfolio 2.4
The opening hour and fee of the museum is being displayed in the opening form as
shown below-
The data is showing in the list form because it will be seen clearly to every user. The
time of each day is showing clearly. Html tag <ul> and <li> under <ul> is used in
showing the data in the form of list.
9 | P a g e
Museum of
Art & Craft
Home Chinese Eastern European About Contact Feedback

Portfolio 2.5
The museum’s feedback form is showing below-
It is being used by all users to give feedback about museum or about any service or
functionality of the website etc. Before giving the feedback, the user has to enter the
complete detail about him. All information on the feedback form is mandatory e.g.
age, name, gender, address of the user etc. the user can five feedback about any thing
related to the museum.
Portfolio 2.6
Test Cases –
Test Cases
1. choice = Home secondary menu = Chinese
2. choice = Home secondary menu = Eastern
3. choice = Home secondary menu = European
4. choice = Home secondary menu = About
5. choice = Home secondary menu = Contact
6. choice = Home secondary menu = Feedback
7. choice = Chinese, item = Exercise Balls
8. choice = Eastern, item = Clay Vase
9. choice = European, item = Iron Goose
10 | P a g e

Analysis
The users analysed the website and gave the following results-
User Duration of Analysis Easy to Access Need any Change Good Design
A 5 min. Y N Y
B 6 min. Y N Y
C 7 min. Y Y Y
D 10 min. Y N Y
(The SCO Group Inc. 2004)
(Vitaly Friedman and Sven Lennartz, 2015)
Assumptions
There are some assumptions that are required while making the museum website like
below-
- The images are having a special effect.
- Contact and about forms are created in the website.
- Map page is also created in the website.
References
The SCO Group Inc. (2004), What makes a good user interface, retrieved from
http://uw714doc.sco.com/en/SDK_vtcl/vtclgN.style_goodui.html
Vitaly Friedman and Sven Lennartz, (2015), 12 Useful Techniques for Good User
Interface Design, retrieved from
<http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-
good-user-interface-design-in-web-applications/>
11 | P a g e