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.<\/p>\n\n\n\n Alf’s Cycles is a fictional small bicycle retailer based in Greenwich. The original site comprised four pages \u2014 Home, About Us, Services, and Locate Us \u2014 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.<\/p>\n\n\n\n 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 \u2014 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.<\/p>\n\n\n\n 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 \u2014 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.<\/p>\n\n\n\n Approximate scores for each aspect of the original site:<\/p>\n\n\n\n The navigation structure is logical \u2014 four clearly named pages covering the key needs of a cycle shop customer \u2014 but the implementation is problematic. The hamburger menu icon (\u2630) 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.<\/p>\n\n\n\n Issues identified:<\/strong><\/p>\n\n\n\n Strengths:<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Issues identified:<\/strong><\/p>\n\n\n\n Strengths:<\/strong><\/p>\n\n\n\n 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” \u2014 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.<\/p>\n\n\n\n The code itself is structurally sound in places \u2014 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.<\/p>\n\n\n\n Issues identified:<\/strong><\/p>\n\n\n\n Strengths:<\/strong><\/p>\n\n\n\n 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 \u2014 one that is visually credible, accessible, and conversion-focused.<\/p>\n\n\n\n Introduced a two-font pairing \u2014 a display serif for headings and a clean sans-serif for body and UI \u2014 with a defined type scale (h1 \u2192 h4, body, caption).<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Added primary CTAs on every page \u2014 “Book a service”, “Contact us”, and “Get directions” \u2014 each visually prominent and positioned at natural decision points.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Replaced the raw Google Maps URL with a properly constructed <iframe> embed, styled to be responsive within a 16:9 ratio container.<\/p>\n\n\n\n Added 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.<\/p>\n\n\n\n Replaced all absolute navigation URLs (including encoded spaces) with relative paths, making the site portable and eliminating encoded-space fragility.<\/p>\n\n\n\n Added media queries at 768px and 480px to collapse multi-column grids, resize typography, and ensure usability across desktop, tablet, and phone viewports.<\/p>\n\n\n\n The original site demonstrated an understanding of the basic building blocks \u2014 HTML structure, navigation, semantic elements \u2014 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Web Design \u00b7 Accessibility \u00b7 UX \u00b7 HTML\/CSS \u00b7 Critical Analysis <\/p>\n","protected":false},"excerpt":{"rendered":" Small Business Website-Revisited Sandra Rajesh Menon \u00b7 May 2026 \u00b7 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-5","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/posts\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":1,"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/posts\/5\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/posts\/5\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/media?parent=5"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/categories?post=5"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mywebsiteshow.com\/journal\/wp-json\/wp\/v2\/tags?post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/mywebsiteshow.com\/journal\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-13-at-16-44-12-Alfs-Cycle-585x1024.png\")
<\/figure>\n\n\n\n
\n\n\n\nPart One: Critical Analysis of the Original Site<\/h2>\n\n\n\n
Visual Design and Hierarchy<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/mywebsiteshow.com\/journal\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-13-at-16-45-05-Alfs-Cycle-1024x968.png\")
<\/figure>\n\n\n\n\n
Navigation and Information Architecture<\/strong><\/h3>\n\n\n\n
\n
\n
Content Quality and Copywriting<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/mywebsiteshow.com\/journal\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-13-at-16-45-21-Alfs-Cycle-1024x576.png\")
<\/figure>\n\n\n\n\n
\n
Accessibility<\/strong><\/h3>\n\n\n\n
Technical Implementation<\/h3>\n\n\n\n
![\"\"](\"https:\/\/mywebsiteshow.com\/journal\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-13-at-16-45-41-Alfs-Cycle-1024x549.png\")
<\/figure>\n\n\n\n\n
lang<\/code> attribute on the <html> element.<\/li>\n<\/ul>\n\n\n\n\n
\n\n\n\nPart Two: Summary of Improvements<\/h2>\n\n\n\n
Design Improvements<\/strong><\/h3>\n\n\n\n
Typography System<\/strong><\/h4>\n\n\n\n
Colour Palette<\/strong><\/h4>\n\n\n\n
Layout and Grid<\/strong><\/h4>\n\n\n\n
Calls to Action<\/strong><\/h4>\n\n\n\n
Imagery and Labels<\/strong><\/h4>\n\n\n\n
Copyediting<\/strong><\/h4>\n\n\n\n
Technical Improvements<\/h3>\n\n\n\n
Responsive Navigation<\/strong><\/h4>\n\n\n\n
Embedded Map<\/strong><\/h4>\n\n\n\n
Accessibility<\/strong><\/h4>\n\n\n\n
lang=\"en\"<\/code> to the HTML element, ARIA landmark roles, a skip-navigation link, visible focus outlines, descriptive alt text, and semantic heading structure throughout.<\/p>\n\n\n\nCSS Architecture<\/strong><\/h4>\n\n\n\n
Relative URLs<\/strong><\/h4>\n\n\n\n
Responsive Breakpoints<\/strong><\/h4>\n\n\n\n
\n\n\n\nReflection<\/h2>\n\n\n\n
\n\n\n\n
MA Web Design and Content Planning \u00b7 University of Greenwich \u00b7 2026<\/p>\n\n\n\n