A digital library is redesigning its reading-club website. Fig. 1 compares a wide-screen layout with the layout shown to a visitor using a narrow phone scre...
Question 1 Report
A digital library is redesigning its reading-club website. Fig. 1 compares a wide-screen layout with the layout shown to a visitor using a narrow phone screen. The existing document uses fixed-width columns, causing the text to become too small on phones. The librarian wants a responsive design that keeps the same information but changes the arrangement. The image is decorative on the phone version, whereas the event title, date and booking link must remain visible. The web author must create and save a stylesheet that can be reused across all club pages.
(a) Identify three visible changes between the desktop and phone versions in Fig. 1. [3]
(b) Explain why a responsive layout is preferable to maintaining a separate phone-only website. [4]
(c) Create CSS, including an appropriate media query, that displays .event-image and .event-details side by side on screens wider than 700 pixels, but hides .event-image on screens 700 pixels wide or less. [4]
(d) Give four checks the librarian should carry out after resaving and publishing the website. [4]
Answer Details
(a) Three visible changes are that the desktop layout has an image while the phone layout does not, the desktop image and details are side by side, and the phone layout uses one narrow column. The phone header/page area is also narrower. [3]
(b) A responsive site is preferable because there is one set of pages and content to maintain. A change is made once rather than separately on two sites; the same URL can be shared or bookmarked; the layout adapts to many screen sizes; and duplicate or inconsistent information is avoided. [4]
(c) One valid solution is:
.event-container {
display: flex;
}
@media (max-width: 700px) {
.event-image {
display: none;
}
}The default flex layout places the image and details side by side on screens wider than 700 pixels. The media query applies at 700 pixels or less and hides the decorative image. [4]
(d) Record checks such as testing every link, testing the booking link or form, checking layout at different screen widths, and checking that images load with suitable alternative text. Other valid checks include HTML/CSS validation, spelling and dates, keyboard navigation, and HTTPS loading. [4]
Download The App On Google Playstore
Everything you need to excel in your exams
