{"id":367,"date":"2025-05-19T08:11:01","date_gmt":"2025-05-19T08:11:01","guid":{"rendered":"https:\/\/devikanair2805.uk\/journal\/?p=367"},"modified":"2025-05-19T14:14:06","modified_gmt":"2025-05-19T14:14:06","slug":"small-business-website-revisited","status":"publish","type":"post","link":"https:\/\/devikanair2805.uk\/journal\/2025\/05\/19\/small-business-website-revisited\/","title":{"rendered":"Small Business Website – Revisited"},"content":{"rendered":"\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

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.<\/p>\n\n\n\n

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

1) Critical Analysis of the Original Site<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

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

About the color, the only color that failed was #7BBFBE (Tiffany Blue)<\/strong>, 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.<\/p>\n\n\n\n

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

When the layout increases the text alignment in about us, events page and products inner page feels bit off.<\/p>\n\n\n\n

\"\"
products inner page<\/figcaption><\/figure>\n\n\n\n
\"\"
Events page<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

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><\/code> tags), and similarly in the Events page for the details.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

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

2) Area of Improvements<\/h3>\n\n\n\n

While keeping the WebP format, I further optimized the images by reducing their file sizes.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

For the color that previously failed accessibility tests #7BBFBE (Tiffany Blue)<\/strong>, 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.<\/p>\n\n\n\n

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

For text alignment on about us, events, and inner products pages. On mobile, only the main heading (<h1><\/code>) and subheadings (<h2><\/code>) 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.<\/p>\n\n\n\n

\"\"
About Us Page<\/figcaption><\/figure>\n\n\n\n
\"\"
Inner Products Page<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

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.
<\/p>\n\n\n\n

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

The markup for shop timing, I replaced paragraph tags with description lists. Similarly in events page for details.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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<\/strong><\/a> and Moz<\/strong><\/a> guidelines.<\/p>\n\n\n\n

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

Additional improvements include:<\/p>\n\n\n\n