Responsive Web Design Portfolio Report - Web Design & Development

This report presents a responsive web design portfolio, focusing on the development of a website for the Museum of Art & Craft. The report begins with a project proposal, outlining the website's purpose, target audience, and design considerations. It details the main page sections, content organization, and site specifications, including client requirements and technical aspects. The report emphasizes the use of HTML5 and CSS3, with a particular focus on CSS implementation, including external CSS and the application of different classes for formatting various elements. It also covers type hierarchy, heading levels, and the use of hyperlinks. The report concludes with a discussion of the box model convention, which is essential for website layout and design. References to relevant resources are also provided.

Responsive Web Design
Portfolio 1
Tutor:
Student ID:
Student Name:
1

Contents
Portfolio 1.1....................................................................................................................2
Portfolio 1.2....................................................................................................................4
Portfolio 1.3....................................................................................................................7
Portfolio 1.4....................................................................................................................9
Portfolio 1.5..................................................................................................................10
Portfolio 1.6..................................................................................................................11
References....................................................................................................................12
Report
Portfolio 1.1
Project Proposal
 Title of the Site – The Museum of Art & Craft
 Developer – Name
 Motive of the Website – the main focal point is to promote business of the
Museum and to spread the information all around the world.
Planning the Site
Main elements–
- Mani page that is showing all the available products on Museum of Art &
Craft online and other pages that are showing particular type of products e.g.
Chinese, European etc.
- Navigation bar is used to connect other pages on one page. Same navigation
bar is applied in all pages.
Content– the website content is correlated to the products of Museum of Art & Craft.
Audience– the website is targeted to every person. Persons may be of any age group.
It is very helpful and informative.
2

Design Considerations– following design standards are used in making the website -
- Must work properly on each browser.
- Should be in the resolution 1024x768 and 1280x102.
- Languages HTML5 and CSS3 should be used.
- Should have good and easy layout.
Limiting Factors– following limiting factors are seen in making the website of
Museum of Art & Craft-
- No programming tool is allowed in making the website.
- No other language is allowed in making the website.
3

Portfolio 1.2
Main Page
4

Section Page
Specific types of products will be shown on this page e.g. types of Chinese products.
5

Content Page
The content page sows the information related to one specific topic e.g. about page in
the website.
Look and style can be changed by taking different colour combination, navigation
bare etc.
6

Portfolio 1.3
Site Specification
Client of the Website: the Museum of Art & Craft.
Client Specification-
1. The logo of the Museum exists on each page.
2. Opening hours page will open in new window.
3. Image should be used exactly as provided without any change in it.
4. Website should be in the resolution 1024x768 and 1280x102.
5. Languages HTML5 and CSS3 should be used.
Mission- the mission is to promote the business of the Museum online and to give
detail about the Museum of Art & Craft to the people all over the world.
Measurement of Success-
More people come on the website increase the visitors on the Museum of Art & Craft.
Intended Audience- the people of any age can take benefit of the information of
Museum as it is having detailed information about different cultured products.
Website of the Museum is having enough information for each type and age group
peoples.
User Satisfaction- the success measurement of the website depends upon the user’s
satisfaction. If the user of the website or any business is satisfied, the business will
grow automatically.
Technical Issues –
There are not so much technical matters. One technical problem may occurred is -
server down.
7

Flowchart –
Description of the Flow Chart-
1. Each webpage is having navigation bar enclosing the links – ‘Home’,
‘Chinese’, ‘Eastern’, ‘European’, ‘About’ and ‘Contact’.
2. Two pages – Opening Hours and Map are linked on the Home page only.
Website Structure-
The structure of the website is very easy to use and attractive. Every user can easily
find the feature provided on the website.
8
Museum | Home Page
Home Chinese Eastern European About Contact
Opening Hours Map

Portfolio 1.4
CSS Implementation – the best technique to layout the html web pages is CSS.
External CSS is one of the best way to layout the html pages. External CSS is
implemented in the Museum of Art & Craft website.
Different classes are created in the external CSS for different purposes like for the
formatting of headings there is different class, for the formatting of body there is
different class as shown below-
Body Class
Body {
It does formatting of the body of entire page.
}
Header Class
Header {
It does formatting of the header of entire page.
}
header image{
It does formatting of the images of entire page.
}
Footer Class
footer {
It does formatting of the footer of entire page.
}
Others
navigation {
It does formatting of the navigation bar of entire page.
}
navigation ul {
It does formatting of the body of items of navigation bar of entire page.
}
navigation li {
It does formatting of the body of items of navigation bar of entire page.
}
Link tag works to apply formatting the HTML pages by external CSS.
9

Portfolio 1.5
Type Hierarchy
Styles and Typefaces: HTML pages are formatted by the styles and typefaces by
using internal and external CSS but the best way to use styles and typefaces is by
using the external CSS.
Body Style
Body {
It does formatting of the body of entire page.
}
Heading Style
Header {
It does formatting of the header of entire page.
}
header h3{
It does formatting of the only h3 headings of entire page.
}
Heading Levels
6 heading levels can be used in html pages. Three types of heading are used in the
HTML pages. Main page is using the H1 and H3 heading while other secondary and
content pages are using the H5 heading. H1 is the biggest heading and H2 is smaller
than H1, H3 is smaller than H2 and so on.
Hypertext Links
Hyperlinks are the links that are used to open new web pages or images etc. In
navigation bar hyperlinks are being used and the images are also using the hyperlinks
on main page.
10

Portfolio 1.6
Box Model Convention
Box model convention has following formatting standards- Padding, Border, Position
and Margin. All these standards are defined in the classes of the CSS like below-
.Body
{
Padding:
Border:
Margin:
}
Without Box Model Convention
11

With Box Model Convention
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
topdesignmag.com, 2014, 20 Examples of Bad Web Design, Retrieved from:
http://www.topdesignmag.com/20-examples-of-bad-web-design/
12