My goals for SBW revision
My aim for revisioning the small business website project was not to do something completely new but find a way to improve the design I already created. For the first submission I already tried to add responsiveness and use a mobile-first content-out approach, but there was still some odd spacing on some pages. I was not happy with how it looked on a large screen, so in terms of layout, my aim was to make it look visually more balanced on wide screens. I generally liked the design and colour scheme of the original website, so at this stage, I wanted to focus on making a new version more SEO-friendly and accessible, improve navigation and use the power of PHP to make my website modular.
Let’s now talk changes
link to the SBW revisited
Branding
I got good feedback on the existing branding solution with a comment that my site could benefit from making the logo slightly bigger. I decided to change the composition of the header and move the logo from the centre to the left and put the information about working hours on the right. This allowed me to slightly enlarge the logo, but not that big to take up too much precious space on the top of the page. I decided to use the grid in the header and nav, and in the responsive mode, the layout changes from 1 column to a 2-column layout.
I decided to add a favicon as an additional element of branding.
New content
The lecture about content strategy made me doubt if I need a blog page. But after a lecture on SEO, I decided to keep it, as it is the only page that could be updated regularly, which is good for the robots that will be visiting the site to index it. I thought that publishing a new recipe only once a month is not that often to bother the site owner with generation of new content. But it could become a marketing instrument used for highlighting some of the products from the store in the section “Cook it with”.
After content revision, I decided to add a new page showing the full range of products, as on the home page I mentioned only three main categories. As I wanted to add some user interaction elements, I decided to use sprites with png as background images. I put info if the product is in store, out of stock or just arrived in store as a link text shown on hover. It can be edited easily in the link text in HTML when the updates need to be done.
User experience
To improve the user experience, I created a custom error page and linked it to the site using the .htaccess file. Now I have a separate 404 error page that is styled accordingly to my coursework and another as an error page for the small business website project.
I thought that the navigation bar needed some improvements as the current page was not highlighted enough and I only used a minor change of link styling. For the new version, I added the visible colour highlight on hover for both top and footer navigation and make the current page marker more visible.
As I moved the working hours information to the top of the page, I thought that it could be useful to add some time-specific JavaScript and build a script that shows if the store is open or close now. JS is specific to local time while PHP returns server time, that is why in this case usage of JS makes more sense. For the case when JS is not supported or disabled, I provided a fallback with a general welcoming text.
Layout
My alignment on the first version was slightly off, so I added some changes to the styling and grids using media queries. I got several insights during the seminars with presentations and decided to add some of the feautures such as responsive hero images to the new version.
Using the <picture> element and adding images of different sizes with the source attribute allowed me to use the images depending on the width of the device.
<picture>
<source media="(max-width: 320px)" srcset="images/recipe-scones-320x199.png" >
<source media="(max-width: 480px)" srcset="images/recipe-scones-480x299.png">
<source media="(max-width: 550px)" srcset="images/recipe-scones-550x342.png" >
<img src="images/recipe-scones-550x342.png" alt="Close up photo of scones with jam">
</picture>For the previous version I generally used grids as the main instrument, so in the revisited version I made some minor corrections to the width and proportions of rows and columns for the blog, main product pages for various viewport widths.
Accessibility
While improving the user experience, I wanted to make my new version of the website more accessible for the visitors who use various user agents and assistive technologies. My main point was to keep my HTML semantic, which is crucial for making any website accessible. I added aria-current=”page” to the active navigation element as it is a way to ensure markup and design communicate the same information with or without assistive technologies.
SEO
In the revisited version I implemented some SEO tools and tricks that were covered during the SEO module.
One of the biggest problems I fixed was to add H1 to pages that didn’t include it and made them meaningful in terms of SEO on all the others. As I wanted to style h1 differently depending on the page I added a specific #id to target them in my CSS.
I also added unique meta tags and descriptions for each page, and as I put the head as inc.php file, I used variables for the page title and description that can be added to each page accordingly.
<?php
$title = "Our products ";
$descr= "A wide range of organic and vegan products for the healthy diet at Cornmarket Delicatessen.";
include $_SERVER['DOCUMENT_ROOT'] . '/content-management/small-business-website/ver-4/includes/head.inc.php'; ?>During the seminar sessions, we were introduced to microformats, and I found that implementing them for marking up the address information will be appropriate. Applying a set of specific classes for the h-card allows to show the contact and address information straight after the search engine bar, there is no need to enter the site to know the working hours and the address of the store. That is a huge improvement in terms of both user experience and SEO.
<div class="addresstxt h-card">
<div class="address">
<h3>Address</h3>
<p class="p-name"> <em>Cornmarket Delicatessen</em></p>
<p> <span class="p-street-address">40–42 Greenwich Church Street,</span> <span class="p-locality"> London</span><span class="p-postal-code"> SE10 9BL</span></p>
</div>
<div class="hours">
<h3>Hours</h3>
<p>Monday–Friday <em>08:30–17:00</em></p>
<p>Saturday–Sunday <em>12:00–17:00</em></p>
</div>
<div class="mail">
<h3>Contact us</h3>
<p><a class= "u-email" href="mailto:hello@cornmarketdeli.co.uk"><em>E-mail:</em> hello@cornmarketdeli.co.uk</a><br>
<a class="p-tel" href="tel:+441234567890"><em>Tel:</em> +44 12 3456 7890</a>
</p>
</div>
</div>I added the information for bots that might visit the website for indexing (fingers crossed :-)) and added a robots.txt file with a link to xml sitemap, especially for them. The sitemap.xml was added to google search console. I excluded some folders like the error page and includes from indexing. In the humans.txt I gathered all the attribution links to the photos I used on the website.
In terms of wording, I tried to implement a keyword approach without making texts too busy. Now all the content pages have specific texts to be indexed properly.
I also ran a colour size accessibility check. The result was good, there was a recommendation to make one paragraph either bigger or change the colour contrast, but for the font size I use it was approved, so I decided not to change it.
After running the SEO check on https://seositecheckup.com/ I got a 79/100
Code
In this project, I decided to implement PHP includes and make the website modular for easier maintenance (imagine it is needed). Putting head, header and navigation, footer, and social media into the includes allows making changes in one file. I also implemented some PHP into the navigation using a set of if-else statements adding relevant classes and aria labels to current pages.
Summary
This project was a real “learn by doing” experience for me as after all the new themes presented in the lectures, I added several things to learn and try to my to-do list. I enjoyed learning new front-end and back-end technologies and trying SEO and accessibility tools.
Useful instruments
App for accessibility check for colour contrast according to WCAG levels:
https://www.tpgi.com/color-contrast-checker/
To create the xml sitemap I used
https://www.xml-sitemaps.com/
To validate HTML and CSS before I moved to the PHP modular approach the one and only https://validator.w3.org/
To check the element support is easy on
https://caniuse.com/
MDN Web Docs are always useful and very helpful
https://developer.mozilla.org/en-US/
Microformats specification
https://microformats.org/wiki/h-card
SEO checkup
https://seositecheckup.com/
SVG optimisation
https://jakearchibald.github.io/svgomg/