Compton’s Hardware Website Revisited

The Small Business Website project was a design and development project for a website for Compton Hardware Store and a learning experience in front-end development and web design. During the course of the project, I gained a greater understanding of the significance of planning, user experience and design decisions, and honed my abilities with regard to semantic HTML, responsive layouts, typography and colour theory. I have also enhanced my problem-solving skills in using CSS selectors and layouts. The final website was designed to be simple, easy to navigate, consistent in branding, and mobile-first, in order to provide a professional and user-friendly experience on various devices.

In this project, I got to design and develop a modern Compton Hardware Store website, while gaining a better understanding of the entire website design process. Was introduced to the concept of website structure planning, clear content organisation and user-friendly navigation. I also enhanced my problem-solving approach through the use of CSS selectors, responsive layouts and semantic HTML elements throughout the course of the project.

The design is professional and welcoming, thanks to the use of a consistent visual style, incorporating the Poppins and Mukta fonts, a clean colour scheme, and quality images from Unsplash. I used an approach that started with mobile-first to create a responsive website, which is functional on screen sizes that vary. Overall, I think I have enhanced my technical skills and developed a deeper understanding of how I can enhance user experience and usability through design decisions when creating a website.

Responding to Feedback

I received feedback on the previous version of Small Business Website project, and I did several changes to improve the design and technical quality of the website. To enhance semantic markup, I checked my HTML structure and removed the unnecessary <section> and <article> elements and replaced them with <div> elements, where it was needed.

I also updated the image alt text by removing phrases such as “image of” to follow accessibility best practices.

In response to the design feedback, I improved the readability of the website by adjusting line heights for image captions.

Increasing the navigation text size for better accessibility and usability.

I also worked on creating a stronger and more visually engaging logo design to improve the overall brand identity of Compton Hardware Store.

Additionally, I avoided using Font Awesome icons and instead used simpler alternatives by using .ico format icons rather than importing from Font Awesome, in order to improve website performance.

Revisited Website

In the second iteration of the Compton Hardware Store website, my main emphasis was to be on the quality of the site, adhering to key development requirements like maintainability, accessibility, SEO and responsiveness. To ease up the maintenance and updating of all pages of the website, I used PHP Server Side Includes (SSI) to handle common elements such as the header, footer, and navigation.

I also improved user experience by adding a custom 404 error page to handle broken links more effectively.

To make the website more inclusive and efficient, I considered image optimisation and performance improvements, ensuring that visual content loads faster and remains suitable for different devices.

I also implemented JavaScript functionality to enhance usability, such as highlighting the current day’s opening times to help users quickly understand whether the shop is open.

From an SEO standpoint, I enhanced the structure of my pages by incorporating descriptive titles, meta descriptions, and well-organised headings to make them more SEO-friendly. Accessibility was also crucial, making sure to have good colour contrast, clickable areas and applying ARIA features to support all users. Last but not least, I built a fully responsive, mobile-first website to support the website on all screens, and particularly between the important breakpoints.

Used a carbon footprint calculator to assess the sustainability of my website. The results revealed that every page view generates just 0.08g of CO₂, much lower than the average website. That means that the website is light and optimised for efficiency. The report also verified sustainable energy for the website, which helps to minimise its environmental footprint. This is a good example of sustainable web design.