Analysis, Changes and Improvements

In this article I will be discussing the changes and improvements I have made over my submission of the Small Business Website – Andy’s Grocery Store. The changes I decided to implement were based on David’s Feedback on the assignment submission as well as my own personal analysis of the website in terms of accessbility, modularity and responsiveness.

While a few of the changes I implemented were mandatorily required by the assignment submission, others were my own interpretation of the things that could be better in the revisited version of the website.

Here is the list of things I am going to discuss about regarding the changes made on the existing Small Business Website:

1. Changes made conforming to David’s Feedback
2. Addition of CSS Animation on Hero Image
3. Modularity Improvements – PHP includes
4. Addition of the 404 page using .htaccess
5. JS implementation for Store’s Status
6. Miscellaneous changes
7. Conclusion

Let’s begin with first of the lot.

i. Changes made conforming to David’s Feedback

Upon receiving feedback on the Small Business Website from David, I immediately set a priority list for the amendments I needed to make for the next iteration of the website.

First of the lot was the lack of an ‘h1’ tag on the pages, which would have a huge impact on the SEO of the website. I proceeded to add an appropriate ‘h1’ tag.

Secondly, I was using the ‘cite’ tag for a content that consisted of an address. Meanwhile the ‘address’ element could have been a way more appropriate tag to be used in that instance. Hence, I replaced the ‘cite’ tag with the ‘address’ tag.

Apart from these changes, the feedback by David was mostly positive.

ii. Addition of CSS Animation on Hero Image

One of the major visual changes that is immediately recognisable by the user was made in the hero image. I recently learnt a new concept of using animation on an image by zooming in the image and then changing the positions in the keyframes.

It gives an illusion of tracing through different products in a grocery store until you find the right product. The same animation is also added in a subtle fashion in the Contact Us page as a background of the contact information.

A similar animation is also added in the Groceries page where I have put it ‘on-hover’ of the specific products that adds to the interactive factor of the website to the user.

iii. Modularity Improvements – PHP includes

To improve the modularity in the code, implementing PHP includes was quintessential. I have made three includes onto my code for that purpose serving different purposes. The ‘header.inc.php’ has the topmost address information along with the site logo and store opening status (which will be discussed in JS Implementation).

Next include was the ‘navigation.inc.php’ which only consisted of the navigation bar, immediately after the header and before the content.

The last include made was the ‘footer.inc.php’, where I placed the footer. I learnt something new in PHP by implementing this, while also understanding the importance of modularity in code. It made the rest of my code look much more uncomplicated.

iv. Addition of 404 page using .htaccess

One of the learnings we had from the Content Management module was the implementation of a 404 Page using .htaccess. It was taught to us, the importance of having an appropriate 404 Page for the UX. It is important to make sure that the user does not feel alienated if they land up on an incorrect URL path of our website.

To fix this, I made sure to implement the 404 page with the same design as the other pages of the website. Also, to make sure to navigate the user back to the Homepage, I have placed a link to let the user to do so upon clicking it.

v. JS Implementation for Store’s Status

Since this website is meant for a Small Business and is meant to drive customers out of their homes to the street, it is important to give an immediate prompt to the user for them to be able to make that decision. This problem was solved by implementing JS into the code.

Having a complex store timing meant that I needed to have multiple conditions in the script. In case the store is open, I also wanted to make sure that the user knows the current time, and most importantly, the store closing time on the current day. For that I implemented JS playing around with multiple variables with relevant functions to get the current day, hours, minutes and days of the week.

In case the store is closed, showing the current time to the user did not make sense and hence the user is prompted to check the timings to get further information.

vi. Miscellaneous changes

Some of the other changes I incorporated were moving the store images from the Contact Us page to the Homepage since that felt like a more relevant spot, as the users can be greeted with an in-store feeling, serving the purpose of attracting potential customers to a small business.

Another change was to update the text alternatives on some of the images to make them more contextual. The aria-labels were also updated especially on the ‘section’ elements on the Groceries page.

vii. Conclusion

In conclusion it was a significant learning curve to implement PHP and JS onto the Small Business Website along with other changes that improved the UX, SEO and Accessibility capabilities of my website.

One of the biggest learnings from the Small Business Revisited experience was to understand the importance of modularity in the code, having an appropriate 404 page, and most importantly to take care of the smallest requirements of a potential user to my website.