{"id":60,"date":"2026-05-14T10:24:10","date_gmt":"2026-05-14T10:24:10","guid":{"rendered":"https:\/\/purpledesigns.co.uk\/journal\/?p=60"},"modified":"2026-05-14T10:24:10","modified_gmt":"2026-05-14T10:24:10","slug":"small-business-website-revisited","status":"publish","type":"post","link":"https:\/\/purpledesigns.co.uk\/journal\/2026\/05\/14\/small-business-website-revisited\/","title":{"rendered":"Small Business Website – Revisited"},"content":{"rendered":"\n

Part 1: Critical Analysis of the Original Website<\/strong><\/h2>\n\n\n\n


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.<\/p>\n\n\n\n


Structure and Semantics<\/strong><\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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.
<\/p>\n\n\n\n

Accessibility<\/strong><\/h3>\n\n\n\n

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 <\/a>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.<\/p>\n\n\n\n


Search Engine Optimisation<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Responsive Design and Layout<\/strong><\/h3>\n\n\n\n


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.<\/p>\n\n\n\n


Visual Design and Typography<\/strong><\/h3>\n\n\n\n


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.<\/p>\n\n\n\n


Maintainability and Code Quality<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Missing Features<\/strong><\/h3>\n\n\n\n


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.<\/p>\n\n\n\n

<\/p>\n\n\n\n


Part 2: Summary of Improvements<\/strong><\/h2>\n\n\n\n


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.
<\/p>\n\n\n\n

Branding and Visual Design<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Semantic Structure and HTML Quality<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

CSS Architecture<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Accessibility Improvements<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Search Engine Optimisation<\/strong><\/h3>\n\n\n\n


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 .
<\/p>\n\n\n\n

JavaScript: Opening Times Feature<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Image Optimisation<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Responsive Design<\/strong><\/h3>\n\n\n\n


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.
<\/p>\n\n\n\n

Footer and Site-Wide Consistency<\/strong><\/h3>\n\n\n\n


The footer has been upgraded from a simple copyright line to include the accessibility statement link, uses the HTML entity \u2013 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.<\/p>\n\n\n\n


Summary of Changes<\/strong><\/h3>\n\n\n\n

<\/p>\n\n\n\n

Area<\/strong><\/td>Changes Made<\/strong><\/td><\/tr>
Branding<\/strong><\/td>Custom SVG logo, Oswald display font, dot-grid header\/footer backgrounds, gradient intro panels with diagonal clip-path<\/td><\/tr>
Semantics<\/strong><\/td>Corrected heading hierarchy (h1 per page), <figure>\/<figcaption> on homepage, <address> element, fixed duplicate IDs, clean validation<\/td><\/tr>
Accessibility<\/strong><\/td>Skip-to-content link, aria-label on nav, aria-hidden on decorative SVGs, accessibility statement page, aria-live for shop status, visible focus indicators<\/td><\/tr>
SEO<\/strong><\/td>Unique meta descriptions on all pages, geolocation meta tags, keyword-rich h1 headings, improved page titles<\/td><\/tr>
JavaScript<\/strong><\/td>Opening times highlighting with is-today class, open\/closed status pill with aria-live, graceful degradation<\/td><\/tr>
UX<\/strong><\/td>Custom 404 error page with navigation links, .htaccess configuration, clickable phone\/email links, embedded OpenStreetMap<\/td><\/tr>
CSS<\/strong><\/td>Class-based selectors, expanded custom properties, .sr-only utility, smooth transitions, distinct visited link colour<\/td><\/tr>
Images<\/strong><\/td>Re-compressed WebP at quality 75, total payload reduced from 3.5 MB to ~860 KB (75% reduction)<\/td><\/tr>
Responsive<\/strong><\/td>Fluid typography with clamp(), sticky sidebar on desktop, flex-wrap mobile nav, reduced card image heights<\/td><\/tr>
Typography<\/strong><\/td>Oswald for headings, h2 decorative underline, improved line heights, consistent spacing<\/td><\/tr>
Footer<\/strong><\/td>Fixed typo, added accessibility link, centred uppercase styling, dot-grid background<\/td><\/tr>
Maintainability<\/strong><\/td>PHP Server Side Includes: header.php, nav.php, footer.php. Page-specific variables for title, description and geo tags. Dynamic copyright year.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

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, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":1,"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/posts\/60\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/purpledesigns.co.uk\/journal\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}