Coit 20268 Responsive Web Design Assessment Answer

2.Gather the graphics to use on the different pages of your site. This is provided in the PRORESOURCE.ZIP folder. For other graphics that are not included, please exercise your creativity to create graphics that you will use in the project. These include banner, navigation, section, or identifying graphics. Add these graphics to the test pages of your site. Test the images in multiple browsers to make sure they are displayed properly. Think about the different color requirements for your content, and decide how you canenhance the legibility of the content. Can color help communicate the structure of your information?Determine the color choices for your web site. Pick the colors for text, table.

backgrounds,and page backgrounds.Establish graphics standards for your web site, including but not limited to the following:

•Decide whether you will use a standard amount of white space around each graphic.

•Determine exactly which img attributes should be included in all <img>tags.

•Formulate a standard for all alt and title attributes.

•Formulate a basic set of image standards for your site. Use this as the display standard for testing your graphics.

•Determine colors of links and visited links.

•Write a short standards document that can be provided to anyone who contributes to the site.

3.Examine the flowchart you created for your web site. Consider the requirements of both internal and external navigation. Create a revised flowchart that shows the variety of navigation options you are planning for the web site. Using your HTML editor, mark up examples of navigation bars for your content. Make sure your filenames are intact before you start coding. Save the various navigation bars as separate HTML5 files for later inclusion in your web pages. Plan the types of navigation graphics you want to create.  Use graphics from Portfolio 2.2 for your page banners, navigation buttons, and related graphics.

Do not include the HTML5 script files in your portfolio. Include only a selection of examples of the work you have carried out at this stage. It is assumed that the HTML5 script files will subsequently be improved and expanded and becomes part of your final project for Practical

4.Examine the content of BUSINESS_HOURS.TXT provided in the PRORESOURCE.ZIP. Design and implement the data contained in this file to be appropriately displayed.

5.Design and include forms in the project website. The forms will be used to gather contact details of visitors to the website. (Note: For the purpose of this project, the form need not have a backend server nor functionality. No actual record will be saved.) Include the following fields:

•Name

•Age

•Gender

•Country of Origin

•Personal Interest

•Comments

6.Finalise your project web site by testing the finished design in multiple browsers and devices (simulators) and making any necessary adjustments or changes to support compatibility. If possible, enlist three to five people to review your web site. Ask for their recommendation. Compile the feedback and analyse the results the test. What do the results indicate about the effectiveness of your design. Point out the areas that you feel could benefit from user recommendations. List any assumptions you made about the web site and how users either confirmed or denied theseassumptions.

Answers:

Report

Portfolio Home Page Mock-up

The Home page mock-up is showing above and the exact Home page is as follows-

Section Page

The Section page mock-up is showing above and the exact Sections page is showing below. The section page will contain the information about specific types of cards like Playing Cards or Greeting Cards etc.

The Article page mock-up is showing above and the exact Article page is showing below. The Article page will contain the information about specific cards like Birthday Card etc.

Portfolio

The images that are used in the website are only the images of Resource folder. No image is used in the website from outside. The navigation is fixed in all the pages with following menus-

• Home
• Greeting Cards
• Playing Cards
• Postcards
• About
• Contact

The color combination that is used in the website is light green, white and grey like below-

The color combination is very nice in the website. All images are having border and there is same style of headings. All headings are pink in color.

Every image has attributes- src, title etc. that are vry important for the SEO point of view and very good for the designing and functionality point of view.

Portfolio

The above flow chart is showing the navigation of House of Cards. This navigation link is same for all the pages. There are some other internal links but that are available only at the Home page like Business Hours etc.

Portfolio

Business hours are showing in a separate page in the tabular form. The border of the table is very thick and black in color.

Portfolio

The feedback page is collecting the user detail and showing below-

The page is asking for the user name, gender, age, country, personnel interest etc.

Portfolio

Test Cases –

	Test Cases
1.	Menu = Main, Option= Greeting Cards
2.	Menu = Main, Option= Playing Cards
3.	Menu = Main, Option= Postcards

Users that tested the website has come on the following results-

User	Time	Easy to access	Need changes	Good interface
User 1	5	Yes	No	Yes
User 2	10 m.	Yes	No	Yes
User 3	9 m	Yes	Yes	Yes
User 4	8 m	Yes	No	Yes

(Digital Age Learning 2013)

(TechTerms.com 2013)

Assumptions

Following assumptions are given to the users-

• Use of Google Map
• Use of transitions in images

The users are very happy with these assumptions as both the features are very interesting and useful

Summary

The report is showing the complete working and functionality of House of Cards website. The complete website has given lot of experience from designing to implementing CSS. The CSS is used in designing the website and it is handling the entire website at one place.

The website is using the Google map, transition in images etc. all things are very important and may be used at different places at any website.

After completing this project, I am very confident about making any website from scratch.

References

Digital Age Learning (2013), Overview of User Acceptance Test (UAT) for Business Analysts (BAs) [online], Available from:

https://www.develop.com/useracceptancetests. [Accessed: 28 May 2018]

TechTerms.com (2013), UAT [online], Available from:

https://www.techterms.com/definition/uat. [Accessed: 28 May 2018]