COIT 20268: Responsive Web Design (RWD) Portfolio 2 Analysis

This report presents an analysis of a responsive web design (RWD) portfolio, focusing on a museum website. The report examines the website's main, section, and article pages, detailing the use of images, color combinations, and attributes. It includes a flowchart illustrating website navigation and discusses the opening hours and feedback form. Test cases and user analysis results are provided, along with assumptions and references. The report highlights the website's usability, layout, and areas for potential improvement, offering a comprehensive overview of the RWD portfolio's design and functionality, including its use of HTML and CSS for structure and styling.

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
The museum of Art & Craft website’s home page mock-up is shown above. The
things of the following cultures - Chinese, Eastern and European are being shown in
the website of museum of Art & Craft. The screen shot of the home page of the
website of museum of Art & Craft is shown below-
3 | P a g e

Section Page
4 | P a g e

The museum of Art & Craft website’s section page mock-up is shown above. One
type of things is being shown on the page e.g. Chinese page. The screen shot of the
Chinese page of the website of museum of Art & Craft is shown below-
Article Page
The museum of Art & Craft website’s article page mock-up is shown above. One type
of things is being shown on the page e.g. Detail of Exercise Ball’s page or About Page
etc. The screen shot of the About page of the website of museum of Art & Craft is
shown below-
5 | P a g e

Portfolio 2.2
Different images that are used in the website are only taken from the resource folder
which is given to make the website. Not a single change is made in any image. The
images are used as it is as given to make the website. Small border is set only like
below-
The pages of the website are looking like below-
6 | P a g e

The colour combination of the website is very nice. It’s a very basic colour. The grey
background is very attractive. The orange colour headings are making a very nice
combination with grey colour.
The images are having white boundary which is looking very nice with grey colour.
All images are using title, src, class and alt attributes. The title is the title that will be
displayed on the images and src is the place where the image is placed and showing
on the website. The class attribute is designing the all images of the website and alt
attribute is used to show the alternate text or image in case of the image is not at the
place that is mentioned in the src attribute.
7 | P a g e

Portfolio 2.3
Flowchart
The flow chart is showing the links on the website. The above image is showing the place of the
page links. All the above links are the main links that are shown on the website as menus. There
are some another internal links also e.g. Map, opening hours etc.
All pages are containing the related information. The opening hour’s page is on the index page of
the website that is giving information about opening hours and fee about the museum while the
map page is showing the map of the museum.
Portfolio 2.4
The museum’s opening hours and fee are showing the opening hour’s page. The
complete detail is showing in the bullet form and clearly visible to the users. The user
can take information from the website and can visit the museum accordingly.
8 | P a g e
Museum of
Art & Craft
Home Chinese Eastern European About Contact Feedback

The html tag <ul> and <li> are being used to show the information in the bullet form.
Portfolio 2.5
The feedback form on the website is used to give feedback about the website or
museum by users.
The user has to enter all the personnel details like gender, name, age, country etc.
The user has to fill the mandatory fields. The fields that mandatory, the user has to
enter the detail in that fields are necessary.
Portfolio 2.6
Test Cases –
Test Cases
1. Menu = Museum sub menu = Chinese
2. Menu = Museum sub menu = Eastern
3. Menu = Museum sub menu = European
4. Menu = Museum sub menu = About
5. Menu = Museum sub menu = Contact
6. Menu = Museum sub menu = Feedback
7. Menu = Chinese, sub menu = Exercise Balls
8. Menu = Eastern, sub menu = Clay Vase
9. Menu = European, sub menu = Iron Goose
9 | P a g e

Analysis
The users analysed the website and gave the following results-
User Time in Website
analysis
Easy to use Required changes Good Layout
A 8 min. Y N Y
B 10 min. Y N Y
C 12 min. Y Y Y
D 15 min. Y N Y
(Argon Design 2014)
(Dmitry Fadeyev 2009)
Assumptions
The website has some assumptions like below-
- All tags are used in the images like class, src, title etc.
- The contact and about page is also given in the website.
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/
Dmitry Fadeyev 2009, 8 Characteristics of Successful User Interface, Retrieved from
http://usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-
interfaces/
10 | P a g e