Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

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 out attending an event. 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 Chromes Device Toolbar, as described in Block 3 Part 1 Activity 5). Your solution is not required to respond appropriately to widths less than, between, or greater than these two values.
Hint: as you saw in Block 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 Block 3, the file emaMobileResources.zip provides a further example of some HTML and CSS which you can adapt if you wish.
Validate your HTML using the W3C 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 the tag of your source code just below.
Collect the files that make up your 2(a) and 2(b) solutions into a single folder, retaining any folder structure that you may have created. Please name the folder using your own OUCU (namely OUCU_Q2) and record the folder name 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.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions