- One of the most significant and by all accounts frustrating bugs that I encountered during the development of the page was the mobile navigation. When the mobile navigation was opened upon clicking the hamburger menu, the content would be pushed down and the mobile navigation would be layered improperly. The bug was very persistent, but I finally found that changing my page content positioning to absolute, positioning the element back in the same place and adding relevant z-index’s to both the navigation menu element and the content solved the problem.
- The problem was so persistent that I only managed to add a fix on all of pages right before finalising my testing.md file. The issue persisted on the menu page and whilst it didn’t affect the content too badly, it was ruining the polish of the site. I finally fixed it by adding an absolute position to the menu element inside the mobile and tablet media queries and then repositioning it to drop down on the right-hand side of the screen.
- Towards the end of the development process, I started to validate my HTML & CSS so that I could see how much I would need to change, and factor this in before finalising my code. Below are some of the validator errors I encountered. (I fixed prior to detailing my testing process but can be seen in my commit history):
- Spans - When I began to make the site respond, I used span elements as my page overlays in an attempt to make them responsive and allow the content to control the element's height. This in turn caused an error to show up in the validator. To fix the issue, I simply applied the stylings to the section containing the span and removed the span element. The pages work in the same way and the error in the validator is no longer present.
- Iframe - I encountered an error doing something in line with the course content as the HTML validator stated that I wasn’t allowed to insert text in any context between the iframe opening and closing tag. To get around this and display something for browsers where iframes are not supported, I consulted tutor support. They advised me to write some more text inside the section and use positioning and z-index to hide the text behind the element on all viewport sizes. I copied the text outside of the iframe element and added some specific styling to tag to position it behind the iframe, changing the positioning in the relevant media queries to ensure that it wasn't hanging out of the border. The text is in the correct position as when the page loads, you can see it briefly as the iframe loads in. I encountered a few iframe validation issues on account of the inline stylings applied to the element, as the element was already styled by CSS, removing them did not cause any issues and fixed the obselete styling error in the browser.
Other than the issues presented above, the only other errors I had were due to stray empty attributes and closing tags. I resolved these errors by removing the stray tags.
I was very pleased with the level of responsivness and compatability overall; however there were a few bugs that I came across during the testing process. Below I will summarise the issues I found and what I did to fix them:
- Xframe Policy Issue - Once of the most alarming bugs that I found was that my iframe was not loading in on Firefox due to an X frame policy issue. This policy is in place to ensure that sites that have not provided permission for to be pulled into another via an iframe element aren't used against the owners will. I researched the issue and was intitally worried that I wouldn't be able to find a fix. I then read on Stack Overflow that if you don't use a src attribute that provide the site has provided permission, it won't work. When I originally created the iframe, I used a generator and simply copied the Google Maps url into it. I went back to Google Maps and used the embed option which gave me a new iframe element. I put it into the code and commented out the old one for the time being. Foruntaley, as I was using the specific embed link from Google, the element now worked and the stylings were applied correctly. I have tested this across all viewport sizes and it responds and works correctly.
- Other Drink Menu Heading & Cards - When I validated my HTML, I received a warning that one of my menu sections lacked semantic context as it was missing a heading. I thought about the user and the accessibility consequences and decided to add a header in. Upon doing that, I didn't realise that it pushed my content down whilst in desktop view. I had to amend the container size and the size of the other drink menu cards to account for the space being taken up by the header. They now display as they did prior to the heading being added.
- datetime-local input - There is a very small compatability issue with the site. The datetime-local input is not compatible with some browsers. There is wider support across browsers for it and I am not paticularly worried about it from a user perspective as in every browser that doesn't support the input type downgrades the input to a text field so it does not prevent the user from actually submitting the form. On the most popular browsers like Google Chrome, Safari, MS Edge and Samsung Internet, the time and date picker is supported.
- Phone Number - I found that Safari for iOS was recognising the phone number inside the footer as a link and changing the colour to blue. Whilst it's a great function to have in terms of user experience, the colour change was an accessibility problem due to the colour of the footer. I researched the issue online and found that you could get the element to inherit the colour but keep the click to dial functionality. I referenced the source of the code in my code and accreditted the author in the README.
- Beer Card Vertical Alignment Issue: Safari (Macbook Pro) - I encountered an issue with the beer card class inside Safari when I tested the site on my Macbook Pro. The issue wasn't present in other browsers on this device, just Safari. As a fix, I added the vertical-align: top; to the class. I reviewed this change in other devices and it had no effect but resolved the unpleasing alignment of the beer card images.
- Submit & Reset Buttons Touching Bottom of Form Container: Firefox (Macbook Pro) - I encountered an issue in Firefox when testing the site on my Macbook Pro. The form submission and reset buttons were touching the bottom of the container. I experimented with a few fixes but nothing inside the firefox dev tools was working. I decided to reduce the margin top of the form by 0.5rem to lift the buttons off the bottom of the container. Whilst the change has been applied across browsers, it is very unnoticeable but the buttons now have some space at the bottom whilst in Firefox on the Macbook Pro.
Below I will detail the known issues that I was unable to fix in this release:
- White Line at Bottom of Footer: Safari for iOS (iPhone 6 Plus) - In landscape mode on the iPhone, there is a chunky white line that appears to take up some of the footer space. It partially eats into the social icons. I increased the size of the footer which resolved the issue when viewing the same error in dev tools but it doesn't seem to work inside the older version of Safari on the iPhone. It doesn't appear on other devices or inside Safari on iPad. I think this is a compataibility issue. RESOLVED PRIOR TO SUBMISSION - Footer height was causing the issue, footer height property commented out and devices tested again within expected result. White content no longer shows at the bottom of footer. Permanent change made by removing height property and value from all footer stylings across all device sizes. CSS revalidated and no errors found.
For ease of reference, I will display the user stories and an explanation of how these stories have been fulfilled below:
- To discover the brand and venue through exciting and adaptive design, ensuring scalability through viewport sizes and on different browsers with no degradation of content.
- Later in this document you will encounter a full set of cross device and browser manual testing checklists to show that the design and layout is adaptive, and no content degrades across viewport sizes.
- Further down the document, you will find a set of user feedback I collated based on these user stories tested by various colleagues from my workplace on their devices and on different browsers.
- We read from right to left and top to bottom, so at the top left of the page, the businesses logo is displayed immediately introducing the user to the brand.
- To navigate through the site with ease.
- As soon as the user arrives on the website, the first thing at the top is the navigation bar with contrasting navigation links. I used a technique I admired from the love running project by adding a “link-active” class to the active link on each page to provide visual indication to the user as to what page they were viewing currently. Further visual feedback is provided to the user with the use of a pseudo class on the navigation links so that when the user hovers over the link or presses it on a mobile device, a border appears underneath and the text colour changes to orange.
- The navigation bar is consistent across all pages regardless of the device ensuring a consistent visual user journey and ease of learning.
- To discover the locally brewed craft beer and drinks menu offered by the business.
- On the “Our Menu” page, by order of precedence, the first thing the user sees when they scroll to explore the content is an explanation of what the user is seeing and then brightly coloured beer labels. The order of the content is important here as it forces the user to view the business' own craft beer before they can view what else the business has to offer.
- Be able to book a table to guarantee themselves a place to sit when they visit.
- Inside the navigation menu, the “Grab a table” link is offset with wider margins and emphasised with alternative/ reversed colour styling. Clicking the grab a table button takes the user to the form.html page where they can use a HTML form to book a table for their visit.
- To access key business information such as map location, address, opening times and contact information.
- The business-critical information to the user is displayed in the footer which is the norm in terms of information layout and is what is expected by users. This is confirmed in my user testing.
In addition to the above, I completed some limited user testing where I provided the site to a sample of my work colleagues and asked them to answer some feedback questions. You can see the answers by navigating to the spreadsheet attached here. (Please note: you will need to download the excel file to access)
To test the site, I employed a manual testing checklist in excel where I tested the site page by page, element by element. Please click here to access the spreadsheet checklists for full details of all manual functionality and compatibility testing completed across a range of devices (Please note, you will need to download the excel file to access it). To summarise the manual testing, the website has been tested by myself in both portrait and landscape mode (where appliable) on the following devices, browsers & operating systems:
- Google Pixel 3 – Google Chrome, MS Edge, Firefox – Android 11
- Motorola Moto G7 – Google Chrome, MS Edge, Firefox – Android 10
- iPhone 6 Plus – Safari 12 – iOS 12.2.5
- iPad 6th Gen - Safari 14, Google Chrome, Firefox Daylight, MS Edge - iOS 14.4
- HP Elitebook – Google Chrome, Firefox, MS Edge & Internet Explorer – Windows 10
- Macbook Pro 13” – Google Chrome, Safari – Mac OSX Mojave
- Dell Vostro Laptop – Google Chrome, MS Edge, Firefox – Windows 10
- AOC Desktop Monitor – Google Chrome, Firefox, MS Edge, Internet Explorer – Windows 10.
The site has also been tested inside Google Chrome dev tools and is fully responsive to all device sizes. In conclusion, the website whilst not written in a responsive framework the site is: - Cross compatible across device sizes as demonstrated through manual testing and in dev tools.
- Cross compatible across a large proportion of popular browsers as demonstrated through manual testing.
- Cross compatible across operating systems as demonstrated by manual testing.
To test the performance of the website, I used Google Lighthouse inside Chrome Dev Tools. Below I will outline each pages performance with screenshots of the lighthouse reports:
All of the HTML and CSS code was validated in the w3c HTML and CSS validators via direct input. All code passed with no errors but some warnings due to vendor prefixes.