Assurance Uwangue
Small Business website Revisited
My aim for revising the small business website project was to find a way to improve the design I already created. For the first submission I already made my initial layout responsiveness, but there was still some odd spacing on some pages. I was happy with how it looked across different screens, so in terms of layout, my aim was to improve the pages visually to provide a more balanced and accessible layout.
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 implemented changes
link to the SBW revisited.
I had already consolidated on my branding form my first solution. Link to my design file is found here. I decided to work on some open graph images to improve SEO.
After studying the lessons on content strategy, I realized the importance of enhancing the content on both the homepage and the menu page of our website. Consequently, I decided to update the menu page to showcase the complete range of available dishes, ensuring our customers have a comprehensive view of our culinary offerings. Additionally, I revised the homepage to feature highlighted dishes more prominently. This strategic improvement not only aims to attract more visitors but also enhances their browsing experience by providing clear and enticing information about our menu. By doing so, we hope to engage our audience more effectively and encourage them to explore our diverse culinary options.
To enhance the user experience, I designed a custom error page and linked it to the site using the .htaccess file. I now have a dedicated 404 error page that is styled according to my coursework, as well as another distinct error page tailored for the small business website project.
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.
Based on the insights and feedback collected from prior learning sessions, I made the decision to thoroughly clean up my code to ensure that all my web pages are properly validated and fully responsive. This process involved a comprehensive review and adjustment of the code to adhere to best practices and standards.
Specifically, I focused on optimizing the use of image elements by incorporating images of various sizes and appropriately adding the right image attribute description. This approach enabled the web pages to dynamically select and display the most suitable image depending on the width of the user’s device. Consequently, the web pages now deliver an enhanced user experience across a wide range of devices, from smartphones to desktop monitors.
While enhancing the user experience, I aimed to make the new version of my website more accessible for visitors using different user agents and assistive technologies. A key focus was maintaining semantic HTML, which is essential for ensuring accessibility on any website. To achieve this, I added the aria-current=”page” attribute to the active navigation element. This addition helps ensure that both the markup and design convey the same information, whether or not assistive technologies are being used.
In the revised version of the website, I incorporated a variety of SEO tools and techniques that were covered during the SEO module. This effort was aimed at significantly improving the website’s search engine optimization and overall visibility.
One of the most critical issues I addressed was the absence of H1 tags on several pages. I added H1 tags where they were missing and ensured that all H1 tags across the website were meaningful and relevant in terms of SEO. Additionally, I implemented unique meta tags and descriptions for each individual page, further enhancing their SEO value.
To streamline the process and maintain consistency, I placed the header into an inc.php file, which allowed for easier management and updates. Moreover, I made certain that every page included specific elements such as page titles, page descriptions, and Open Graph images. These additions are crucial for improving the website’s overall SEO performance and ensuring that it is well-received by both search engines and social media platforms.
I included essential information for bots that visit the website for indexing purposes by adding a robots.txt file with a link to the XML sitemap specifically designed for them. The sitemap.xml was then submitted to Google Search Console to ensure proper indexing. Additionally, I excluded certain folders, such as the error page, from being indexed to streamline the indexing process and improve overall site organization.
I also conducted a color and size accessibility check. The results were positive, with one recommendation to either enlarge a particular paragraph or improve its color contrast. However, since the current font size was deemed acceptable, I opted not to make any changes.
After performing an SEO check on https://seositecheckup.com/, the website received a score of 76 out of 100.
In this project, I decided to implement PHP includes to make the website modular, which significantly simplifies maintenance. By placing the head, header, navigation, footer, and social media sections into separate include files, I ensured that any changes needed could be made in one location and would reflect across the entire website. Additionally, I integrated some PHP into the navigation by using a set of if-else statements to add relevant classes and aria labels to the current pages. This approach improved both the functionality and accessibility of the site.
This project provided an excellent learning experience, allowing me to apply new themes and concepts presented in the lectures. Throughout the process, I identified several new topics to explore and added them to my to-do list for further study. I thoroughly enjoyed diving into the technical aspects and technologies related to SEO and accessibility tools. The hands-on experience with these tools and techniques has been invaluable, enhancing both my knowledge and skills.
App for Accessibility Check for Color Contrast According to WCAG Levels:
TPGi Color Contrast Checker
To Create the XML Sitemap:
XML Sitemaps Generator
To Validate HTML and CSS Before Moving to the PHP Modular Approach:
W3C Validator
CSS Validator:
Jigsaw CSS Validator
To Check Element Support:
Can I Use
MDN Web Docs:
Always a useful and very helpful resource.
MDN Web Docs
SEO Checkup:
SEO Site Checkup
By leveraging these tools and resources, I was able to ensure that the website adhered to best practices for accessibility, validation, and SEO. This comprehensive approach not only improved the quality of the project but also provided me with deeper insights into web development and optimization techniques.