SBW revisited
A review of the enhancements made for Richardson’s Bakery website revisited.
The major goal was, of course: to give it a bit more pazzaz and adjust things according to the feedback I got on the original version.
Branding
I decided to spice the branding up a little and exchanged the photographs above the fold. The blue I chose makes the website brighter, happier and more appealing. That way, it is seen as more approachable and friendlier than the previous brownish colour scheme that was quite boring and dull.
I did not change the colours of the logo, since it could be seen as non-traditional and maybe a bit ‘too funky’ to change the colour of a loaf of bread to blue. Blue is associated with trust and loyalty.
What I hope to achieve is to make new clients put their trust into Richardson’s Bakery and make it easier for the long time costumers to stay loyal to the bakery.
BEFORE:
AFTER:
UX
To enhance the user experience, a customized error page was developed and connected to the website through the .htaccess file. This has resulted in the availability of a distinct error page for 404 errors that is designed for the small business website project. It has the logo at the top, and it’s cohesive with the branding of the website. The error page was designed to redirect users back to the homepage. There is a clearly distinguishable button which points there.
I have also created a bit of information that updates according to the day of the week and time of day. The JavaScript code is simple, and you can find it on the screenshot below. However, in case the JS has been enabled, the fallback is simply ‘Visit us!’.
I added an arrow which takes the user back to the top of the screen without having to scroll up. That part was also done using JavaScript.
SEO
After running the SEO check on https://seositecheckup.com/ I got an average of 65/100.
After changing the branding a bit I decided to run a contrast check, which the website passed. The accessibility check told me to add an alt text to an iframe with the map, which I did.
I included meta description tags on every page.
I also added an Instagram icon and a call to action-esque paragraph for the potential costumers.
I added a robots.txt files as well as the sitemap.xml for managing a website’s search engine optimization. By providing a sitemap.xml file, I can ensure that all the website’s important content is indexed and easily discoverable by search engines, which can help to improve the site’s overall visibility.
CODE
For this project, I chose to utilize PHP includes to create a modular website structure that would be easier to maintain in the future if necessary. By including separate files for the header with navigation and footer sections of the site, I am able to make changes to these elements in just one file, which saves time and effort. These small but significant changes are a good practise for my future projects.
I also made the code leaner and easier to read. I used comments wherever I thought they were needed and worked on my indentation.