Original Site Analysis
For the original Cornmarket Delicatessen site, I feel it had a clean and inviting design and fresh use of colours however more could have been done to ensure correct colour contrast. This is particularly noticeable in the footer with the white copy against the peach background and colour contrast is something I have worked to improve this time round.
The header section had a lot of unused space because the menu was sat below it which looked clean but perhaps could have been used in more effective way. Adding to this, I think more could have been done to improve the idea that Cornmarket Delicatessen is a real store. Although I had a couple of images of inside the store already (the refillable jars and the customer demonstrating how to use them) it might have been a better idea to have a bigger, clearer example of this.
Something I knew needed adjusting this time round was the clickable area of my menu links as previously only the word itself was clickable. More could have been done to highlight when hovering over elements as well as changing colour for visited links. I have worked to improve these aspects in this revisitation.
Aside from the physical presentation of the site, I needed to add more comments to my HTML and CSS so that they are more easily understandable by others but also by myself – especially when creating more difficult elements or adapting code from others, in the case of my hamburger menu.
Cornmarket Delicatessen 2.0
Colour Contrast
One of the first things to change was the colour contrast as this was something I knew needed to be different straight away – particularly the footer as I previously mentioned. Swapping from the pink/peach shade to a brighter orange gave the site more contrast and by using the dark green against it bought the WebAIM colour contrast score from 1.73 (fail) to 4.58 (AA pass) and even 6.69 for visited links with the use of dark purple (tying into the purple in the logo). I also adjusted the green slightly to make it darker from the original which also improved the score, especially for the menu which gets a 10.05 (AAA) for visited links that turn white.
Menu Navigation, Hamburger Menu and Logo
The menu was one of the biggest changes I made to the site by moving it to the top right hand side of the screen if felt more cohesive with the logo on the left. This menu is fully responsive and when the screen size is 830px or below it turns into the hamburger style menu. This was quite the learning curve for me and took many different attempts with various ways to go about it, but I eventually found one that worked for me and the design I was going for. I added the word “menu” next to the hamburger icon to ensure that all users would understand the use of the icon. According to James Foster via the UXplanet.org website (linked below), he said that by labelling the hamburger icon it makes for easier accessibility and understanding – and can even get up to 20% more clicks than icons without a label.
The placement of the menu was also important as I feel the right hand side of a mobile (if you’re right handed at least) is far easier to reach without being too uncomfortable.
I created an updated logo which is hopefully easier to read when small due to the fact that it doesn’t have the whole name included anymore rather just the first letters of each word, C and D. This motif has also been used as a favicon rather than a generic image that had been used previously.
Store image, JavaScript and PHP
Following on from the navigation, is the first part of the homepage and one of the trickiest things for me to accomplish. Having a full image of the store felt a bit too much, but having a translucent box over the top in the brand shade of green with the store name, opening times, etc felt like a good compromise. Getting the box to stay on top of the image whilst being responsive was definitely a learning curve but I think it gives the effect I was hoping for.
This brings me onto my use of JavaScript! This was my first experience of using it within a project, but I think works well for the purpose I needed it for. It is purely for an enhanced experience so if JavaScript is turned off users won’t miss out on any of the content. Along with improving my comments in my HTML and CSS I also added in comments within my JS file so that I understand which bit does what for future reference.
The use of PHP includes were also a new element for me but they were much smoother to use than I’d imagined and were helpful for making quick changes. I used one for my header which encompassed my navigation and then another one for my footer as these were the only two parts that were the same on every page.
A couple of other small changes were the swap from grid to flexbox for the products on my products page. This just allowed for a bit more flexibility when increasing/decreasing screen sizes. The other change was adjusting some of my copy to include the business name and other keywords more frequently for more optimized SEO results. The meta description tag was also used this time round which hadn’t been done in the original site.
404 Page
A major inclusion for the revisited site was the introduction of a 404 page which I previously haven’t used. This was also a learning curve however I am pleased with the final outcome of the page as I feel it fits the brand and the rest of the site well and wouldn’t be confusing to users if they came across it.
Footer
As per comments about my original site, more could have been made of the footer and I hope I have made suitable changes to rectify this point. By keeping the business name, address and contact number but having them flex to the size of the screen it kept them neatly on one row rather than having them stacked straight away, this gave a more streamline look. I also added in a link to my page about the accessibility features my site has as well as adding a sitemap for users convenience. It also gives the site a bit more credibility and the impression that it’s a real site for a real business.
Accessibility
The accessibility features on my site were a big consideration and many of them have already been mentioned. I used the website checker feature on Site Improve to gauge where my site is for various aspects such as SEO, accessibility and performance which was really helpful to understand so that I could make changes accordingly. Adjusting the colours to get an average of 7.58 an AAA standard, increasing clickable element size, using the hamburger icon with written description and adding a sitemap all increase the accessible nature of the site. By using titles, correct heading levels, ARIA-labels where required, alt tags on images and having valid code these all add to ensuring the usability of the site for everyone.
References:
Responsive Hamburger Menu
https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/#css-only-responsive-mobile-menu
WebAIM Colour Contract Checker
https://webaim.org/resources/contrastchecker/
Site Improve