Small Business Revisited: Summary of Improvements

11/03/2021 Off By joanna.angel9251

Analysis of original site

I believe that my original site was quite effective at its job as promoting a bricks-and-mortar arts and crafts shop. Its clear navigation, simple layout and minimalistic colour palette made it easy to use by most. It also incorporated a responsive design so that the website could be viewed comfortably on any size of screen. One small failure though was my lack of testing on larger screen sizes. This meant that some text came across as being much smaller than I had intended and the entire page would cling to the top-left of the screen on wide displays. A lot of the elements, especially the navigation bar, also appeared too close together as a result of large screen viewing.

To help with maintainability, I saved some of the reusable code inside separate PHP files to be ‘included’ in the HTML. However, although my code was correctly formatted and indented in the code editor, on viewing the page source in a browser, the indentation was off due to the various includes used.

Another thing that I think my site did well at was accessibility as I used semantic elements such as <address> to help describe the nature of the content to those who might be visually impaired.

A criticism I received of the original site was that the font used for subheadings (DejaVu Serif) lacked personality. I was intending to give the site a refined, high-end art vibe, however, it appears style choices on other parts of the website (such as displaying a lot of craft and children’s products rather than quality art supplies), and mentioning the children’s workshop, gave it a more everyday crafting personality, meaning the font did not fit well with the overall mood of the site.

Improvements made

Accessibility

On the topic of accessibility, I had initially added landmark roles (banner, contentinfo, main and navigation) to improve the experience for those people using older browsers which may not recognise the newer semantic elements such as <main>, <nav>, <footer> etc. However, since discovering that this is no longer necessary, these have now been removed. On the other hand, I added <a href=”tel: …”></a> around telephone numbers so that people viewing on mobile phones are more likely to be able to click directly on the link to make a call, therefore making getting in touch easier. Some browsers recognise telephone number formats automatically, but not all. Accessibility was also increased by implementing access keys that allow the user to skip to either the navigation section or main content.

Visual design

The visual appeal of the website has been improved slightly by increasing the size of the brand text so that it stood out more from the rest of the page and did not look lost on large screens. The link text used in the navigation bar on top of the paint streaks, has been reversed so that the default is now white which changes to dark-red on hover and focus, rather than the other way around. This fits better with the overall look of the site. The strap-line has also been reduced in length and the ‘Your’ word italicised to emphasise that the shop is made to serve the local community.

Large screen viewing has also been improved by centring the content, rather than letting it naturally drift off to the top-left corner; increasing spacing around the navigation bar, adding space between the strap-line and brand title, as well as increasing the spacing between the different product sections. Also on the products page, box-shadows have been added to the page navigation links so that they are a bit more visible and a user can see then and use them to find what they are after quicker.

A new font (Margarine) was applied to the page subheadings to replace the original one which didn’t fit the mood of the site. This is a simple, yet fun cursive font which gives a more creative and inspiring vibe to the site.

Technical

Technical improvements to the site include includes! Although these were already present on the original website, I have taken them one step further by adding more of the reusable code to the partials. Before I was only including the static content, but now I am using variables to modify the small parts that change on each page such as page title, keywords, descriptions, smart navigation etc. The partial files were then moved to a separate folder, aptly named ‘Partials’, so that in my robots.txt folder I could disallow the crawling of them, along with the ‘Errors’ folder containing the custom 404 error page and the ‘Scripts’ folder containing the open status JavaScript code.

<?php
$description = ' See some beautiful creations by Botticelli customers.';
$keywords = ', botticelli client gallery, kent art gallery';
$title = 'Customer Gallery';
$galleryActive = ' class="active"';
include 'Partials/header.php';
?>

Above is the top section of the gallery page, and below is part of the header partial.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Botticelli Arts &amp; Crafts &mdash; Your local independent arts and crafts shop in Paddock Wood, Kent.<?php echo $description; ?>">
		<meta name="author" content="Botticelli">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="independent art supplies shop, art and craft supplies shop, local craft shop, kent craft shop, paddock wood shop, botticelli craft shop, botticelli art supplies<?php echo $keywords; ?>">
		<link rel="shortcut icon" type="image/png" href="Photos/favicon.png">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Margarine&family=Sarina&display=swap" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="botticelli.min.css">
		<!-- Global site tag (gtag.js) Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=G-PF65KTVYMK"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'G-PF65KTVYMK');
		</script>
		<script src="Scripts/open.min.js"></script>
		<title><?php echo $title; ?> | Botticelli Arts &amp; Crafts Shop &ndash; Paddock Wood</title>
	</head>
	<body>
		<a class="skip" href="#main" accesskey="1">Skip to content</a>
		<a class="skip" href="#nav" accesskey="2">Skip to navigation</a>
		<div class="wrapper">
			<header>
...		
				<h1>
					<a href="index.php" title="Botticelli homepage">Botticelli</a>
				</h1>
				<p><i>Your</i> family-run art and craft shop serving Paddock Wood and its surrounding villages since 1989.</p>
				<p id="open-status"></p>
				<nav id="nav">
					<ul>
						<li><a href="products.php"<?php echo $productsActive; ?>>Products</a></li>
						<li><a href="workshops.php"<?php echo $workshopsActive; ?>>Workshops</a></li>
						<li><a href="gallery.php"<?php echo $galleryActive; ?>>Gallery</a></li>
						<li><a href="contact.php"<?php echo $contactActive; ?>>Contact</a></li>
						<li><a href="about.php"<?php echo $aboutActive; ?>>About us</a></li>
					</ul>
				</nav>
			</header><?php echo "\n"; ?>

Speaking of JavaScript, the code on the original website that updated the year at the bottom of the page, has been removed and replaced by PHP in order to make it visible on more browsers as some are not enabled with JavaScript. However, as mentioned previously, I have included some new JavaScript code which gives tells the user whether the shop is currently open, and if not, when it next will be. This is displayed in the header of each page. This could also be done with PHP, however, this would use the server time rather than the time on the visitors’ device, which would not be very helpful.

As said in the summary, my code indentation was slightly off in the original version. This has now been fixed by adding extra tabs in the necessary partial files and using “\n” at the end of each partial to correctly format the code that follows the partial include.

On the original site I had attempted to include a custom error page, however I could not work out why this was not working for me. With some help, I realised that it was because I was using a path starting at the project folder root, rather than the root folder of my website. This has now been rectified.

The final thing I changed was to minify the CSS and JavaScript files so that they are quicker to download for users. An advantage of this would also be that they take up less space on the server, however I have left the originals up as back-up copies and for coursework marking purposes.

Small Business Revisited