Original Small Business Website
When starting on the revisited version of the Small Business Website, I did not want to implement a completely new design as well as apply all the new things I have learned in the past couple of weeks. My goal was to enhance the original version of the site to be more visually attractive, as well as accessible, more manageable in the chance of expansion and have good search engine optimisation.
Revisited Small Business Website
Visual Design Evaluation
There is a number of aspects that have changed from the original to the revisited version. The overall feel of the original seemed quite unbalanced when it came to the colours. Therefore, I decided work with smaller blocks of colour to display different types of information. I made more use of the dark red shade in my colour scheme to draw attention to the navigation bar. The header image in the original almost appears lost due to the transparent effect for legibility reasons. At first I debated to not use a header image at all, but I decided to keep it for the easy identification of the site as a bakery. I counteracted the faded image by utilising the logo as a visual main heading on top of the header image, while the mark-up for the actual <h1> was moved off the viewport.
I also added little information bars for at a glance details, such as opening times and address. The contact buttons in the header were additions for mobile users to be accessed through one-click (these are still visible for wider viewports too, as it is vital information).
Based on my feedback for the original submissions, I also changed the hover effect on the navigation to stop if from jumping around. This was bad user experience, as the user might assume the site is broken. All body texts got a heavier font-weight and more line-height, to give the design a stronger feel.
With all these changes implemented, the site feels more sophisticated and clearly structured. It reflects the value of Richardson’s being a traditional family-owned business.
Mark-up Evaluation
In the next step of the analysis of the original small business website I evaluated my mark-up for my HTML and CSS files. These were at a first glance valid, as I did validate my code, but there were some grave semantic errors that needed fixing.
I had the bakery’s address marked up as an unordered list with several list items, which is semantically incorrect. I changed the mark up to paragraphs and the header, where the address was just one line left it as is, while the footer mark-up got the addition of microformats. Microformats help the address of a person or an organisation be machine readable, which also helps with the site’s SEO.
<div class="address">
<div class="addresstxt h-card">
<p class="p-name">Richardson's Bakery</p>
<p class="p-street-name">53 High Street</p>
<p class="p-postal-code">OX18 4QA</p>
<p class="p-locality">Burford, United Kingdom</p>
</div>I also made use of microformats while marking up the contact information for email address, phone number and social media accounts.
<h2>Contact Us</h2>
<p>
<a class="u-email" href="mailto:enquiry@richardsonsbakery.co.uk?subject=Enquiry"><img src="social-logos/email-logo-red.png" alt="email logo" height="64" width="64">enquiry@richardsonsbakery.com</a>
<a class="p-tel" href="01993826371"><img src="social-logos/phone-logo-red.png" alt="telephone logo" height="64" width="64">+44 19938 26371</a>
<a class="insta" href="#"><img src="social-logos/insta-logo-red.png" alt="instagram logo" height="64" width="64">@richardsonsbakery</a><!-- fictional instagram -->
</p>Originally, the menu list on the products page was defined as many sections nested within a big section. When I validated my code this shoed an error, as I did not include a heading for each section. As I was set on using <section>, I added sub-headings, which I hid for certain viewports, as they disordered my layout. For the revisited site, I changed the mark-up to <div> and left out the headings, as they were not even planned to be included from the beginning.
I changed the mark-up of my opening times to a definition list instead of an unordered one. The original was semantically correct, but a definition list gave me more opportunities to style the list, without the use of <em> or <strong>.
<h2>Opening Hours</h2>
<p id="greeting">Welcome to Richardon's Traditional Bakery.</p>
<dl>
<dt>Monday</dt><dd>8am - 5pm</dd>
<dt>Tuesday</dt><dd>8am - 5pm</dd>
<dt>Wednesday</dt><dd>8am - 5pm</dd>
<dt>Thursday</dt><dd>8am - 5pm</dd>
<dt>Friday</dt><dd>8am - 5pm</dd>
<dt>Satursday</dt><dd>10am - 4pm</dd>
<dt>Sunday</dt><dd>10am - 4pm</dd>
</dl>The first version of my SBW had the <iframe> map only on the home page as well as the contacts page. As this is becoming more vital with more users being on mobile phones, I decided to move the map to the footer and have be a constant part of each page on the site. I also added another navigation bar in the footer, for easier access to the rest of the pages without having to scroll back up.
Lastly, I went through my CSS file and tidied up my code. I deleted redundant code and added values together where I could. This took long than expected, as my CSS code was quite messy. This is something I could have done when submitting originally, and something I will put a bigger priority on for future projects.
User Experience Evaluation
The original SBW scored a 72 out of 100 on https://seositecheckup.com/ for Accessibility and SEO, which is already quite good. However, there are a couple things I implemented to give my users a better user experience.
My site was already responsive, with a mobile first approach, but there were some layout issues, such as the footer, which I did not fully fix before the initial submission date. I took my time to rework the media queries, while again staring with the smaller viewport. As I was working with already existing styling rules, this was more difficult and time consuming then first expected.
I also added another aria label to my footer navigation of “secondary” so screen readers can identify it as not being the main navigation for the site.
To make the feel of the site cohesive I added a custom 404 error page, which matched the branding and will give the user options to navigate back to available functioning pages. I also installed some humour into this by using an image of a burnt toast, as it is quite common to add some playfulness to these pages.
SEO Evaluation
The initial site was not overly SEO-friendly, so there were important steps to take, to ensure good findability. As a first point I came up with a keyword strategy. My most commonly used keywords are Burford Bakery, Traditional Bakery, Artisan Bakery and Family Bakery as well as the name Richardson’s. These were already used throughout the site, but I added them to a couple of code elements to even further improve. I made sure each page had a different <h1> that corelates to the content of the page. The <h1> also mirrors in the ULRs of the respective pages, as well as in addition to the brand name in the page <title>.
I then added unique meta description tags for each page, for search engines to display in search results. I made sure this was never longer than 160 characters, so no content gets cut off.
After re-evaluating the improved site it scored 76/100 on https://seositecheckup.com/, which is a slight increase with more room to grow, as I deepen my knowledge further.
Enhancement through PHP and JavaScript
The revisited site was made modular through the use of PHP includes for the header, navigation and footer. Even though this site only consisted of around five different pages, this proved to be extremely handy, as I am quite indecisive in my decisions sometimes and things change around quite often.
For further progressive enhancement I used minimal JavaScript to highlight the current day of the week on the opening times, as well as to display a greeting message, which states whether the bakery is currently open or closed.
Conclusion
Overall, I can say that revisiting an already existing site was a challenge, but helpful and realistic, as it mimicked how a real-life job might operate in the future. I am satisfied with the outcome of the Small Business Website, even though there is more room to grow and enhance as I further my learning in all thing’s web design.
Leave a Reply