Author: purple

Part 1: Critical Analysis of the Original Website

The original version of the Alf’s Cycles website was built during the Design for Web Content module as an introductory project. While it achieved a functional five-page structure with a consistent visual identity, reviewing it with the knowledge gained since then reveals several areas where the design, code quality and user experience fall short of contemporary best practice.

Structure and Semantics

The original site uses HTML5 semantic elements such as , , and , which provides a reasonable baseline. However, there are notable structural issues. The element is used for the site name “Alf’s Cycles” in the header of every page rather than for the page’s primary content heading. This means inner pages like “About” and “Bikes” lack a true content-level, which weakens both the semantic hierarchy and SEO signalling.

Heading levels are inconsistent across pages. On the About page, sections such as “How we work” and “Why visit a local shop?” are marked up as elements, but they sit directly under a, with no intermediate content that would justify skipping to. On the Find Us page, there is a duplicate id attribute (“getting-here” appears twice), which is invalid HTML and could cause issues for both JavaScript and assistive technology.

The homepage index.html has a structural nesting error: the “services-overview” section is never properly closed before the “visit” section begins, meaning the closing tags do not match the opening ones correctly. While browsers are forgiving of this, it represents invalid markup that a validator would flag.

Accessibility

Accessibility in the original site is minimal. The element has no aria-label, making it harder for screen reader users to identify the navigation’s purpose, particularly if the site were to have multiple navigation regions. There is no skip-to-content link, so keyboard users must tab through the entire header and navigation on every page before reaching the main content.
Alt text is present on all images but is sometimes generic or contains a typo – the homepage uses “Bycicles on display” rather than “Bicycles on display”. The contact details on the Find Us page use plain text for the phone number and email address rather than clickable and links, which limits usability on mobile devices and for assistive technology users.
There is no accessibility statement anywhere on the site, and no consideration of ARIA live regions or other dynamic accessibility features.

Search Engine Optimisation

The original site has no tags on any page, which means search engines will generate their own snippets from page content rather than displaying a purposefully written summary. There are no geolocation meta tags (geo.region, geo.placename, geo.position) despite the site representing a local business where geographical findability is critical.
Page titles follow a reasonable pattern (“Bikes | Alf’s Cycles”) but the homepage title is identical to the site name without any keyword enrichment. There is no structured data or Schema.org markup for the local business.

Responsive Design and Layout

The site does use a mobile-first approach with min-width media queries, and the grid-based sidebar layout at 900px works adequately. However, there is only a single breakpoint, which means the layout jumps abruptly from a stacked mobile view to a two-column desktop view with no intermediate tablet consideration.
The card grid for services and bikes uses a fixed image height of 24rem, which can cause awkward cropping on different screen sizes. There are no fluid typography techniques such as clamp() on headings (except for h2 and h3), and the hero text jumps from 1.6rem to 2rem at the breakpoint rather than scaling smoothly.

Visual Design and Typography

The dark colour scheme with amber accents gives the site a distinctive identity, but the typography relies entirely on system-ui with no display font to create hierarchy or personality. The site name in the header is plain text with no logo or visual branding, which makes it feel generic.
The footer is minimal – just a copyright line with a typo (“Independed” instead of “Independent”) and no additional links or information. There is no visual differentiation between the header/footer backgrounds and the main content area beyond a subtle border.

Maintainability and Code Quality

