Welcome to my coursework blog! In this post, I will critically analyse the original small business website for Alf’s Cycles and detail the extensive design and technical improvements I implemented during the recent refactoring process.
—
Part 1: Critical Analysis of the Original Site
The original Alf’s Cycles website served as a functional starting point but suffered from several significant drawbacks that hindered its maintainability, user experience (UX), and search engine visibility.
1. Maintainability and Architecture
The most glaring issue was the lack of a modular architecture. Every page (`index.html`, `about.html`, `services.html`, etc.) contained hardcoded copies of the header, navigation, and footer. If a navigation link needed changing or a new page was added, every single HTML file required manual updating. This repetition is prone to human error and makes scaling the site incredibly tedious.
2. Accessibility and Inclusivity
The original code lacked fundamental accessibility features. There were no “skip to main content” links for keyboard navigators, interactive elements like the mobile menu toggle lacked proper `aria-expanded` states, and touch targets on mobile were not optimized for the WCAG recommended minimum of 44x44px. Furthermore, there was no accessibility statement provided for users.
3. SEO and Performance Optimization
While the site used `<title>` tags, it completely omitted critical SEO elements such as `<meta name=”description”>`, keywords, and canonical URLs. Images were implemented with basic `<img>` tags without modern performance attributes like `loading=”lazy”` or `fetchpriority`, meaning the browser downloaded everything at once, slowing down the initial page load speed.
4. User Experience (UX) and Interactivity
The design felt static and basic. The navigation was a standard list, and the mobile menu lacked polish—simply appearing and disappearing without animation or background scroll-locking. Crucial business information, like whether the shop was currently open or closed, required the user to manually read the timetable and check their watch, rather than providing immediate, dynamic feedback.
—
Part 2: Summary of Improvements
To solve these issues, I completely refactored the site into a modern, performant, and highly accessible web experience.
Technical Improvements
*PHP Server Side Includes (SSI): I migrated the site to a PHP architecture. The header and footer are now isolated in `includes/header.php` and `includes/footer.php`. This drastically improves maintainability; updating the navigation menu now only requires editing one file, which automatically updates across the entire site.
JavaScript Enhancements: I implemented a dynamic “Shop Status” script that checks the user’s local time against the shop’s trading hours. It displays a live “OPEN” (with a pulsing green dot) or “CLOSED” indicator in both the hero section and footer. During the last hour of trading, it even provides a helpful countdown (e.g., “closes in 15 min”). Additionally, the `find-us.php` page uses JavaScript to automatically highlight today’s opening hours in the timetable.
Performance & SEO: All images are now served in the highly compressed WebP format. I implemented `fetchpriority=”high”` for the critical hero image and `loading=”lazy”` with `decoding=”async”` for images below the fold. Every page now injects unique, descriptive meta tags into the header for superior search engine findability.
Robust Routing: I added an `.htaccess` file and created a custom `404.php` error page. If a user gets lost, they are greeted with a friendly, on-brand error page guiding them back to safety.
Design and UX Improvements
Premium Aesthetic: I moved away from a generic layout to a premium, dark-mode design utilizing glassmorphism (blurred backgrounds on sticky elements), vibrant orange accents, and smooth micro-animations (`fade-up` effects on load).
Minimalist Iconography: I replaced the basic emojis used in the original site with Lucide Icons —a clean, mono-line SVG icon library. These scale perfectly with the typography and give the site a unified, professional polish.
Mobile-First Responsiveness: The site was rebuilt using fluid typography (`clamp()`) and CSS Grid. It scales flawlessly from a 4K desktop monitor down to a 320px smartphone screen. The mobile burger menu now smoothly overlays the screen and locks the background from scrolling, mirroring a native app experience.
Accessibility Compliance (WCAG AA):
- Added a visually hidden “Skip to main content” link.
- Implemented high-contrast `:focus-visible` outlines for keyboard navigation.
- Ensured all links and buttons meet the 44x44px touch target rule.
- Added full ARIA attribute support to the mobile menu (`aria-expanded`, `aria-controls`).
- Included a `prefers-reduced-motion` media query to disable animations for users with vestibular disorders.
- Published a dedicated Accessibility Statement page.
Conclusion
By transitioning from basic HTML to a PHP-driven architecture, the new Alf’s Cycles website is not only visually striking but also highly maintainable, lightning-fast, and accessible to everyone.
*(Note: Both the [Old Alf’s Cycles Site](#) and the [New Refactored Site](#) are linked on my coursework homepage for comparison.)*
Disclaimer about use of AI :
This project was built with assistance from: – Claude Sonnet 4.6 and Gemini 3.1 pro — used for coding assitance and content writing.