Small Business Website: Revisited
Updated Analysis
Summary
Introduction:
This article will talk about all of the the updates and improvements I have made to the revisited version of the small business website project. Topics discussed will be about improvements made to the color contrast, logo, use of JavaScript, use of FlexBox, PHP, and leaner code. While looking back at the original version of the small business project, it had obvious structural and usability issues that I was unaware of at the time. Accessibility was at the forefront of my mind while redesigning and restructuring the site this time around, which allowed for a better user experience and nicer looking site as a whole.
Feedback:
After receiving feedback on the first version of the small business website, it was clear that my code needed to be leaner. This caused me to be more strategic with my use of inherited elements in CSS in the revisited version. Additionally, the CSS was also too long due to an incorrect understanding of media queries. At the time I believed that an entire section needed to in a media query, causing unnecessary repetition and cluttering of my code.
Changes & Enhancements
Solved Issues
The first issue that needed to be solved was creating leaner code. I first way I achieved this was with the use of inherited fonts in my CSS. I did this my adding a font family to the body rule and headings rule, as suggested on my feedback sheet. The second way I was able to fix this issue was by removing the repetitive code from each media query. Taking out the elements that were there unnecessarily quite literally slimmed down my code by more than half. In my HTML, I also updated the ARIA label by removing the word “navigation”, as you mentioned it was redundant due to it being implicit in the nav element type.
Another major issue that needed to be solved was the responsiveness of the grid structure used for my product items. On the original version, the images would become distorted and start to move out of their borders when the screen became smaller. There was even a moment where the items would touch together before forming a single line structure. To fix the problem I decided to redo my code for the entire site, as the items seemed to be bound in some way by another declaration in my code. Starting from scratch allowed me to take a different approach by using FlexBox instead of grid. The use of FlexBox made styling the products much easier and the elements now move to fit the screen automatically, going from a single line when in mobile-first view, to a 2×1 design when on a medium screen, and finally to 3 across when on a larger screen. This was my greatest challenge during the first iteration of the site, and creating a solution for the revisited version, though simple, was my biggest achievement.
Enhancements
Color Contrast
All of the enhancements added to the revisited version of my website were done for accessibility purposes. The first notable change that I made was the color scheme for an improved contrast ratio. Although I liked the colors used in the first version, I noticed that they were a bit dull. After checking them on WebAim I realized that they did not pass and had a failing WCAG score. The updated versions of my background colors are darker, causing the white text to stand out and be more readable, allowing for an an easier user experience. It now passes the color contrast AAA rating on WCAG with a score of 10:87:1. In addition, I also changed the text colors of my logo to white so that it would be more readable against a darker background. I also removed the little brown dots on the stem design of the leaves on the logo as they did not look good with the new background color.
JavaScript, Favicon, & PHP
I added the minimal use of vanilla JavaScript to the revisited version of the site. As shown above in the updated header color contrast image, there is a section that says “Welcome, we are open!”. I have set this to change to “Sorry, we are closed!” depending on the time of day. If the user has JavaScript turned off this will not affect the content, and they will instead see a statement saying “Welcome! Please see shop hours below”.
I created a favicon using the “R” with the same typeface as my headings. I originally had wanted to use my logo for the icon, but it did not show up well and had to take an alternative route. I gained inspiration by seeing other people use the first letter of the shop name instead, so that is the direction I went with. I am happy with the outcome as it is clear to read and refers back to the styling of the site itself.
For the first time I implemented the use of PHP instead of HTML for the final version of the website. I had originally coded and styled the site using HTML so I could make changes without needing to make the website live, and then switched to PHP once those changes were done. I then took my header and footer elements, changed them into server-side includes, then added them back into my page files. I chose to make those elements includes because they are the only two sections that stay the same throughout the entire site. Using PHP, in my opinion, is a great resource for saving time. Any changes I had to make to my header and footer only needed to be done once, which was very useful.
404 Error Page
The most significant enhancement to my revisited website is the addition of a 404 error page. Other than restructuring my product elements in FlexBox, this was the biggest learning curve I had for this version of the site. I struggled for a while with where to place the 404.html in my files, but when I finally got it to connect to the site I was very pleased with how it turned out.
Accessibility
Accessibility was on the forefront of my mind during this iteration of the small business website, and a major factor that played into my design and structural choices. As mentioned earlier in the blog post, I changed my color scheme to pass the WebAIM AAA color contrast ratio. I also used Siteimprove to check the accessibility score of my site and make any changes that were necessary to gain a higher score. My site now has a score of 98/100. I also changed my ARIA labels where necessary, used alt tags on all of my images, and used meta tags in the head of my pages for descriptions and keywords. In addition, on my home page I added call-to-action buttons so help the user navigate the site more easily, and to make it seem more like a real store. All of these elements help make navigating and viewing my website more accessible and enjoyable for the user.
References
WebAIM Color Contrast Checker
https://webaim.org/resources/contrastchecker/
SiteImprove