Reference no: EM131015438

Follow the instructions given below and reference should be in harvard style

Responsive Web Design (RWD)

Background

Robot Expo, is a government sponsored exhibition. They have contracted you to develop a website for the exhibition. You have been provided with the following initial and technical specifications.

Memo: Website Requirements
From: Robot Expo, Senior Management
To : WIMP Engineering R&D Consultants

Specification

Design and develop a website. The idea is to provide information to tourists visiting the exhibition. The goal is to allow visitors to obtain an overview of the exhibition layout and to find details of exhibits they would like to visit.

Resources

Resources such as images and details of opening hours can be found in ProResource.ZIP. The content of the ZIP file is:

1. Four folders named Domestic Robots, Educational Robots, Industry Robots and Military Robots. Each folder contains images relating to the different types of technology indicated by the name of its folder.

2. A text file Robot_List.txt contains the names of the artefact corresponding to each of the image from each folder. You need to use these names as the official description of the artefact on your web site.

3. A text file Time_Fees.txt containing the time-table of opening hours and entrance fees to the exhibition.

4. Logo.png & Logo.jpg - image of the logo of the exhibition in different format. You can use either.

5. Navigation_Map.jpg - floor layout of the exhibition.

General Requirements

The managers of Robot Expo insist that the following requirements must be adhered to:

1. Each webpage of the website must display the Robot Expo logo.

2. Do not change the description of the artefacts. Do not rename the filenames of any of the images.

3. All images of each artefact must be presented to the visitor. This can be done within one webpage or distributed across several web pages. The idea is to ensure that visitors are made aware of the complete selection of items available for them to visit.

4. The images are to be used as it is. You can resize the images retaining the original aspect ratio, but do not crop or edit (e.g. recolour, touch up, sharpen, etc.) or rename the images in any way.

5. Generate a separate page providing the opening hours and entrance fees. The details are found in the Time_Fees.txt file.

6. Text description for each artifact is not provided. You can provide your own ‘dummy' text to demonstrate the functionality of your web page design.

Assessment details for: Portfolio 1.

You will complete a different section of the given project as specified in Background section above. Each of the weekly Individual Case Project, found at the end of each chapter, will contribute progressively toward the completion of the given website project. Each weekly Individual Case Project corresponds with the textbook chapters from each week's lesson plan.

You are to document and report on each of these weekly Individual Case Project, cumulating in a final portfolio (i.e. Portfolio 1). Portfolio 1 should be submitted along with Practical Assessment 1.

Portfolio 1.1

Write up the following project proposal :
• Site title-Specify the working title for the site.
• Developer-Identify yourself.
• Rationale or focus-Explain the content and goals of the site.

Planning the Site:
• Main elements outline-Describe the main features of the site.
• Content-Estimate the number of individual web pages.
• Target audience-Describe the typical audience for the site.
• Design considerations-List the design goals for the site.
• Limiting factors-Identify the technical or audience factors that could limit the design goals of the site.

*At this stage, your proposal and planning is primarily a draft. You will have a chance to modify the proposal and supplement the design details at different phases of the project.

Portfolio 1.2

Visualize the page design for your site by sketching a number of page layouts for different information levels of the site. For example, sketch the main page, a secondary page, and a content page. You do not have to be concerned with the exact look of the elements, but be prepared to indicate the main components of the pages, such as headings, navigation cues, link sets, text areas, and so on.

Start to organize your site. Create a visual diagram that indicates the main page, section pages, content pages, and so on. Indicate the links between the pages. Indicate whether you will provide alternate navigation choices such as a table of contents and site map.

* Your figures and sketches can be hand drawn on paper or created using a drawing application. To submit hand drawn sketches, please scan or use a digital camera to capture the originals.

Portfolio 1.3

Write a site specification for the website project. Include as much information as possible from the project proposal you completed at the end of Portfolio 1.1. Make sure to include a mission statement. Determine how you will measure the site's success in meeting its goals. Include a description of the intended audience. Describe how you will assess user satisfaction with the site. Include technological issues that may influence the site's development or function.

Prepare a detailed flowchart for your site using the preliminary flowchart you created at the end of Portfolio 1.2. Create a filename for each page, using a consistent naming standard. Indicate all links between pages. Write a short summary that describes the flowchart. Describe why you chose the particular structure, how it suits your content, and how it benefits the user. Use the page layouts you sketched in Portfolio 1.2 to create the wireframes.

Portfolio 1.4

Revisit your project proposal and the site specifications you created in Portfolio 1.1. How will you implement Cascading Style Sheets (CSS3) into your project web site? In the next few weeks, you will learn how to control typography, white space, borders, colors, and backgrounds with CSS3. Think

1.5

