Alf's Cycles
A fully responsive marketing website for a fictional independent bicycle shop, designed and built without frameworks, templates, or CSS utilities. The project focuses on content-first planning, mobile-first implementation, and semantic HTML, supported by a single, structured stylesheet.
The brief
Marketing-focused information architecture
The brief defined a marketing website rather than an e-commerce platform. The primary objective was to drive in-store visits, which required a different approach to structure and prioritisation. Users need to quickly understand what the shop offers, where it is located, and when it is open.
This informed all decisions: key information such as location and opening hours is surfaced immediately, services are prioritised over products, and the path from landing to finding directions is kept direct. The information architecture drives the layout, and the layout drives the implementation.
Process
Content-first and mobile-first approach
Content structure and hierarchy
The content model was defined in plain text before any design work. User priorities were mapped in sequence: services offered, location, opening times, and supporting information. This structure directly informed the layout.
Sitemap definition
The site is organised into five pages: Home, Bikes, Servicing, About, and Find Us. Each page serves a single primary purpose, aligned with a specific user task, avoiding unnecessary or redundant sections.
Mobile-first implementation
Layouts were developed for smaller screens first and progressively enhanced using min-width media queries. This approach enforces content prioritisation and results in a more robust and adaptable layout.
Typography system
A system font stack was used to avoid render-blocking requests and layout shifts. Heading hierarchy is defined semantically, and spacing and line height are tuned for readability and efficient scanning.
Image optimisation
Images were manually selected, cropped, and compressed, and served in modern formats where supported. Object-fit ensures consistent presentation across breakpoints, and all images include descriptive alt text for accessibility.
Decisions
Design and technical decisions
A dark base with a yellow accent (#F5C842) ensures strong contrast and clear visual hierarchy. The accent colour is used selectively to highlight key content and guide attention.
The site uses a single external stylesheet, structured with a reset and clearly defined sections. Styling relies on the cascade, element selectors, and inheritance, rather than utility classes or frameworks.
Structural elements such as <header>, <nav>, <main>, <section>, and <footer> are used consistently to produce a logical and accessible document outline.
Colour contrast meets WCAG AA standards, interactive elements are keyboard accessible, and focus states are visible. Accessibility considerations are integrated from the start rather than applied retrospectively.
Outcome