Analysis & Summary of Improvement
Analysis of Original Site
Feedback:
After receiving the feedback from the SBW project, the main areas in need of improvement that were highlighted to me were to mark up the business address with something other than a definition list, as it didn’t entirely make sense within the context for that to be used – unlike with the opening hours when in that context it does make sense to be used.
Another issue was that I had put a class on the footer of every page, and looking back now that was for reasons I can’t comprehend, other than forgetfulness! Some further suggestions were to experiment with using Clamp for scaling typography, tweaking the margin on some of the cards, and to be more creative with my visual design.
Further Issues:
Upon looking over my code and the website when starting to implement the tips I had received from the feedback, I noticed a few other areas of improvement that would give me the opportunity to clean up unnecessary code. I had classes called ‘opening-times’ and ‘address’ on both divs within the footer element that wraps the ‘opening hours’ and ‘find us’ information.
There was also a class called ‘footer-info’ underneath the footer which contains my coursework link, copyright and fictitious website statement. Something else I spotted was that for some reason on the contact page I had placed an id named ‘contact’ on main instead of on the body element like I did with the rest of the pages.
Summary of Improvements
Solved Issues:
To solve the issue of having a needless class on the footer, I was able to just delete the class and in the styles.css file, change anything that was ‘.container-contact’ to just select ‘footer’. I changed ‘.opening-times’ to ‘footer>div’ and in all the HTML files I deleted the class off footer, this allowed the advanced selectors to target the correct area without needing extra code. Similarly with the classes attached to the divs wrapping the footer ‘opening-hours’ and also the div underneath the footer, I was able to delete the classes and use either ‘footer>div’ or ‘footer~div’ to target the divs around the description list and the final div. I was also able to update the markup for address, these had previously used the definition list and have now been changed to an unordered list.
More margin has been added to the product cards, and I have implemented the use of clamp for scaling typography instead of using min/max as before. For the final issue to solve I just moved the id class from main to body and within the css file, as the id was only targeting one element, I made sure this was selected correctly via ‘#contact>main>p>:first-of-type’.
Additional Improvements:
I added some vanilla JavaScript to my website for some subtle finishing touches such as the scroll to top function button that I added to the footer, the h1 greeting ‘good morning/afternoon/evening’ depending on the time of day, and the ‘we are open/closed’ in the header. I implemented the use of custom properties, declaring them within the root of the document and focusing only on colour to keep it simple and organised. I created a favicon icon using the same typeface as used in the headings, and added this to the head section of the document so it would show up in the tab. I decided not to use my logo as the favicon icon because there is too much detail in it and I knew it would be too small to recognise, however I thought the ‘r’ worked well as its using the same typeface as the headings which would be easily recognisable, and also contrasts nicely with the background that reflects the colour scheme of the website.
As per the suggestion in the brief I added an accessibility statement page that can be navigated to via the additional footer menu that I decided to include. I have created a call to action link on my home page, and have used PHP server includes for the sections that stay the same on each page – the header, navigation and footer. Finally I created a custom 404 page to give the site more of a personal and quirky feel.
Something else that I spotted was that on mobile view for my original submission in the Design for Web Content module, was that the ‘Wednesday’ was getting squished too close to the opening times in the footer section. As well as this the final paragraph was also breaking onto the next line once it reached the width of 360 x 760. To fix this I changed the size of the text for the paragraph to be ever so slightly smaller, and for the issue of no gap after ‘Wednesday’, due to this being the longest word, I added a padding-left of 2em onto the span which wraps the times.
Other Comments
I decided not to add a mobile burger menu to this website because it didn’t fit the layout and I think it would’ve slightly taken away from the design too. With the full page navigation bar being underneath the header block, once the viewport changes to smaller screen sizes it would mean the burger menu would then have to remain in the same place (rather than being placed in the top left or right corner). I tried this out and didn’t like how it looked as it felt like it was floating mid air. I also tried swapping the heading order and placing the navigation above the logo, however this didn’t look right either.
As a final touch, to make the design more consistent throughout the website I have continues with the use of the dotted border around the card items and also used the same design for the highlighting of the opening hours in the footer. I think this makes the website appear more reliable and trustworthy as users can see it has the same branding throughout.