Small Business Website Revisited

Content Management

My Process:

In this article, I will explain in detail the changes I made to my existing small business website.

Previous Website Link: https://anumehagupta.uk/small-business-bakery/index.html

Updated Website Link: https://anumehagupta.uk/small-business-bakery-revisited/index.php

My process of coming to conclusion on the changes was:

• Check David’s feedback on the previous small business website assignment & make a list of the major changes that he recommended.
• Study my website and come up with opportunities for improvement.
• Make the website more usable in terms of accessibility, modularity, and responsiveness.
• Implement the changes and request random users to try out the website.
• Make more changes if required after user testing.
• Check HTML, CSS, JS & PHP files and refine the code.

Changes & Improvements:

Here is the summary of changes that I made on my website, which I felt were important:

• Making a 404 error page and connecting it to the .htaccess file.
• Making the site modular by using PHP and separating elements of the page that are common in all the pages, like, header, footer, etc.
• Used PHP for the form on the pickup page of the website and linked it to a database (made by using PHP & MySQL).
• Adding JavaScript to immediately clear users’ concerns, i.e., informing the users whether the store is closed or open. This technique helped in saving users’ time and effort, leading to a satisfied user experience.
• Changing website titles, major headings and adding meta description tags to the website for better SEO considerations.
• Improving accessibility of the website.

As per David’s feedback, the changes I made are as follows:

• As per David’s feedback, re-checked & improved the semantic markups of my HTML files.
• Keeping the same colour for navigation in all the viewports to maintain continuity across different viewing platforms.
• Reducing the height of the hero section and making the remaining content of the website more visible to the users.
• Optimizing & reducing CSS.
• Re-check indentation in code.

---

404 error page & .htaccess:

Code:

Firstly, I created a 404 error file including the header, footer, and a basic hero section similar to my homepage in HTML, and changed the file type to .php. Then, I linked the file with .htaccess with an accurate path, as shown below.

UI Considerations:

I wanted an engaging 404 error page inlined with the theme of the website. I took the image of a donut, considered it as the ‘0’ in the ‘404’ number, and made it a background for the page. I downloaded the image of the donut from Unsplash and edited it in Adobe Photoshop to add the ‘4’ in the image, which had a font colour similar to the colours used on my website. The design was intended to make users feel safe and make them realize that they have not clicked/typed any unsafe link.

On my 404 error page, I added a link connected to the homepage and designed it as a button (on which they can click), so that users don’t feel overwhelmed by what to do if they are redirected to some other page.

Site Modularity:

Site modularity through PHP is important to make the website code more effective. This helps in similar styling across all the pages and helps us make changes only which will apply to all pages. To understand which things to make modular, I reviewed my website and found that the footer, header, and navigation elements were the same across all the pages.

I made a folder of includes which contains all the files of header, footer, navigation, etc with the file titles including ‘.inc’.

Making a database & linking it to a form using PHP & MySQL:

I created a pickup page containing a form that allows users to place an order before reaching the bakery and pre-place their order to save time. The form was created in the first iteration of the website, was not linked to any database and the information which was input by the user did not save anywhere.

Hence, in order to save the information of orders, I created a database in MySQL, named anumehag_form, as shown below.

In phpMyAdmin, I created 8 rows that had all the components of the pickup form including an additional id element. The id element had the additional auto-increment feature so that the latest inputs by users were saved in descending order.

To link the form with the database I created a new file ‘process-form.php‘ which included the PHP code to extract the data from the form and insert it into the database. I connected the ‘process-form.php’ file with ‘pickup page’s index.php‘ file.

<?php

// servername => localhost
// username => anumehag_form
// password => smallbusiness123
// database name => anumehag_form
	
//Connect to my SQL
    $host = "localhost";
    $dbname = "anumehag_form";
    $username = "anumehag_form";
    $password = "smallbusiness123";

    $conn = mysqli_connect($host, $username, $password, $dbname);

// Taking all values from the form data(input)
	$name = $_POST['name'];
	$contact = filter_input(INPUT_POST, "contact", FILTER_VALIDATE_INT);
	$email = $_POST['email'];
	$date = $_POST['date'];
	$time = $_POST['time'];
	$products = $_POST['products'];
	$instructions = $_POST['instructions'];

//Error Message if connection with SQL fails
	if (mysqli_connect_errno()) {
		die("ERROR: Sorry, could not place your order" . mysqli_connect_error());
	}

