LP6 Assignment: Bootstrapped

This assignment will assess competencies 2. Produce functional and modern web sites, 5. Develop responsive design skills and 6. Develop with industry standard web design and development tools.

Directions:

This assignment will be based on the following scenario about Bob's Small Time Grocery:

Background: Bob's Small Time Grocery has reviewed the latest UI designs and they want to see how the form looks on a tablet and mobile device. The customer had mentioned mobile device support during the LP3 Assignment, but you did not have time to capture those views yet. Your next task must be to create prototypes of the feedback form on a tablet and mobile device. You must use Bootstrap components make the prototypes feel more real and keep the customer engaged.

For this assignment, you will create responsive prototype pages based on the feedback form that you created in LP5 Assignment. These pages must display the form in a viewport-specific way for a tablet and a mobile device. You must create one page for a tablet view and one page for a mobile view. In addition, the prototype forms must use Bootstrap components in Moqups. You will also write a brief responsive design document that shows the pages in the mobile and tablet viewports and describes the user experience of each. This document is intended to show the customer how the feedback form can appear on the various end user devices.

Design Document Components:

Capture a screenshot of the prototype pages for mobile and tablet. Paste each screenshot into the appropriate document section.

First section called "Desktop" that shows a screenshot of the desktop viewport from LP5 Assignment (copying the screenshot from LP5 Assignment is permitted) and discusses the responsive elements of the page for a desktop view.

Second section called "Tablet" that shows a screenshot of the tablet viewport and discusses the responsive elements of the page for a tablet view. Identify any content that is hidden for this view and explain how less content fits better on a tablet viewport.

Third section called "Mobile" that shows a screenshot of the mobile viewport and discusses the responsive elements of the page for a mobile view. Identify any content that is hidden for this view and explain how less content fits better on a mobile viewport.

Paste a link to the Moqups prototype project URL at the end of the document.

Tablet View Components

Create a new Moqups page called "Tablet View Assignment". You cannot reuse pages created during LP6 Learning Activities.

The tablet stencil can be found as iPad under the Legacy collection

Resize the tablet stencil if you need to make form elements fit into the white area in the middle

Tablet shows a form with 2 textboxes, 1 dropdown, 1 textarea, 4 labels, and 1 submit button

Form contains a Name textbox with label "Name"

Form contains an E-mail textbox with label "E-mail"

Form contains a Role dropdown with label "Role"

Form contains a Feedback textarea with label "Feedback"

Form contains a submit button with text "Submit"

Map and e-mail links are not shown

Mobile View Components

Create a new Moqups page called "Mobile View Assignment". You cannot reuse pages created during LP6 Learning Activities.

The mobile phone stencil can be found as iPhone under the Legacy collection

Resize the mobile stencil if you need to make form elements fit into the white area in the middle

Tablet shows a form with 2 textboxes, 1 dropdown, 1 textarea, and 1 submit button

Form contains a Name textbox with placeholder text "Name"

Form contains an E-mail textbox with placeholder text "E-mail"

Form contains a Role dropdown with placeholder text "Role"

Form contains a Feedback textarea with placeholder text "Feedback"

Form contains a submit button with text "Submit"

Field labels are not shown

Map and e-mail links are not shown