{"id":1315,"date":"2025-07-07T04:43:10","date_gmt":"2025-07-07T04:43:10","guid":{"rendered":"https:\/\/fifidesign.uk\/blog\/?p=1315"},"modified":"2025-07-11T14:33:45","modified_gmt":"2025-07-11T14:33:45","slug":"small-business-revisit-recursive-records-website","status":"publish","type":"post","link":"https:\/\/fifidesign.uk\/blog\/2025\/07\/07\/small-business-revisit-recursive-records-website\/","title":{"rendered":"Small Business Revisit: Recursive Records Website"},"content":{"rendered":"\n

By Fasika Kelile. Date: June 19, 2025<\/p>\n\n\n\n

Version 1 link:<\/strong>  https:\/\/fifidesign.uk\/design-for-web-content\/small-business-website\/index.html <\/a> <\/p>\n\n\n\n

Version 2 link:<\/strong> https:\/\/fifidesign.uk\/sbw-php-view\/index.php<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>
\n
\n
<\/div>
\n
\n
VERSION 1<\/h5>\n\n\n\n

Reflecting on the Original Recursive Records Website<\/strong><\/strong><\/strong><\/h2>\n\n\n\n
<\/div>\n\n\n\n

When I built the Recursive Records website for my Design for Web Content<\/em> module, I wanted it to do more than just sell records online. I aimed to capture the atmosphere of a physical record store that is warm, nostalgic, and rooted in vinyl\u2019s analog history. I wanted the site to evoke the experience of owning and collecting records, not just listening to them.
<\/p>\n<\/div>\n<\/div><\/section>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>
\n
\n

The Vision: Nostalgia, Warmth, and Analog Energy<\/strong><\/h2>\n\n\n\n
<\/div>\n\n\n\n

From the beginning, I focused on creating a strong sense of brand identity. I leaned into the aesthetics of the 1970s and early 1980s which are the golden age of vinyl. I made design choices based around this core idea of bringing nostalgia within the modern website. To bring that feeling to the website, I focused on:<\/p>\n\n\n\n

\n
    \n
  • Typography<\/strong>: I chose fonts inspired by vintage album covers.<\/li>\n\n\n\n
  • Color Palette<\/strong>: Warm, muted hues like mustard yellow, dusty blue, and rich brown.<\/li>\n<\/ul>\n\n\n\n
      \n
    • Visual Assets<\/strong>: I designed a custom logo, album artwork, and even hand-drawn elements to make the site feel like a time capsule.<\/li>\n<\/ul>\n<\/div>\n\n\n\n

      I was especially happy with the logo. It had the right energy, and my professor called it out as a strong part of the visual identity.
      <\/p>\n\n\n\n

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

      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div><\/section>\n<\/div>\n<\/div><\/section>\n\n\n\n
      <\/div>
      \n
      \n
      <\/div>
      \n
      \n

      Where It Fell Short: A Deep Dive into My Design Process<\/strong><\/strong><\/h2>\n\n\n\n

      When I started building the first version of Recursive Records, I knew I wanted to lean into a bold concept and keep things clean and accessible. I took a mobile-first approach, used semantic HTML and modern CSS, and really worked to bring the vibe of a vinyl store to life. Despite this, as I stepped back and viewed the site holistically, I began to see the shortcomings. As this was my first time building an entire experience around a fictional Brand I leaned more into exploration of design and techniques. Due to this exploration the overall balance of the site was lost.<\/p>\n<\/div>\n\n\n\n

      \n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div><\/section>\n<\/div>\n<\/div><\/section>\n\n\n\n
      <\/div>
      \n
      \n


      1. Structure and Communication on Desktop: The Rhythm Got Lost<\/strong><\/h3>\n\n\n\n
      <\/div>\n\n\n\n

      One of the most noticeable weaknesses emerged on larger screens. While the mobile version had strong visual rhythm and flow, the desktop layout felt scattered. Content blocks lacked cohesion. The main image shrunk awkwardly, and elements began to float, but in a disconnected one.  <\/p>\n\n\n\n

      In my feedback, this was noted clearly: <\/p>\n\n\n\n

      \n

      \u201cIt\u2019s not immediately obvious that this is a site promoting a physical store\u2026 the overall design lacks coherence with many blocks of content floating in the page.\u201d<\/p>\n<\/blockquote>\n\n\n\n

      \n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
      <\/div>
      \n
      \n
      <\/div>
      \n
      \n

      2. The Events Page Missed the Mark<\/strong><\/h3>\n\n\n\n
      <\/div>\n\n\n\n

      The Events page<\/strong> was another area where I tried to push boundaries. I went with a horizontal scroll layout<\/strong> to mimic flipping through posters or flyers, something you might experience in-store. But in reality, it didn\u2019t function the way I had hoped.<\/h4>\n\n\n\n

      It felt disconnected from the rest of the site and was difficult to navigate. My professor appreciated the experimentation but wasn\u2019t convinced it was effective:<\/p>\n\n\n\n

      \n

      \u201cI\u2019m not convinced the horizontal scroll on the Events page is effective\u2026 but I\u2019m glad to see you experimenting.\u201d<\/p>\n<\/blockquote>\n\n\n\n

      This was a valuable lesson for me. Design experimentation is important, but it also has to serve usability and consistency.<\/p>\n<\/div>\n\n\n\n

      \n
      <\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
      <\/div>
      \n
      \n

      3. No JavaScript = Limited Interactivity<\/strong><\/h3>\n\n\n\n

      At the time of creating the first version, I hadn\u2019t started learning JavaScript, so everything was built with HTML and CSS. I used CSS for simple animations, like hover states and a scrolling banner but there was no real interactivity or user control<\/strong>. <\/p>\n\n\n\n

        \n
      • No pause\/play control for animations<\/li>\n\n\n\n
      • No dynamic elements<\/li>\n\n\n\n
      • No real interaction beyond clicking links
        <\/li>\n<\/ul>\n\n\n\n

        It worked, but it wasn\u2019t very accessible or user-friendly<\/p>\n<\/div>\n\n\n\n

        \n

        4. Clean Code, But Not Modular<\/strong><\/h3>\n\n\n\n

        Structurally, the code was strong. I used semantic HTML, modern CSS layout tools like Grid and Flexbox, and made sure to validate everything. I also worked with advanced selectors to keep the CSS lean and avoid overusing classes and IDs.<\/p>\n\n\n\n

        However, one major limitation was that the site was completely static<\/strong>:<\/p>\n\n\n\n

          \n
        • This made future edits time consuming and error prone especially if the site ever needed to scale up.<\/li>\n<\/ul>\n\n\n\n
            \n
          • I didn\u2019t use PHP includes.<\/li>\n<\/ul>\n\n\n\n
              \n
            • The header, navigation, and footer were all repeated manually<\/strong> across every page.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/section>\n\n\n\n
              <\/div>
              \n
              \n

              5. Performance and Sustainability Gaps<\/strong><\/h3>\n\n\n\n

              Image handling was another area that could be improved in the first version. While I optimised my JPEGs for web, I wasn\u2019t using lazy loading<\/strong>, and I wasn\u2019t aware of newer formats like (.webp). As a result, pages with more images, like the Catalog and Events sections, loaded more slowly.<\/p>\n\n\n\n

              This showed up in my performance scores:<\/p>\n\n\n\n

                \n
              • Google Lighthouse (Mobile)<\/strong> gave the site a 67<\/strong> in performance.<\/li>\n<\/ul>\n\n\n\n

                Website Carbon Calculator<\/strong> rated it a C<\/strong>, cleaner than 57% of tested websites.<\/p>\n<\/div>\n<\/div><\/section>\n\n\n\n

                <\/div>
                \n
                \n
                \"\"<\/figure>\n<\/div>\n\n\n\n
                \n
                \"\"<\/figure>\n<\/div>\n<\/div><\/section>\n<\/div>\n<\/div><\/section>\n\n\n\n
                <\/div>
                \n
                \n

                What\u2019s Next<\/strong><\/h2>\n\n\n\n

                This first version of Recursive Records helped me understand what kind of designer I want to be: thoughtful, creative, experimental, and user-centered. It also gave me the groundwork to build something stronger.<\/p>\n\n\n\n

                In the next part<\/strong>, I\u2019ll walk you through into how I rebuilt Recursive Records: better structure, better messaging, smarter code, and a stronger focus on sustainability.<\/p>\n\n\n\n

                If a value can be determined in advance, use a static value instead. Overusing calc() where it’s not needed can make the code more complex and harder to maintain.
                <\/p>\n<\/div>\n<\/div><\/section>\n\n\n\n

                <\/div>
                \n
                \n
                <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
                <\/div>
                \n
                \n
                <\/div>
                \n
                \n
                VERSION 2<\/h5>\n\n\n\n

                Rebuilding Recursive Records: A Deep Dive into What Changed (and Why)<\/strong><\/strong><\/strong><\/strong><\/strong><\/h2>\n\n\n\n
                <\/div>\n\n\n\n

                When I decided to rebuild the Recursive Records website, I approached it as an opportunity to apply everything I\u2019d learned since creating Version 1. I started by breaking the old site into layers: what was worth keeping, what could be improved, and what had to be completely rethought.<\/p>\n\n\n\n

                I also studied my professor\u2019s feedback closely to make sure that the new version fixed the issues that had been identified. <\/p>\n\n\n\n

                  \n
                •  Fixing the lack of cohesion, poor communication of the store\u2019s physical presence, and weak desktop layout.<\/li>\n<\/ul>\n\n\n\n

                  Here\u2019s a detailed look at what I changed and how each improvement contributed to a more successful site, creatively, technically, and experientially.
                  <\/p>\n<\/div>\n<\/div><\/section>\n\n\n\n

                  \"\"<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
                  <\/div>
                  \n
                  \n
                  <\/div>\n\n\n\n

                  1. Interactivity & Usability: Making It Dynamic<\/strong><\/strong><\/strong><\/h2>\n\n\n\n
                  <\/div>\n\n\n\n

                  What was wrong:<\/h3>\n\n\n\n
                    \n
                  • Homepage in Version 1 looked fine on mobile but lacked impact on desktop; floating, unstructured content.<\/li>\n\n\n\n
                  • Failed to clearly show Recursive Records as a physical store.<\/li>\n\n\n\n
                  • Events page used a horizontal scroll that confused users and felt disconnected from the rest of the site.<\/li>\n<\/ul><\/div>\n\n\n\n

                    How I fixed it:<\/h3>\n\n\n\n

                    I started with sketching low-fidelity wireframes to reimagine the structure, and focusing on telling the store\u2019s story at every screen size. Content was grouped into clear sections with a stronger visual hierarchy, and imagery was made more prominent, particularly on desktop.<\/p>\n\n\n\n

                    On the Events page, I switched to a vertical layout that\u2019s consistent with the brand and easier to navigate. To make it more engaging, I added a live countdown timer<\/strong> showing time left to the next event.<\/p>\n\n\n\n

                    <\/div>\n\n\n\n

                    Home Page<\/p>\n\n\n\n

                    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
                    <\/div>\n\n\n\n

                    Events page<\/p>\n\n\n\n

                    \n
                    \"\"<\/figure>\n\n\n\n
                    \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
                    <\/div>
                    \n
                    \n
                    <\/div>\n\n\n\n

                    2. Design & Layout: Telling the Store\u2019s Story<\/strong><\/strong><\/h2>\n\n\n\n
                    <\/div>\n\n\n\n

                    What was wrong:<\/h3>\n\n\n\n
                      \n
                    • The site was static and had no dynamic elements or interactivity.<\/li>\n\n\n\n
                    • The homepage banner animation ran endlessly, couldn\u2019t be paused, and ignored reduced-motion settings.<\/li>\n<\/ul><\/div>\n\n\n\n

                      How I fixed it:<\/h3>\n\n\n\n

                      I added JavaScript features that make the site feel alive while respecting accessibility:<\/p>\n\n\n\n

                        \n
                      • A back-to-top button<\/strong> improves navigation, and the Events page countdown adds energy and urgency.<\/li>\n<\/ul><\/div>\n\n\n\n
                          \n
                        • An \u201cOpen Now\u201d indicator<\/strong> that shows store hours dynamically.<\/li>\n<\/ul><\/div>\n\n\n\n
                            \n
                          • The banner<\/strong> now runs smoothly, pauses on hover or click, and respects user motion preferences.<\/li>\n<\/ul><\/div>\n\n\n\n

                            These small interactions make the site more engaging and user-centered without overwhelming visitors.<\/p>\n\n\n\n

                            <\/div>\n\n\n\n

                            Events page<\/p>\n\n\n\n

                            \n
                            \"\"<\/figure>\n\n\n\n
                            \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
                            <\/div>
                            \n
                            \n
                            <\/div>\n\n\n\n

                            3. Code Structure & Maintainability: Smarter, Cleaner<\/strong><\/strong><\/strong><\/h2>\n\n\n\n
                            <\/div>\n\n\n\n

                            What was wrong:<\/h3>\n\n\n\n
                              \n
                            • Header, footer, and navigation were repeated manually on every page it would be hard to update.<\/li>\n\n\n\n
                            • CSS lacked clear organization, making it harder to scale.<\/li>\n\n\n\n
                            • Broken links led to a generic browser error page, it was unhelpful <\/li>\n<\/ul><\/div>\n\n\n\n

                              How I fixed it:<\/h3>\n\n\n\n

                              I modularized the structure using PHP include<\/strong> statements for the header, and footer, making updates easy and consistent across the site.<\/p>\n\n\n\n

                              For CSS, I adopted a SMACSS + BEM<\/strong> methodology to write organized, modular, and scalable stylesheets. The codebase is now cleaner, easier to maintain, and future-proof.<\/p>\n\n\n\n

                              I designed a custom 404 page that reflects the brand\u2019s tone and design, with helpful navigation links to bring users back into the site. <\/p>\n\n\n\n

                              <\/div>\n\n\n\n

                              Events page<\/p>\n\n\n\n

                              \n
                              \"\"<\/figure>\n\n\n\n
                              \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
                              <\/div>
                              \n
                              \n
                              <\/div>\n\n\n\n

                              4. Performance & Accessibility: Faster and More Inclusive<\/strong><\/strong><\/strong><\/strong><\/h2>\n\n\n\n
                              <\/div>\n\n\n\n

                              What was wrong:<\/h3>\n\n\n\n
                                \n
                              • Images were heavy JPEGs, all loaded at once.<\/li>\n\n\n\n
                              • No lazy loading, slow performance, and a higher carbon footprint.<\/li>\n\n\n\n
                              • Accessibility gaps: weak ARIA roles and no motion control.<\/li>\n<\/ul><\/div>\n\n\n\n

                                How I fixed it:<\/h3>\n\n\n\n
                                  \n
                                • I optimized all images to .webp<\/strong> format and added lazy loading<\/strong>, which reduced load times and lowered the carbon footprint.<\/li>\n\n\n\n
                                • I improved accessibility by adding meaningful ARIA roles, alt text, keyboard-friendly navigation and motion is now controllable. These optimizations improved site speed and sustainability significantly, as reflected in better Lighthouse scores and a higher Website Carbon rating.<\/li>\n<\/ul><\/div>\n\n\n\n
                                  <\/div>\n\n\n\n

                                  Events page<\/p>\n\n\n\n

                                  \n
                                  \"\"<\/figure>\n\n\n\n
                                  \"\"<\/figure>\n<\/figure>\n\n\n\n
                                  \n
                                  \"\"<\/figure>\n\n\n\n
                                  \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div><\/section>\n\n\n\n
                                  <\/div>
                                  \n
                                  \n
                                  <\/div>
                                  \n
                                  \n

                                  Final Thoughts<\/strong><\/h2>\n<\/div>\n<\/div><\/section>\n\n\n\n
                                  <\/div>
                                  \n
                                  \n

                                  Rebuilding Recursive Records taught me that good design isn\u2019t just about how a site looks,  it\u2019s also about how it feels, how it works, and how it respects the user. <\/h2>\n\n\n\n
                                  <\/div>\n\n\n\n

                                  With Version 2, I was able to preserve the retro, analog spirit of the original concept while addressing its weaknesses with smarter code, better usability, and more thoughtful design.<\/p>\n\n\n\n

                                  This project reminded me that every decision, from how a banner moves to how images load, will shape the experience for real people. I\u2019m proud of how Version 2 brings together creativity, functionality, and accessibility in a way that feels true to the brand and meaningful for the user.<\/p>\n<\/div>\n<\/div><\/section>\n<\/div>\n<\/div><\/section>\n