Small Business Website Redesign Analysis
As I worked to recreate this website, I started from scratch in order to create something that was accessible and of higher content value than my small business website.
On my last small business website, while much of my site followed the direct code it lacked in design theme. I worked to create better use of the white space and include more content and photos to build greater content within my site. I built cohesiveness in layout, while including new Javascript and accessibility techniques to my design.
I used the same colour palette as before that consisted of three colors a black #000000, white #ffffff and yellow #d19b06. This colour palette passed the XXX
I updated my fonts on this redesign. While my fonts on my original site were clear and easy to read they were not quite as interesting so I added Quicksand to my body font to add just a bit more interest. I kept Rock 3D as my h1 and logo font as I found it visually stimulating and interesting for a one time use font. Both of these fonts pass the WCAG AA and AAA test.
Throughout my entire website I have aria labels attached to every image included. I made sure to add full enough descriptions without making them overly lengthy for the image presented. This not only increases accessibility for low-sited users, but boots SEO’s for my site.
My images differ between sizes throughout my site, but as the colour palette is so minimal and the font is san serif throughout the site, I thought that a differentiation in photo size could add to the uniqueness of the website. It shows the quirkiness of the cheese shop and adds interest to the eye, while still keeping the site clean.
I decided to keep my navigation header background white with a yellow stripe to differentiate it from the rest of the main body. My logo does sit below this stripe and centered on the page for greater visibility and interest. In my Media query I kept my header in the same format, and removed my use of toggle button. I believe that because there are such limited navigation options on the page, it make sense to quickly see them at the top rather than add a toggle.
For my footer, I updated multiple elements. The background is now a solid yellow #d19b06 with a black font on top. I also added 3 columns with different information for the user to either find information about when the shop is open, social media links, an email, or an address. I added some javascript within this portion that updates throughout the day showing live if the shop is currently open or closed. If it is currently closed it will say what time is opens next and if it is currently open it will say what time it closes next.
I ran my website through WAVE and most of the website came back completely clean except for three images alt text. Although this alt text was updated from the last site and was describing the only image on the page that they were included on. While the description could have been potentially shortened, I believe that the length of the description was ample and a shorter description would not have given a quality description to what was included in the photo. No contrast errors were shown when I ran it through this system.
Overall, I learned a lot in the creation of this website. I updated many forms for greater accessibility and content interest. I learned to use PHP within my site so that consistency is insured in the header and footer of my page. I also learned how to use Javascript in a new way.