Summary of changes
As part of a campaign to bring customers back to the high street, a non-e-commerce site, for Spokes and Saddles, was required to be designed to increase the awareness and improve trade. The site is to be used as a marketing tool to encourage people to visit the store premises in person. The site contains all the relevant information customers may need to learn more about the business such as location details, contact details, and any images to help visualise what the store is offering.
Of course, there is always scope for improvement, thus, some updates have been made to improve the site’s purpose.
1. Page Header – Logo
The initial logo in the header included text in an image, as can be seen below:
Using text in images has several drawbacks, for instance, it reduces accessibility; those who are visually impaired that rely on screen-readers will not be able to hear the content that is conveyed in the images. Additionally, it can lower search engine rankings and reduce visibility in search results as the text within images is not indexed by search engines, hence negatively impact website’s SEO performance.
In the revisited version of the site, the text is now not part of the image but separate to the business’ logo, as you can see below:
2. Line spacing – especially the Contact Us page
In the initial design, the contact-us page on the site had ineffective line heights, although there were headings and body text, there was no visual hierarchy.
In order to enhance readability, visual hierarchy, accessibility, whilst maintaining aesthetics and managing whitespace effectively, the line height between the headers and the body text has been changed in the redesigned version of the contact-us page.
3. Code and Style improvements
After the initial design of the site, I was made to realise that there were some issues with the markup semantics. I was not using the <section> and the <heading> tag accurately. I was unaware of the difference between the <section> and <div> tag, hence I was using them both interchangeably without much thought. I have learnt that the <section> should have and appropriate <heading> level. <section> is used to define semantically meaningful sections of content, while <div> is a generic container used for grouping content for styling or scripting purposes. It’s generally recommended to use <section> when appropriate to enhance the semantic structure of your HTML document, while <div> can be used for more generic grouping and styling needs.
For the revisited version, I ensured to use the appropriate HTML semantics to maintain clean and clear code.
Additionally, for the CSS, I tried to reduce as much code as I could using the shorthand box model properties. An example is shown below:
Rather than doing padding-bottom: and padding-bottom: (as shown in the left image), I have used just padding: (as shown in the right image), which has the same purpose. Using shorthand box model properties allows conciseness of code and makes it much easier to read. It is much more efficient as it means file sizes are smaller due to the less amount of code that needs to be downloaded by the browser.
4. Site Modularity and 404 Error Page
In the revisited version of the site for Spokes and Saddles, I have made the site modular, this means that the website is broken into smaller, self-contained modules or components. I have done this by creating .php includes files.
Having these components helps make it easier to update these pieces of information without having to repeat writing out the code for each .html file.
Lastly, a custom 404 error page has been designed and implemented for the Spokes and Saddles website in this revised version. If the user somehow ends up on a page that does not exist, then the image below is what they will see rather than the system default error page. This helps improve user experience as it helps users who encounter broken links or mistyped URLs to navigate back to the main website easily. It provides a more user-friendly experience than the default browser error message, which may confuse or frustrate users.
It allows to maintain brand consistency and reinforce the website’s design and messaging, even when users encounter errors. This helps to maintain a professional and cohesive user experience across the website.