Small Business Website-Revisited
Sandra Rajesh Menon · May 2026 · University of Greenwich
Introduction
A critical review of the original small-business website, and an account of the design and technical improvements made in the redesign. This post is the written critique of my first version of the small-business website and the changes made to the website during a revisit, in terms of design and technical changes. It is structured into two parts: first, a critical analysis of the original Alf’s Cycles website as submitted; second, a note on the improvements I have made to both the design and the technical side.
Part One: Critical Analysis of the Original Site
Alf’s Cycles is a fictional small bicycle retailer based in Greenwich. The original site comprised four pages — Home, About Us, Services, and Locate Us — built with HTML and CSS. While it successfully conveyed the core information about the business, a detailed review reveals significant weaknesses across structure, design, content, accessibility, and performance.
Visual Design and Hierarchy
The most immediate issue on landing is the absence of a coherent visual language. There is no consistent typographic scale: headings vary in size and weight without a clear rationale, and body text sits in a default browser font without any customisation. The colour palette is minimal to the point of being absent — the site relies almost entirely on default browser styling, which gives it an unpolished, template-like appearance that does not inspire confidence in a retail brand.
The logo is present in the navigation, which is a positive, but it is rendered at an inconsistent size relative to the navigation links beside it. The hero section on the homepage uses the heading “Find your Perfect Ride Partner” without any supporting visual context — no hero image, no call to action, and no introductory paragraph that would orient a new visitor. The result is a page that begins abruptly.
Approximate scores for each aspect of the original site:
- Visual design: D+
- Typography: D
- Colour palette: D+
- Navigation: C
- Content clarity: C–
Navigation and Information Architecture
The navigation structure is logical — four clearly named pages covering the key needs of a cycle shop customer — but the implementation is problematic. The hamburger menu icon (☰) is present in the markup as a plain Unicode character with no accompanying JavaScript to handle the toggle behaviour. On desktop it is unnecessary; on mobile it does nothing when tapped. This is a critical usability failure: a visitor on a phone cannot access the navigation at all, effectively locking them out of the site’s content.
Issues identified:
- The hamburger icon (☰) has no toggle functionality — the menu is permanently hidden on mobile viewports.
- No active state is applied to the current page link, so users have no visual confirmation of where they are in the site.
- Navigation links use full absolute URLs including encoded spaces (%20), which is brittle and will break if the folder is moved.
Strengths:
- The four-page structure is appropriately scoped for a small business and covers the key customer journeys: browse, learn, services, find us.
Content Quality and Copywriting
The About Us page contains several grammatical and stylistic problems that undermine the brand’s credibility. Sentences such as “Alf’s Cycle is in the heart of High street location for over five years” are syntactically incomplete, and “We believe in buying cycles in person as it should see, feel and to be chosen by mind and touch” is difficult to parse. For a retail business where trust is paramount, copy that reads as unfinished erodes that trust immediately.
The Services page presents its offerings as a simple bullet list with no pricing information, no indication of turnaround time, and no call to action to book or enquire. This misses a significant conversion opportunity. A visitor who wants a repair cannot easily find out what to do next.
Issues identified:
- Multiple grammatical errors on the About Us page, including incomplete and confusing sentences.
- Image labels are mismatched: the image captioned “Road Bikes” is sourced from mountainbikes.jpg and vice versa — a factual error that would confuse customers.
- No calls to action anywhere on the site — visitors have no clear next step after reading content.
- “Canondale” is misspelled throughout (the correct brand name is Cannondale).
Strengths:
- The “Why Choose Alf’s Cycles?” section on the homepage provides a reassuring trust signal, even if it is presented as a plain list.
Accessibility
Accessibility is the area of greatest concern. The site has a viewport meta tag, which is a baseline pass, but goes no further. There are no alt attributes on any of the images beyond generic filenames, which means screen readers would read out strings like “mountainbikes.jpg” — uninformative and potentially confusing. There is no skip-navigation link, no ARIA landmark roles, and no visible focus styles. Colour contrast has not been considered. The site would not pass a basic WCAG 2.1 Level A audit.
Technical Implementation
The code itself is structurally sound in places — the use of semantic HTML elements such as <nav>, <section>, and a heading hierarchy shows awareness of best practice. However, the Google Maps embed on the homepage is inserted as a bare URL in the document text rather than as a proper <iframe>, which means it renders as a plain link rather than an interactive map. The CSS, while present, relies heavily on default browser styles and provides no responsive layout beyond the viewport meta tag.
Issues identified:
- Google Maps embed is a raw URL, not an <iframe> — the map does not render.
- No CSS grid or flexbox layout — content stacks in a single column with no considered spacing.
- No responsive breakpoints beyond the basic viewport meta tag.
- No
langattribute on the <html> element.
Strengths:
- Semantic HTML elements are used appropriately in most places.
- The viewport meta tag is correctly set, indicating awareness of mobile requirements.
Part Two: Summary of Improvements
In redesigning Alf’s Cycles, I addressed every issue identified above across two areas: design and technical implementation. The goal was to produce a site that a real small business could use — one that is visually credible, accessible, and conversion-focused.
Design Improvements
Typography System
Introduced a two-font pairing — a display serif for headings and a clean sans-serif for body and UI — with a defined type scale (h1 → h4, body, caption).
Colour Palette
Defined a primary brand colour (a deep teal referencing cycling culture), an accent orange for CTAs, and a neutral off-white base. All combinations pass WCAG AA contrast.
Layout and Grid
Replaced the single-column default layout with a CSS grid system: a 3-column card grid for bike categories, a 4-column logo strip for brands, and a 2-column feature layout for About Us.
Calls to Action
Added primary CTAs on every page — “Book a service”, “Contact us”, and “Get directions” — each visually prominent and positioned at natural decision points.
Imagery and Labels
Corrected the swapped Road Bikes/Mountain Bikes images. Added descriptive, contextual alt text to every image. Added a hero banner to the homepage with an overlay and introductory text.
Copyediting
Rewrote the About Us copy for grammatical correctness and natural readability. Corrected the Cannondale spelling. Added pricing guidance and a booking prompt to the Services page.
Technical Improvements
Responsive Navigation
Replaced the non-functional hamburger icon with a working JavaScript toggle that opens and closes the mobile menu, with a smooth height transition and ARIA attributes.
Embedded Map
Replaced the raw Google Maps URL with a properly constructed <iframe> embed, styled to be responsive within a 16:9 ratio container.
Accessibility
Added lang="en" to the HTML element, ARIA landmark roles, a skip-navigation link, visible focus outlines, descriptive alt text, and semantic heading structure throughout.
CSS Architecture
Structured CSS using custom properties (variables) for colours, spacing, and type sizes. Used flexbox for the navigation and CSS grid for content sections, replacing ad-hoc block layout.
Relative URLs
Replaced all absolute navigation URLs (including encoded spaces) with relative paths, making the site portable and eliminating encoded-space fragility.
Responsive Breakpoints
Added media queries at 768px and 480px to collapse multi-column grids, resize typography, and ensure usability across desktop, tablet, and phone viewports.
Reflection
The original site demonstrated an understanding of the basic building blocks — HTML structure, navigation, semantic elements — but lacked the design thinking and technical rigour needed to translate that structure into a credible user experience. The redesign process reinforced how inseparable design and development are in practice: fixing the visual hierarchy required restructuring the HTML, and improving accessibility required reconsidering both the copy and the CSS simultaneously.
If I were to develop this project further, I would conduct user testing with at least five participants to validate whether the revised navigation and calls to action perform as intended, and I would integrate a lightweight performance audit using Lighthouse to benchmark page speed before and after optimisation.
Web Design · Accessibility · UX · HTML/CSS · Critical Analysis
MA Web Design and Content Planning · University of Greenwich · 2026