Categories
Blog Design for Web Content

Small Business Revisited

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

In the revised version, the site would be including the use of PHP and JavaScript along with the change in the overall theme of the site. Some critical issues like the navigation bar, the logo, and the format of the code to cut the amount of CSS written are to be fixed.

Logo

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.

original log (left) and revised logo (right)

Color Palette

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.

Fonts

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.

Cormorant Garamond and Noto Sans font in use

PHP

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.

JavaScript

JavaScript is used to add the functionality of toggling the navigation bar in mobile devices and also display the current day with opening and closing times.

Consistent Code

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.

Design Changes

First, the navbar had to be changed due to the readability on larger screens, and with JavaScript, a toggle menu can be implemented for mobile screens.

Fig: Small Business Navbar

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.

revised-navbar
Fig: Small Business Revisited Navbar
revised-navbar-mobile
Fig: Small Business Revisited Mobile Navbar

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.

landing page original version
Fig: Original Landing Page
landing page revised
Fig: Revised Landing Page

The main content of the home page has fewer images as they are also already being used on the product page.

original home page main content
Fig: Original Main Content
revised home page main content
Fig: Revised Main Content

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.

404 error page