//Preventing SQL Injection
	$sql = "INSERT INTO form (name, contact, email, date, time, products, instructions)
			VALUES (?, ?, ?, ?, ?, ?, ?)";

	$stmt = mysqli_stmt_init($conn);

	if ( ! mysqli_stmt_prepare($stmt, $sql)) {
		die(mysqli_error($conn));
	}

	mysqli_stmt_bind_param($stmt, "sisssss",
			       $name,
			       $contact,
			       $email,
			       $date,
			       $time,
			       $products,
			       $instructions);

//Executing Statement
	mysqli_stmt_execute($stmt);

//Form Submit successful message
	echo "Thankyou for placing your order with us. <a href=\"/small-business-bakery-revisited/index.php\"> Go back to homepage </a>";
    
?>

Adding JavaScript to the website:

The purpose of adding JavaScript to the website was to inform them if the bakery was open or closed and encourage them to visit the shop if it was open. Messages showed through JS on the website is mentioned below:

When shop is OPEN:

• Prompt: “Hey visitors, we’re currently open!”
• Button Text: “Visit Us”

When shop is CLOSED:

• Prompt: “Sorry, we’re currently closed. Check timings.”
• Button: “Check Timings”

UX Consideration for placement of prompt:

I added the prompt in the header so that it’s the first thing users see and made it visible. If users open the website during the closing hours of the shop, they are informed that the shop is closed. So as a solution, I added a ‘check timings‘ link in the header itself, by which they can directly check the timings of the bakery if they want to visit.

SEO Considerations:

To improve the SEO of website, I focused on the following aspects of the website:

• Keyword Research: Identified relevant keywords (like bakery etc.) that my target audience is searching for and incorporated them strategically in the website’s content, including titles, headers, and meta descriptions. Keeping page title as first part and site title/name as second part of <title>

• Adding <meta> tags: Adding meta description tags in the head of HTML pages to improve visibilty accross Google.

• Page Speed: Optimized the website’s page speed to ensure quick loading times by reducing image sizes as far as possible, which can improve user experience and search engine rankings.

• Internal Linking: Used internal linking between pages to create a hierarchical structure that makes it easy for search engines to crawl and understand the content on the website. For example, on my homepage, several links are included in each section to understand the content better.
• Social Media Integration: Integrated the website with social media platforms (in the footer) to increase visibility and engagement. Though this feature was already added before, I learned about its use now.
• Adding icon in head, so that the users can recognize bakery’s page if several websites or tabs are open.

Accessibility Considerations:

Adding small features for improving the accessibility of the website was a refreshing challenge for me. For making it easier for people with assistive technologies, I did the following:

• Added ‘skip to content’ option, so that they can directly access the content. The ‘skip to content’ link is hidden visually for people who are not using assistive technology.

• Mentioning ‘primary’ (navigation in the header) & ‘secondary’ (navigation in the footer) navigation to users through aria-label, for their better understanding of the website.

• Using ‘aria-hidden’ to hide irrelevant content for users using assistive technology.

• More descriptive ‘alt’ text. Images should have descriptive alternative text allows people who are visually impaired to understand the content of the image.

Changes as per David’s feedback:

Semantic Markup update:

Edited semantic markup in HTML. There were several HTML tags on my website that were used wrongly. I changed the following things:

• Changed <article> tag on the ‘homepage’ used for the hero section of the website to <div>. Because the heading & paragraph needed only a wrapper. Hence, the <div> tag made more sense. Also, there was no article linked or written in the paragragh.
• Changed <aside> tag used on several pages to <section> tag. Each <section> includes <h2> headings and makes more sense for the website’s content.

Same style navigation across all screen sizes:

Keeping the same background color for navigation across all screen sizes. Previously, I changed the background color of navigation from beige to grey in smaller screen sizes, as I thought the light background looked better. But this was hampering my style continuity across all screens. Hence, I kept the colour beige for all screen sizes.

Reducing height of hero-section:

Reducing the height of the hero section image and making the remaining content of the website more visible to the users. In my previous website, the hero-section was too deep, eventually making it difficult for users to visually access the content and scroll down a lot. Therefore, I reduced the height of my image.

I used a different image in my previous website. I updated the image to imply that the shop is a brick & mortar shop, and purposly defining the content of the website visually, i.e., not the cake or products, but the bakery shop itself.

Optimizing & reducing CSS:

To achieve reduced CSS, I declared custom properties in the ‘:root’ element of the stylesheet, which helped me in keeping my colour, branding, and font styles consistent on all the pages.

I checked where I have repeated my blocks of code and rules everywhere, and declared them globally. Also, this time I used the mobile first approach in media queries.

I was able to reduce the 2711 lines of CSS code to 1232 lines of CSS code.

---

Conclusion:

After completing my previous project, I thought that I have completed a lot of things. But a good website is one, in which constant changes are done. I didn’t think that including small things on a website can make so much difference in user experience.