Question 2: Responsive design (30%)
2(a) ‘Add walk event’ page for laptop screen
This part of the question is about the admin application.
The admin team is keen to see some ideas for the visual design of the admin application. Given that the application is not accessible to the public, the design is not required to meet the OUICE guidelines, but the implementation must be standards-compliant.
Your task is to create and validate a web page containing a form to allow a member of the admin team to add a walk event. The overall page layout should beconsistent with your wireframesand must be valid HTML and CSS. The page must, of course, be an actual realisation of the corresponding wireframe component and not simply a repetition of a part of the wireframe itself.
- The form should work and submit data to the TT284 reflector: http://students.open.ac.uk/mct/tt284/reflect/reflect.php. You are not required to implement any PHP to process this data at this stage.
- The form should include a hidden field. The field should be named ‘sessionID’ and should contain the value ‘abcd1234-ee56-ff78-9090’.
- The page should use a CSS style sheet.
- As with the wireframe, the page should be easy to use on a laptop or desktop screen (1024px wide, landscape orientation, e.g. 768px high).
- The page and form should be accessible.
- The form may use HTML5 input types described inBlock2 Part3, but validation of input data is not required at this stage.
- Any admin application navigation features proposed in your wireframes should be present on the page, but are not required to function.
- The web page and any related files should be clearly named e.g. ‘q2a.html’, ‘q2a.css’.
Validate your HTML using theW3C Markup Validation Service.
You can validate the file by uploading it directly to the validator service. Make sure that you are using the HTML5 option. There should be no errors reported. As with earlier assignments, you are not required to address any warnings that may be reported. You should also validate your CSS, but you are not required to provide evidence of this.
Ensure you read Question 5 before completing Question 2.
In your document, for your marker, provide a screenshot of the part of the page that shows the line ‘Document checking completed’ and the tags within thetag of your source code just below. Record the filename of your 2(a) HTML file so that your marker can open and test it.
2(b) Responsive ‘Add walk event’ page
This part of the question is about the admin application.
Some members of the admin team are interested in the possibility of carrying out some admin tasks using a mobile device; for example, while they are on a walk. They would like to see how the admin application might be presented on a mobile device.
Your task is to make a copy of your solution to 2(a) and amend the CSS and HTML as appropriate to present the same form on a smartphone-sized screen.
- Use techniques you have learned in Block 3 to allow the page layout to respond to screen width, such that the page and form are also usable on a mobile device screen (375px wide, portrait orientation, e.g. 667px high). Both the form and the page navigation should be responsive.
- No changes to functionality are required, but you may consider HTML5 inputs even if you did not use these in your 2(a)solution.
- The page and form should continue to be accessible (consider any accessibility decisions you made in 2(a)).
- Take care not to change your original 2(a)solution files.
- The web page and any related files should be clearly named e.g. ‘q2b.html’, ‘q2b.css’.
Your 2(b) solution should work for two combinations of device and orientation: a mobile device in portrait orientation and a laptop device in landscape orientation. Therefore, your solution should work at two screen widths: 375px and 1024px (‘Mobile M’ and ‘Laptop’ in Chrome’s Device Toolbar, as described inBlock3 Part1 Activity5). Your solution is not required to respond appropriately to widths less than, between, or greater than these two values.
Hint: as you saw inBlock 3 Part 3, page layout on mobile device screens is typically a single column, with the most useful or commonly used content or functionality presented sooner. For forms, labels are often presented above inputs rather than to their left. In addition to examples provided in Block3, the file ‘emaMobileResources.zip’ provides a further example of some HTML and CSS which you can adapt if you wish.
Validate your HTML using theW3C Markup Validation Service. You should also validate your CSS, but you are not required to provide evidence of this.
In your document, for your marker, provide a screenshot of the part of the page that shows the line ‘Document checking completed’ and the tags within thetag of your source code just below.
Collect the files that make up your 2(a) and 2(b) solutions into a single ZIP archive, retaining any folder structure that you may have created. Please name the file using your own OUCU (namely ‘OUCU_Q2.zip’) and record the filename for your marker in your document. Record the filename of your 2(b) HTML file so that your marker can open and test it. Note that your 2(a) and 2(b) solutions must work independently of each other.
2(c) Explanation and recommendation
This part of the question is about the admin application and the club website.
In your document, for the admin team, describe the features of the page design in your 2(b) solution that make it responsive. Describe any choices or compromises you made or difficulties you encountered in making the page and form responsive, usable and accessible on a mobile screen. Explain why you made such choices and compromises. (It does not matter if you made these changes in your 2(b) solution or they were already present in your 2(a) solution.)
Then, given this experience, and drawing on your view of the likely needs of club members and the admin team, discuss whether the admin team should focus on making either the club website or the admin application (or both) responsive to mobile devices, or whether they should consider another approach.