The objective of the small business revisited assessment was to make improvements to the small business website made in term 1. There are lots of things we have learned between the duration of these two assessments so the article will contain an analysis of the initial website and the changes implemented.
Analysis of the small business website
My choice of website for the small business assessment out of the four options was a butcher’s website. It was made using only HTML and CSS with the mobile-first approach design. As it is supposed to be a brick-and-mortar shop, the main focus was informing users about the store and its location rather than selling the products as if they were online.
The website contains three pages; the home page, a product page, and an about page. The home page contains information on their product specialties and their store location with opening times. The product page is just a list of products and the About page includes information on the staff members.
Main Changes to Implement
A small change in the logo (left) is removing the light text which would be barely visible in small sizes and making it transparent so the logo fits in with the navigation bar.
The initial color palette was to utilize greens and reds which are very common colors used for meat products with a lighter background color. But I was not satisfied with trying to make these two colors work with each other. Looking at the original website, the green color did not have much impact on the design, and felt like it was there as a second thought.
So, the purpose of the second color palette is to design the site to look premium which goes with the business brand phrase ‘purveyor of the premium meat’. Using beige color with contrast to a dark background and using the red color but more saturated. The darker background helps in making the colors pop out more compared to the white background.
The darker red has also higher contrast with the white color that meets the WCAG AA requirements. So, this solves the issue of some legibility that was on the original website.
To give the website the ‘premium’ feel, the fonts need to be also changed as the heavy sans-serif does not achieve that. Changing to a serif font like the Cormorant Garamond for the headings which give the fancier look while still being very legible for smaller headings and using a simple font like Noto Sans for body text.
The main use of PHP in the revisited website is to reuse the code repeated on all other pages like the head, header, and footer elements. In places where the text may be different for each page like the page title, the PHP variables are used for it. This makes the code leaner and any changes can be made in that one file instead of going through all files.
The addition of PHP includes files means the code needs to remain consistent on all the pages. The header tag in the original version contained texts and images besides the navigation bar for the landing page, but it was not the same for the other pages. Therefore, moving them to the main element and using a header for navigation only makes it reusable. Keeping the semantics fairly similar within each page also helps in the consistency of the overall design with fewer CSS lines. For comparison, the CSS for the revisited website has 100 lines fewer than the original.
Since the image and heading content have been moved to the main element, the navbar can be designed to be clearer without any image distracting it. Also adding an indication of the page that the user is currently on.
The last main change is on the landing page which is to change from displaying their best product to the store image with the business name and address. And pushing the image below the text so it does not obstruct the readability and the user can properly view both the store and text.
The main content of the home page has fewer images as they are also already being used on the product page.
The rest of the content remains the same with some changes in font sizes and spacing throughout the different viewport sizes.
404 Error Page
A custom error page for the small business revisited website is also included when the users end up on a URL that does not exist. The main content is used to display the text while reusing the header and footer to keep the look identical to other pages.