about each of these style characteristics and how you will apply them to your page designs. In addition, make a list of possible class names you might use to identify your content.

For example, consider using class names for the following page characteristics, as well as creating some of your own:

• Body copy
• Header (possibly different levels)
• Footer

Portfolio 1.5

Design the type hierarchy for your web site. Create a type specification HTML5 page that shows examples of the different typefaces and sizes and how they will be used. This can be a mock-up page that uses generic content but demonstrates the overall typographic scheme. Consider the following questions:

• What will be the typefaces and styles for the body type and headings?
• How many levels of headings are necessary?
• What are the different weights and sizes of the headings?
• How will text be emphasized?
• Will hypertext links be standard or custom colors?
• How will you ensure the legibility and readability of your text?
• What will your line length be?

Portfolio 1.6

Create the box model conventions for your web site. Build on the typographic classes you created in Portfolio 1.5 . Think about the different spacing requirements for your content, and decide how the legibility can be enhanced using the box properties. Add this information to the type specification HTML page that shows examples of the different typefaces and sizes and how they will be used. Decide on margins, padding, and borders, and select the elements that will benefit from their use. Create before-and- after sample HTML5 pages that reflect the enhanced design.

Design your website to fit a desktop computer display for an approximate screen resolution between 1024x768 to 1280x1024.

Complete Portfolio 1

Consolidate and compile all your previous efforts from Portfolio 1.1 to 1.6 into a DOC or DOCX report. Present this as a formal report to the client that contracted you for this project. For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report.

All sketches, diagrams and figures should be embedded as part of the report. Do not submit external files. For webpage renderings of HTML5 or CSS3, please include screen captures of example of your web pages. Do not submit HTML5 or CSS3 script files with your Portfoilio.

The format of your report should be as follows: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format

Assessment 1

To complete the given project specified in the Background section above, you are to create a prototype of a stand-alone website for a desktop computer. Design your website to be rendered by a web browser to fit a desktop computer display between 1024x768 to 1280x1024 pixels. The site must have pages that display at least three levels of information. The contents and resources have been provided in the above specification. The website will be assessed for cohesiveness, accessibility, design and development effort.

The prototype stand-alone website should be created progressively as specified by each week's activities. These activities are to be documented and reported in Portfolio 1. It is understandable that by the end of Portfolio 1, there are specific techniques or skills that remain to be presented and taught to you. For all purpose and intention of Practical Assessment 1, your knowledge up to this point will be sufficient for you to complete a prototype stand-alone website for a desktop computer. You will be marked according to your knowledge demonstrated at this point. You will not be penalised for not demonstrating techniques that have not been presented or taught to you by the end of Portfolio 1 activities.

Use any combination of HTML5 and CSS3 to develop this website. Remember to indicate which desktop browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform. Do not use Rapid Application Prototyping (RAD) tools or any other type of scripting languages or services, e.g. Python, Lua, AJAX, Dreamweaver, etc. You are required to demonstrate your knowledge of HTML5 and CSS3 independently and without the assistance of automated development and visual design tools. Your website should be developed to be capable of launching directly from localised desktop computers. That is, the landing page (i.e. the first page or top page) of your website can be launched by calling or opening main.html or index.html directly from within a web browser. No web server is required for Practical Assessment 1 and 2.

Assessment details for: Portfolio 2

What You Need to Do

The Individual Case Project specified in Portfortlio 2 is a continuation from Portfolio 1.

At the end of each week, you will complete a different section of the given project as specified in the above section. Each of the weekly Individual Case Project will contribute progressively toward the completion of the given website project. Each Individual Case Project corresponds with the textbook chapters from each week's lesson plan. You are to document and report on each of these Individual Case Project, cumulating in a final portfolio (i.e. Portfolio 2). Portfolio 2 should be submitted along with Practical Assessment 2.

Portfolio 2.1

Use your design sketches from Portfolio 1 and start to build wireframe page mock-ups for the different page levels of your site. Your website should adopt a flexible design. Using the skills you learned in this chapter, build and submit page layouts for the different levels of information your site will contain. For example, you need to build a home page mock-up, an article page mock-up, and a section page mock-up. Remember to test your page mock-ups with some text content and at different browser sizes and screen resolutions as specified in the details for Practical Assessment 2.

Portfolio 2.2

Gather the graphics to use on the different pages of your site. This is provided in the RESOURCE.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 can enhance 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.

Portfolio 2.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 Assessment 2.

Portfolio 2.4

Examine the content of TIME_FEES.TXT provided in the RESOURCE.ZIP. Design and implement the data contained in this file to be appropriately displayed as a table the project website.

Portfolio 2.5

Design and include forms in the project website. The forms will be used to gather contact details of visitors to the website. Include the following fields:

• Name
• Age
• Gender
• Country of Origin
• Personal Interest
• Comments

Portfolio 2.6

Finalize 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 these assumptions.

Complete Portfolio 2

Consolidate and combine all your previous efforts from Portfolio 2.1 to 2.6 into a DOC or DOCX report. Present this as a formal report to the client that contracted you for this project. For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report.

All sketches, diagrams and figures should be embedded as part of the report. Do not submit external files. For webpage renderings of HTML5 or CSS3, please include screen captures of example of your web pages. Do not submit HTML5 or CSS3 script files in your Portfolio.

The format of your report should be as follows: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format.

Assessment 2

What You Need to Do

To complete the given project specified in the Background section above, you are to create a prototype of a stand-alone website for a desktop computer and mobile device. Design your website to be rendered by a web browser to fit a desktop computer display between 1024x768 to 1280x1024 pixels. The website should also adapt responsively to mobile devices. The breakpoint between the display sizes for desktop computer and mobile device should be 500x720 pixels. The mobile device should also adapt responsively when it is rotated to a landscape orientation.

The site must have pages that display at least three levels of information. The contents and resources have been provided in the above specification. The website will be assessed for cohesiveness, accessibility, design and development effort. Responsiveness of each of the webpages will be tested using Google Chrome's developers device simulator. The breakpoint for the simulated mobile device will be set to 500x720 pixels.

The complete stand-alone website should be created progressively as specified by each week's activities. These activities are to be documented and reported in Portfolio 2.

Use any combination of HTML5 and CSS3 to develop this website. Remember to indicate which desktop browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform for desktop computers. As for mobile devices, please use a generic device with a display of 500x720 pixels to be tested using Google Chrome's developers device simulator.

Do not use Rapid Application Prototyping (RAD) tools or any other type of scripting languages or services, e.g. Python, Lua, AJAX, Dreamweaver, etc. You are required to demonstrate your knowledge of HTML5 and CSS3 independently and without the assistance of automated development and visual design tools.

Your website should be developed to be capable of launching directly from localised desktop computers. That is, the landing page (i.e. the first page or top page) of your website can be launched by calling or opening main.html or index.html directly from within a web browser. No web server is required for Practical Assessment 1 and 2.
Main Task

Select and undertake an in-depth evaluation of the following website:

Website: https://www.bunnings.com.au/ (Bunnings Warehouse)

Upon the completion of the task, you are to provide a formal report documenting your critical evaluation of the website. The review is to be carried out within the context of responsive web design (RWD) and development principles. The report should draw particular attention to the interactive aspects and design aspects relating to responsiveness of the overall website. Support your critique with appropriate RWD principles.

Assessment:

What to Review

The purpose of the report is to provide a critical evaluation of the nominated website and to support your observations and comments convincingly. The nominated website should be reviewed using Google Chrome's device simulator. For the purpose and intention of this assessment, use only the device simulator for your reviews. This is to ensure that all students have access to consistent and identical review tools.

Your review of the nominated website must be thorough and sufficiently comprehensive to include 5 different screen displays. The recommended settings are as follows. Students are free to select the different simulated device (in the Chrome device simulator) they would like to use for the reviews.

(1) Large Display- Generic notebook or desktop with display greater than 1280x768 pixels.

(2) Medium Display- Any mobile device with display approximately 480x640 to 700x960 pixels, in both landscape and portrait orientation.

(3) Tiny display- Any mobile device with display approximately 200x320 to 400x640 pixels, in both landscape and portrait orientation.

What to Include

Your report should include:

(1) Clearly identify the nominated website. Provide an overview and description of the nominated website.

(2) Identify and elaborate the main feature or features of the website.

(3) Identify the positive and negative aspects of the website. Draw particular attention to the interaction and usability aspects of the interface.

(4) Invite two other persons to review the nominated website. All reviewers should use identical device settings. These participants can be your friends, family members or classmates etc. Provide the background (i.e. age, gender, profession) of the participants. Do their views differ from yours'? State why or why not.

(5) Based upon your critique and observation in items (1) to (4) of the above, provide a recommendation on how the website should be improved. Conversely, if it does not require further improvement, then provide the reason why that this is the case.

(6) Except for item (4) of the above, all assertions relating to RWD design principles (e.g. statements like ‘blue text on red background is a poor colour combination' ) must be supported by references or critical observation. You can cite additional scholarly references other than the textbook. (Note: Do not use Wikipedia as a source of reference).

(7) Comment on the tools (i.e. Chrome device simulator) you used for the review. Elaborate on the advantages and disadvantages of such a tool. Search and briefly comment on similar tools available for testing and reviewing RWD web pages.

(8) Figures or diagrams can be added as needed.