Analysis Of The Original Site And Summary Of Improvements
While the original website met the requirements that were set out, there is still room for improvement in order to provide a better user experience. By implementing certain enhancements, the website could become even more effective and user-friendly, ultimately leading to greater user satisfaction
Logo
Compared to the initial design, the logo has been significantly increased in size, with the name ‘Richardson’ now much more visible. In addition, clicking on the logo now serves as an alternative way to navigate back to the home page, while still retaining the original home navigation link. This approach aligns with the trend of many web users who have become accustomed to using the logo as a quick and easy way to return to the homepage.
Mobile Navigation
The mobile navigation menu previously took up the entire screen when clicked, which was disproportionate to the limited content it contained. In response to user feedback, it has since been redesigned to occupy only 30% of the screen, allowing for a more balanced and intuitive user experience. This modification ensures that the navigation menu does not overwhelm the main page, and instead functions as a helpful tool for accessing additional content.
Button
To improve the user experience of our website, we have added a new “Visit Us” button on the banner of our website, right after the business name. This button is designed to take the user directly to the footer of the page, where they can find the address, phone number, and email of the business. By adding this button, we aim to make it easier for users to find important information about the business without having to scroll through the entire page. This feature is especially helpful for users who are looking for quick access to the contact details and those who are interested in visiting the physical store or getting in touch for further information.
PHP (server-side includes)
As discussed during the PHP session, learning PHP includes is valuable even if you don’t have the capacity to learn all of PHP. One of the benefits of using PHP includes is that it simplifies the process of modifying repetitive elements like headers, footers, and navigation across multiple pages. By leveraging this approach, we were able to convert the site from its original HTML format to PHP, which greatly streamlined the maintenance process and improved the overall efficiency of the site
JavaScript
Although Javascript can add interactivity to a website, it’s important to follow best practices so that the website doesn’t suffer if the feature is turned off or unavailable. As an addition to a good user experience, the new website has implemented a greeting message at the bottom of the header that informs visitors about the business’s operating hours. This message is displayed with supporting background colors, with green indicating that the business is currently open and ready for visitors, while red signifies that the business is currently closed. By providing this clear and concise information, users can quickly determine if they can visit the business or need to return at a later time.
SEO
As discussed in the SEO session, the new website has been optimized to capture relevant keywords for the bakery industry. The meta tags and title tag prominently feature the term ‘bakery’, which helps search engines identify the website as a source for freshly baked products. Additionally, the first paragraphs of the website also include the word ‘bakery’ to further reinforce the site’s focus on baked goods for home consumption or events. By implementing these strategic keyword placements, the website is better positioned to rank higher in relevant search results and attract more traffic from interested visitors
Semantics
In the redesign of the website, greater attention was given to ensuring that the semantics were used in the appropriate context. Initially, the ‘article’ tag was used only for the name and banner image, which appeared to serve the purpose on the surface, but was not accurate or semantically correct on the interior pages. As part of the update, the use of the ‘article’ tag was reviewed and corrected to ensure that it was applied only to pages containing articles or blog posts. This approach helps to improve the overall structure and accessibility of the site, making it easier for users and search engines to understand the content and its hierarchy.
Images
An intermediate two column layout for the products page was included between the 1 column available on a mobile phone view and a 4 column on a wider screen.
Accesibility statement
During the development of the website, a strong emphasis was placed on ensuring that it was accessible in all areas, including semantics, technology, ratings, and references to external accessibility testing resources. To that end, the site was thoroughly tested and validated against industry standards, with the results made publicly available for review. In recognition of the dynamic nature of accessibility considerations, the website is open to feedback and continually works to ensure that it remains accessible to all users. By prioritizing accessibility, the website can effectively serve its intended audience and provide an inclusive user experience for all visitors.
Error 404 Page
The website features a unique 404 error page designed to provide users with a helpful and reassuring experience when they encounter an error during their search. The page features a soothing butter-colored background to minimize any frustration or confusion, and includes navigation links that take users back to the main bakery website menu. The inclusion of the bakery logo on the page further reinforces the user’s connection to the brand and assures them that they are not completely lost. By providing a clear and user-friendly 404 error page, the website effectively addresses user errors and helps to ensure a positive user experience.