Responsive Web Design (RWD)

Background

Global Toys, is a sole proprietor business, specialising in selling toys. Their shop lot occupies approximately one acre of floor space and is located in a metropolitan city. By most standards, the shop is huge and customers have difficulty in finding their way around. The owner of the business has contracted you to develop a website providing information about the shop. The website is not an online ordering system. Instead, it is a website to provide more information about the shop layout and the selection of toys it sells.

Weekly Individual Case Project

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 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.

Assessment details for: Practical Assessment

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. 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.

Attachment:- Assignment File.rar