Responsive Web Design
Portfolio 1
Introduction
The report is briefing about House of Card’s website. The
complete CSS detail, website designing, important features, target audience, website
mission etc., all are mentioned in the report.
The report is giving complete detail about House of
Card. Al important cards available at the shop, business hours etc.
Portfolio 1.1
Project Proposal
·
Site title: House of Cards
·
Developer: Software Developer
·
Rationale or focus – the website is giving
detail to the customers about its products like greeting cards, plating card
and postcards etc. the main focus of the website to facilitate the customers to
easily access the shop.
Planning the
Site
Main elements–
Home Page: the
home page of the website is containing all the important details e.g. all types
of cards, business hours, shop floor plan etc.
Navigation Bar: navigation bar is containing the important links e.g. Greeting
Cards, Playing Cards, Postcards, About, Contact Us etc.
Content: the content on the website is related to
the House of Cards. All the details about House of Cards are displayed on the
website. All products are displayed according to the category e.g. Greeting
Cards, Playing Cards, Postcards etc.
Target Audience: the website of House of Cards is appealing each
type of people as all persons use different types of cards on different
occasions.
Design Considerations: following design considerations are used in
the website of House of Cards-
1. The website is friendly will all browsers
like Google chrome, Firefox, internet explorer etc.
2. It is built in HTML5 and CSS3.
3. No database is connected to the website.
4. Resolution 1024x768 to 1280x1024 pixels are
used.
Limiting Factors: following limiting factors are used in the
website of House of Cards-
1. No other language except
HTML5 and CSS3 can be used in the website.
Portfolio 1.3
Site
Specification
Client: House of Cards.
Client Specification:
-
The
website logo should be present at all pages.
-
Business
hours should be shown in new page.
-
All
images should be used as it is.
-
Link
of all pages should be on the home page.
Mission:
The website’s mission is to endorse the business all
over the world and to help the customers to know about the house of cards. Its
cards, its floor plan, business hours etc.
Site’s Success Measurement:
-
The
business growth increases on the success of the website. If the business is
growing, it is the best success measurement of the site.
-
If the
traffic load on the website increases, it is the best success measurement of
the site.
Intended Audience: the website of House of Cards is appealing
each type of people as all persons use different types of cards on different
occasions
User Satisfaction: user satisfaction is the most important
for every business. On each website, the option of user feedback should be
given.
Technical Issues in the
Site’s Development: some
technical issues may be found in the development of the website-
-
The
Website server may be slow or down.
-
The
website is the desktop friendly. It may not work well on the mobile.
Flowchart:
Flowchart Description:
-
Home
menu is the major menu that is linking with other menus.
-
All
the above mentioned menus are on the navigation bar and all pages are having
the same navigation bar.
Reason to Select the
Particular Structure: the
website structure that is chosen for the House of Cards, is chosen because of
the following reason-
-
It is
familiar to everyone.
-
Very
easy to use.
-
Highly
visible and clear navigation bar.
Portfolio 1.4
Implementation of CSS3: CSS is very important for the HTML website.
It manages the complete website design at one place. There are two types of
CSS- Internal and External.
In this website, external CSS is used to manage the
website design at one place.
Some CSS classes are showing below-
Body Class
body{
width:
font-family:
margin:
background:
}
Header Classes
header {
padding:
}
header h1 {
margin:
width:
text-align:
font-size:
}
Footer Class
footer {
background:
padding:
font-size:
width:
}
The external CSS is linked on the web pages like
below-
<link rel="stylesheet"
href="css\style.css" />
Portfolio 1.5
Type Hierarchy
Styles and Typefaces: style and typefaces are designed by the CSS
like below-
Body Class
body{
width:
font-family:
margin:
background:
}
Header Classes
header {
padding:
}
header h1 {
margin:
width:
text-align:
font-size:
}
header h3 {
margin:
width:
text-align:
font-size:
}
Heading Levels
Heading levels are different in HTML. Following
heading levels are used in the website-
-
H1 - main
heading.
-
H3 –
index page headings.
-
H5 –
other page headings.
Hypertext Links
-
Hyperlinks
are used in the navigation bar.
-
All
images on the index page are having hyperlinks to open new pages.
In CSS, hyperlinks are defined like below-
Nav ul li a {
text-decoration:
color:
text-align:
width:
display:
font-size:
}
.img
{
width:
height:
margin-left:
margin-top:
}
section#home h5 {
text-align:
width:
background:
padding:
margin-left:
margin-right:
}
body{
width:
font-family:
margin:
min-height:
background:
}
Comments
Post a Comment