{"id":65,"date":"2026-05-14T21:52:53","date_gmt":"2026-05-14T21:52:53","guid":{"rendered":"https:\/\/jathumathews.uk\/mydesign\/?page_id=65"},"modified":"2026-05-14T22:12:54","modified_gmt":"2026-05-14T22:12:54","slug":"transforming-alfs-cycles-from-basic-html-to-a-modern-accessible-web-experience","status":"publish","type":"page","link":"https:\/\/jathumathews.uk\/mydesign\/transforming-alfs-cycles-from-basic-html-to-a-modern-accessible-web-experience\/","title":{"rendered":"Transforming Alf’s Cycles: From Basic HTML to a Modern, Accessible Web Experience"},"content":{"rendered":"\n

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

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

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

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

1. Maintainability and Architecture<\/strong><\/p>\n\n\n\n

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

2. Accessibility and Inclusivity<\/strong><\/p>\n\n\n\n

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

3. SEO and Performance Optimization<\/strong><\/p>\n\n\n\n

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

4. User Experience (UX) and Interactivity<\/strong><\/p>\n\n\n\n

The design felt static and basic. The navigation was a standard list, and the mobile menu lacked polish\u2014simply 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.<\/p>\n\n\n\n

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

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

To solve these issues, I completely refactored the site into a modern, performant, and highly accessible web experience.<\/p>\n\n\n\n

Technical Improvements<\/strong><\/p>\n\n\n\n

*PHP Server Side Includes (SSI): <\/strong> 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.<\/p>\n\n\n\n

JavaScript Enhancements:<\/strong> 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.<\/p>\n\n\n\n

Performance & SEO:<\/strong> 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.<\/p>\n\n\n\n

Robust Routing: <\/strong> 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.<\/p>\n\n\n\n

Design and UX Improvements<\/strong><\/p>\n\n\n\n

Premium Aesthetic: <\/strong> 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).<\/p>\n\n\n\n

Minimalist Iconography: <\/strong> I replaced the basic emojis used in the original site with Lucide Icons<\/strong> \u2014a clean, mono-line SVG icon library. These scale perfectly with the typography and give the site a unified, professional polish.<\/p>\n\n\n\n

Mobile-First Responsiveness: <\/strong> 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.<\/p>\n\n\n\n

Accessibility Compliance (WCAG AA):<\/strong><\/p>\n\n\n\n