Every page duplicates the full header, navigation and footer markup. Any change to the navigation (such as adding a new page) would require editing all five HTML files manually. This is error-prone and unsustainable as the site grows. The brief explicitly calls for server-side includes for common elements.
The CSS is reasonably well-organised with a clear table of contents and section comments, but uses id-based selectors (#hero, #services-overview, #bike-categories) throughout. While functional, this creates tight coupling between the CSS and specific page structures, making it harder to reuse styles across pages.
Indentation in the HTML is inconsistent across files – the About page and Find Us page use different levels of indentation for the same structure, suggesting the files were edited separately without a consistent formatting standard.

Missing Features

Several features expected in a contemporary small business website are entirely absent from the original version:
No custom 404 error page – visitors who mistype a URL would see the default server error page.
No JavaScript – the brief specifically requests dynamic features such as highlighting today’s opening times.
No embedded map on the Find Us page – the address is given as plain text with no visual location context.
No SVG logo or custom branding beyond the text site name.
No element for the shop’s contact details, which would provide semantic meaning for search engines.
No .htaccess configuration for error handling.
Images are already in WebP format, which is good, but no further optimisation of file sizes has been carried out.

Part 2: Summary of Improvements

The redesigned version of the Alf’s Cycles website addresses every issue identified in the analysis above, while also introducing new features and a significantly upgraded visual design. The improvements span code quality, accessibility, SEO, responsiveness, visual design and user experience.

Branding and Visual Design

The most immediately visible change is the introduction of a custom SVG logo – a stylised bicycle wheel that rotates on hover – paired with the Oswald display typeface for headings. This gives the site a much stronger visual identity while keeping the amber-and-dark colour palette from the original.
The header now features a subtle dot-grid background pattern using CSS radial-gradient, adding texture and depth without any image requests. The footer has been upgraded with centred uppercase text, matching background treatment and links to the accessibility statement.
On inner pages, the plain coloured intro sections have been replaced with gradient amber panels that use a diagonal clip-path edge at the bottom, creating a more dynamic and polished look. Cards throughout the site now have a top-border reveal effect on hover that transitions from transparent to amber, alongside a subtle upward lift and deeper shadow.
Call-to-action links have been styled as proper button elements with uppercase Oswald text, padding and hover effects including a translateY lift and an amber glow shadow. This makes the primary actions on each page much more visually prominent and clickable.

Semantic Structure and HTML Quality

The heading hierarchy has been corrected across all pages. Each page now has its own as the primary content heading (for example, “Bikes in Store” on the bikes page, “Find Us” on the contact page), while the site name has been moved into a linked logo element. This gives each page a clear, SEO-friendly heading structure: h1 for the page topic, h2 for sections, h3 for sub-items.
On the homepage, the service overview cards have been changed from to and , which more accurately represents the image-plus-caption relationship. On inner pages, cards use a neutral pattern with a for the text content, avoiding the semantic overreach of wrapping every card in an .
The Find Us page now uses a proper element for the shop’s postal address, and the phone number and email are marked up as clickable links with tel: and mailto: protocols. The duplicate id attribute from the original has been fixed, and all HTML validates cleanly.
Maintainability: PHP Server Side Includes
To improve maintainability, the site has been converted from static HTML files to PHP, with Server Side Includes for all common page elements. Three include files handle the shared markup: header.php (containing the doctype, head section, skip link, logo and a reference to nav.php), nav.php (the main navigation list), and footer.php (the closing main tag, footer element with dynamic copyright year, and closing body/html tags).
Each page file (index.php, bikes.php, servicing.php, about.php, find-us.php, accessibility.php and 404.php) sets three PHP variables at the top – $pageTitle, $pageDescription and $pageGeoPosition – before including the header. The header template uses these variables to output the correct title tag, meta description and conditionally include geolocation meta tags. This means adding a new page or updating the navigation requires editing only one file rather than every page on the site.
The footer include also uses PHP’s date() function to output the current year in the copyright notice, eliminating the need to update it manually each January.

CSS Architecture

The CSS has been restructured to use class-based selectors throughout (.hero, .card-grid, .intro-panel, .cta) rather than id-based selectors. This makes the styles reusable and decoupled from specific page structures. A .sr-only utility class has been added for screen-reader-only content.
CSS custom properties have been expanded with additional design tokens including –accent-dark, –shadow-card, –shadow-hover and –glow-accent, giving the stylesheet a consistent design language. The link styles now include transitions for smooth colour and background changes, and the visited state uses a distinct darker amber (#c8871a) rather than repeating the primary accent colour.
The nav styling uses the attribute selector nav[aria-label=”Main navigation”] as a hook, which ties the CSS directly to the accessibility markup – if the aria-label were removed, the styles would also break, serving as an implicit check that accessibility attributes are maintained.

Accessibility Improvements

Every page now includes a skip-to-content link that is visually hidden by default but becomes visible and positioned at the top of the page when focused via keyboard. The element has been given an id=”main-content” on every page to serve as the skip link target.
The element has an aria-label=”Main navigation” on all pages. The SVG logo uses aria-hidden=”true” and focusable=”false” to prevent screen readers from attempting to read the decorative graphic. Focus indicators use a 2px solid amber outline with 3px offset, ensuring keyboard users can always see their current position.
A dedicated accessibility statement page has been created (accessibility.html), linked from the footer of every page. It explains the steps taken to make the site accessible, acknowledges the known limitation of the third-party map iframe, states the WCAG 2.1 AA target, and provides contact details for feedback.
The opening times on the Find Us page now include an aria-live=”polite” region that announces whether the shop is currently open or closed, ensuring this dynamic information reaches screen reader users.

Search Engine Optimisation

Every page now has a unique, descriptive tag tailored to its content. For example, the homepage description reads: “Alf’s Cycles is an independent bike shop in Smalltown, England. We sell quality bikes, accessories and offer expert servicing and repairs.” These descriptions are within the recommended 150-160 character range for search engine snippets.
Geolocation meta tags (geo.region, geo.placename, geo.position and ICBM) have been added to the homepage and the Find Us page, with geo.region and geo.placename on all inner pages. This supports local SEO for a business that depends on customers finding it geographically.
The page titles remain in the established “Page Name | Alf’s Cycles” format, and the corrected heading hierarchy ensures that search engines can clearly identify the primary topic of each page through the .

JavaScript: Opening Times Feature

A well-considered piece of JavaScript has been added to the Find Us page. It runs on page load and performs two functions: it highlights today’s opening time in the list by adding an “is-today” class (which applies an amber left border, bold text and a subtle background), and it displays a status indicator pill above the list reading either “We are open right now!” (green) or “We are currently closed” (red).
The script uses data attributes (data-days, data-open, data-close) on the list items to determine which row corresponds to today and whether the current time falls within opening hours. It also sets aria-current=”date” on today’s row for assistive technology. The open/closed status is placed inside an aria-live=”polite” region so it is announced to screen readers without requiring a visual check.
The JavaScript is written in a self-executing function to avoid polluting the global scope, uses var for broad browser compatibility, and degrades gracefully – if JavaScript is disabled, the plain opening times list still displays correctly.
User Experience: 404 Error Page
A custom 404 error page has been created (404.html) that uses the same design language as the rest of the site – the amber gradient intro panel, the site logo and full navigation. It provides a friendly message explaining the page was not found, followed by a list of direct links to key pages (homepage, bikes, servicing, find us). An .htaccess file has been configured to serve this page for 404 errors.

Image Optimisation

All images remain in WebP format as in the original, but have been re-compressed at quality 75 using Lanczos resampling. This reduced the total image payload from approximately 3.5 MB to around 860 KB – a reduction of over 75% – while maintaining visual quality at the sizes they are displayed on screen. The CSS uses object-fit: cover with controlled heights to ensure images display consistently regardless of their original aspect ratios.

Responsive Design

The mobile-first approach has been maintained with the same 900px breakpoint, but the implementation is more refined. Typography uses clamp() throughout for fluid scaling of headings, ensuring smooth transitions rather than abrupt jumps. The desktop layout includes a sticky sidebar header with overflow-y: auto, which keeps the navigation accessible even on pages with long content.
The mobile navigation has been adapted with a flex-wrap layout and bottom-border hover indicators (replacing the desktop’s left-border style), providing appropriate touch-friendly targets. Card image heights have been reduced from 24rem to 20rem and the card grid uses align-items: stretch to ensure equal card heights across columns.

Footer and Site-Wide Consistency

The footer has been upgraded from a simple copyright line to include the accessibility statement link, uses the HTML entity – correctly, fixes the “Independed” typo from the original, and matches the header’s dot-grid background treatment for visual consistency. The copyright text is centred and uses uppercase letter-spacing for a more polished appearance.

Summary of Changes

For this project, I was commissioned to design and build a website for a fictional small, independent bicycle shop called Alf’s Cycles. The goal of the site was not to sell products online, but to act as a marketing tool that encourages people to visit the physical shop. From the start, I focused on clarity, usability, and creating a strong but simple brand identity that felt appropriate for a local high-street business.

Before designing anything visually, I planned the content first. I identified the information a potential customer would need most: what the shop offers, where it is, when it’s open, and why it’s worth visiting in person. This content-first approach helped shape the structure of the site and ensured that important information appears early and is easy to find.

I adopted a mobile-first approach throughout the project. I began by designing and styling the layout for small screens, then progressively enhanced it for larger viewports using min-width media queries. This helped keep the layout robust and ensured the site works well on phones, which is likely how many users will first encounter a small local business website.

The brand identity for Alf’s Cycles is intentionally simple and practical, reflecting the nature of a local bike shop. I chose a dark background with a strong yellow accent to create high contrast and visual impact. The yellow is used sparingly as an “editorial rule-break” across the site, appearing as full-width highlighted sections that interrupt the layout and draw attention to key content, such as page introductions. This device adds personality while remaining consistent and controlled.

Typography was kept clean and readable, using system fonts to avoid unnecessary dependencies. I paid particular attention to spacing, line height, and heading hierarchy to ensure the content is easy to scan. Headings are clearly associated with the content they introduce, and whitespace is used to separate sections and improve readability.

From a technical perspective, all HTML and CSS was written by hand, without frameworks or templates. I used semantic HTML elements such as <header>, <nav>, <main>, <section>, <article>, and <footer> to create a logical document structure. I minimised the use of classes and IDs, relying instead on combinator selectors and the CSS cascade. All styles are contained within a single external CSS file, which includes the Meyer reset and is clearly sectioned with comments.

Images were sourced from free image libraries and carefully cropped and optimised. I ensured that images maintain their aspect ratio using object-fit: cover and that they do not distort across different screen sizes. Alt text was added to all images to support accessibility.

During this project, I learned how important small layout and typographic decisions are in creating a professional result. I also gained confidence working mobile-first and relying on semantic HTML and the CSS cascade rather than excessive classes. If I were to continue developing this project, I would explore subtle micro-interactions and further refine the mobile navigation, but overall the site successfully meets the brief and provides a clear, engaging web presence for a small local business.