Small Business Website - Revisited

The initial website was designed for Ashton’s Cheeses to bring customers back to the shop, increase awareness and improve trade. The task was to design a website that contains all the information a potential customer might need and to develop a brand identity that attracts customers.
After carefully analyzing the initial design for Ashton’s , I realized there was need to make some adjustments to the design. Below are some the improvements.

1) Critical Analysis of the Original Site

Though I had used WebP format, the images still need to be optimized for better performance. Where in mobile the performance for all pages was 80 above, and for desktop it was 95 and above.

The navigation menu had a problem when it came to mobile layout. And for desktop, the text-size was slightly small, which would be difficult for a user to read.

On the homepage in the desktop layout, the image was going beyond the fold. Also, the welcome paragraph text was too wide, which would be difficult for a user to read, and if there were some actions happening, the user wouldn’t notice them.

About the color, the only color that failed was #7BBFBE (Tiffany Blue), which I used for the navigation menu and other links’ hover state. Although it passed in the navigation menu with minimum contrast (AA), Enhanced contrast (AAA) failed for regular text. Also, I needed to maintain consistent styling for the links in the hover state.

When the layout increases the text alignment in about us, events page and products inner page feels bit off.

For the Visit Us page, I planned to change it entirely because the positioning of the details was not good, and other details like address, phone number, and email ID were missing. Also, for the shop timing, the markup that I used was incorrect (using <p> tags), and similarly in the Events page for the details.

In the footer section, I failed to add the shop timing and quick menu links so that users could navigate to different pages from there as well.

For SEO, I hadn’t implemented proper meta descriptions or title tags. Also in my initial website my title for every pages was the same. Which significantly reduces search engine visibility and ranking potential.

2) Area of Improvements

While keeping the WebP format, I further optimized the images by reducing their file sizes.

For the navigation menu, I fixed the mobile layout issues by properly implementing CSS flexbox. In my initial site, I used display: flex but didn’t adjust it for smaller screens. My improved approach uses a mobile-first strategy with flex-direction: column for small screens that changes to flex-direction: row at breakpoints of 700px and above.

For typography, I changed the typeface from Nunito to Quicksand because both have similar rounded letterforms, but Quicksand has a curved apostrophes that better align with my logo design. This subtle change maintains my site friendly and professional as it is.

On the homepage, I placed the hero image beside the text using CSS grid layout on desktop. This reduced the width of the text for better readability and prevented the image from going beyond the fold on desktop screens. Other than that I slightly changed the design look by adding few element.

For the color that previously failed accessibility tests #7BBFBE (Tiffany Blue), I now use it as a background color for links with black text. This approach maintains the visual identity of the site while meeting WCAG accessibility standards for color contrast.

For text alignment on about us, events, and inner products pages. On mobile, only the main heading (<h1>) and subheadings (<h2>) are center-aligned, with all other text left-aligned. And when it reaches the breakpoint at 1100px, I adjusted to the left for a more consistent reading experience.

I changed “Visit Us” to “Contact Us” to better reflect the comprehensive nature of the page, which now includes not only location details but also contact information.

The markup for shop timing, I replaced paragraph tags with description lists. Similarly in events page for details.

Based on the feedback from the original site review, I enhanced the footer section by adding shop hours, quick navigation links, and complete address information, allowing users to access important information from any page. But still there is some alignment issue that need to fixed.

For SEO optimization, I implemented unique meta titles (55-60 characters) and descriptions (120-160 characters) for all pages by taking reference from MDN Web Docs and Moz guidelines.

Additional improvements include:

Creating a custom 404 error page with helpful navigation options to guide lost users

Adding JavaScript functionality that calculates whether the shop is currently open based on the day and time, displaying an appropriate message to visitors.

Implementing a skip-to-content link for keyboard users.

Creating a comprehensive accessibility statement page

One small change that I made inside the <header>, is in my previous code, the navigation menu was contained within the header tag. And now I restructured this to only keep the logo inside the header element, placing navigation as a separate section. This cleaner organization allowed for more consistent implementation across all pages while excluding navigation from specialized pages like the custom 404 error page.

I also created a sitemap.xml and robots.txt file to improve discoverability for SEO optimization. But I’m not sure if I have done it correctly. Still learning it!!

After completing all the improvements, I validated both my HTML and CSS code to ensure everything was correct with no errors.
And also checked the performance using PageSpeed Insights, where in mobile all pages scored 90 and above, and in desktop they reached 99 and full 100 scores.