Small Business Website
This report provides an overview of the development process of the website for Recursive Records, a vinyl record shop. The project was undertaken as part of my MA in Web Design and Content Planning, and it served as an opportunity to enhance my technical and design skills. The website can be accessed at https://ridj.uk/design-for-web-content/SBW-v3.0/.
Development Process and Key Learnings
During the development of this website, I explored various web technologies and improved my proficiency in front-end design and development. Several key areas of learning emerged from this project:
- CSS Flexbox and Grid
To achieve a well-structured layout, I delved into CSS Flexbox, which helped me efficiently align and distribute elements within containers. Additionally, I experimented with CSS Grid, which provided greater control over the layout, particularly in structuring complex sections of the website. Through this, I gained a deeper understanding of when to use Flexbox for one-dimensional layouts and Grid for two-dimensional designs. - Figure Element for Gallery Creation
I utilized the <figure> element to create an image gallery that enhances the visual presentation of vinyl records. This allowed for better semantic HTML structure and improved accessibility, ensuring that captions and images were properly linked for a more meaningful user experience. - Background Gradient Implementation
To create a visually appealing interface, I experimented with CSS background gradients. This technique allowed me to blend colors smoothly, giving the website a more modern and engaging aesthetic. The use of gradients contributed to a polished look that aligns with the retro-modern theme of Recursive Records. - Image Optimization with WebP Format
One of the technical improvements I implemented was converting images to the WebP format. This resulted in significantly reduced file sizes while maintaining high image quality, thus improving the website’s performance and loading speed. This optimization plays a crucial role in enhancing user experience and SEO rankings. - Introduction to JavaScript and Attribute Manipulation
This project marked my first hands-on experience with JavaScript. I explored JavaScript attributes to add interactive elements to the website, enhancing user engagement. Learning how to manipulate attributes dynamically opened up possibilities for future enhancements, such as interactive animations and real-time content updates.
Challenges and Overcoming Them
While working on this project, I encountered a few challenges, primarily in learning and implementing new technologies. Adapting to CSS Grid required multiple iterations before achieving the desired layout, and understanding JavaScript attributes initially proved challenging. However, through research, online tutorials, and trial-and-error, I successfully overcame these obstacles and expanded my skill set.
Conclusion
Building the Recursive Records website was an enriching experience that deepened my understanding of modern web design principles. The project allowed me to explore layout techniques with Flexbox and Grid, improve accessibility with semantic HTML elements, optimize performance through WebP images, and introduce JavaScript for interactivity. This hands-on experience has significantly contributed to my growth as a web designer and developer, equipping me with valuable skills for future projects.