Testing has been an on-going process during the coding stage of the project with further tests conducted toward the end on user stories, accessibility and performance as well as html & css validation.
-
Issue: Part of the content was hidden under the fixed navigation bar.
Solution: The solution was to create fixed invisible anchors positioned above the start of each section, as per suggestion of Caktus Group blog post. Invisible anchors were first committed here with top finally adjusted here, as shown below.
-
Issue: When navigating to a section of the website, the link in the navigation didn’t show as active.
Solution: After browsing bootstrap library, the solution was to implement bootstrap scrollspy as shown in this commit. The offset of the scrollspy needed to be adjusted so that the links are activated at the start of each section rather than the position of the invisible anchors, as shown here and on the screenshot below.
-
Issue: Once collapsed, the menu did not collapse back when clicking on menu items.
Solution: This was the most challenging issue during development. The solution was to insert data-toggle="collapse" and data-target=".navbar-collapse.show" in navigation items as suggested in this stack overflow post and as implemented in this commit. Please see below a screenshot sample of the code.
-
Issue: Navigation menu needed to expand at a different breakpoint than those offered as part of the bootstrap library.
Solution: Using Google Inspect, I was able to create a media queries for desired breakpoint and recreate the different elements required for navbar-expand to work, as shown in this commit.
-
Issue: Using Google inspect, I did not seem able to target the element to style the toggle button.
Solution: The solution was to replace the bootstrap default toggle button by a Font Awsome icon as suggested by this stack overflow post. The Font Awesome icon was first added within the span containing the toggler button as shown in this commit. The span containing the toggler was removed and the toggle-btn navbar-toggler-icon styles moved to the element containing the icon, as shown in this commit.
HTML screenshot
CSS screenshot
-
Issue: As the website was designed for mobile first, spacing on larger screens was an issue and the different sections of the website needed to occupy more space for better balance.
Solution: After some research, responsive paddings were applied at different breakpoints using the clamp function as suggested in this stack overflow post and as shown in this commit. During the testing of the user stories, responsive paddings were then changed to a different css function, as shown in this commit.
Responsive paddings - clamp function
Responsive paddings - max(val-min, min(val-preferred, val-max))
-
Issue: The background image in the "about me" section and the embedded map did not display properly on small screens when occupying the full width.
Solution: The solution was in the case of the background image to apply a vmin function to keep the size balanced with the container above, as shown in this commit. For the frame, a minimum height was applied as displayed in this commit, so the content of the map displayed properly.
About me background image
Embedded map
Hero image should cover the full height of the viewport - excluding top and bottom menus - across different devices and screen sizes, whilst in balance and the jumbotron text being displayed responsively in the best light.
-
Issue: Mobile viewports include top and bottom menus and hero image covers more than the height of the device.
Solution: Maximum height for the hero image set to -webkit-fill-available so that it doesn’t fill more than the viewport height on mobile, as suggested in this stack overflow post and as shown in this commit.
-
Issue: -webkit-fill-available worked on safari and iphones, but not on devices such as Samsung s10 for example.
Solution: Height was also set at 95vh so that the image doesn't overflow as shown in this commit
-
Issue: Fixing height at 95vh was causing a gap on small window sizes on desktop,
Solution: Adjust media queries in small screens so that hero background image height is set at 100 vh from small screen onward, as shown in this commit.
Note: the gap is still present on desktop when window size is below 576px, but browsing on such a small window on a desktop is not a likely occurrence.
-
Issue: lack of balance on extra large screens
Solution: A final media query was set for extra large screens where the max-height of the hero background is set at 850px to keep the overall website in balance, as shown in this commit.
Issues with navigation bar not being positioned in line with body were resolved here. A sample screenshot is shown below: Body set at max width of 2000px
Navigation
-
Issue: Jumbotron text needed to be responsive according to the screen size to keep in balance and for better visual impact.
Solution:
- On portrait viewport (default): text aligned centrally at the bottom of the background image.
- On landscape viewports (and viewport with a ratio less than 5:4): text is vertically aligned on the left of the hero image. Jumbotron container’s width is set with responsive values so that IT doesn't grow over a certain part of the hero image, as shown in this commit.
-
Issue: The font in the jumbotron container also needed to be fully responsive to all screen size configuration for maximal visual impact.
Solution: The solution was to “clamp” the font size between a minimum and maximum value, as suggested in this post from css-trick and as shown in this commit. During the testing of the user stories, this was then changed to a different css function - max(val-min, min(val-preferred, val-max)) - as shown in this commit.
Responsive font - clamp
Responsive font - max(val-min, min(val-preferred, val-max))
-
Issue: Setting -webkit-fill-available for mobile made the jumbotron text not fully visible on landscape mobile devices.
Solution: To remedy this issue (although browsing a website on landscape mobile may not be a frequent occurrence), a media query was set so that the promotional text is hidden and bottom padding reduced, as shown in this commit, to allow text to breathe and be displayed properly.
-
The testing of User Stories is set on the user’s journey across the website and covers interactive elements, as well as the responsiveness of the website across different platforms and browsers.
User stories were tested manually on the following devices and browsers, in addition of Googe inspect and responsive viewer add-on:
- Devices: Iphone XR, Samsung S10, Ipad, MacBook Pro and iMac
- Browsers: Safari, firefox and Chrome
-
As a first time visitor, I want a responsive website so that I can view the website across different devices.
-
T01 - Acceptance criteria
-
When I visit the website using my device, all content is visible and visual elements are displayed proportionally,
Issues:
- Responsive paddings were not displayed on tablets
- Buttons on ipad text wrapping on 2 lines
- Phone number links automatically activated on iphones and ipad
- Hero image appeared quite slow to upload
Fix
- Responsive paddings (view commit) were adjusted using a different css function.
- Add white-space: nowrap on button as suggested by this stackoverflow post and as shown in this commit.
- A meta data was added in the header to remove automatic links of phone numbers as suggested by this blog post and as shown in this commit.
- Hero image's size was compressed to optimise performance.
T01 Result after fixes: PASS
-
-
T02 - Acceptance criteria
- When I use a small screen or,
- When I resize my screen and the menu becomes too large, the navigation bar collapses and,
- When the navigation is collapsed, a toggler button is displayed to right of the header, and
- When I click on the toggler button, a vertical menu is displayed,
- When I click again on the toggler button, the vertical menu collapses back.
- When the vertical menu is displayed and I click on any items, the page scrolls to the relevant section and the menu will collapse back.
T02 Result: PASS
Homepage screenshot
-
-
As a first time visitor, I want to be able to easily navigate across the website so that I can quickly find information.
-
T03 - Acceptance criteria
- When I scroll to any section of the website, the navigation remains fixed on top of the page and my position on the page is made clear by the relevant link changing appearance (white bold) in the navigation bar.
- When I click on a menu item in the navigation bar, the page scrolls to the top of the relevant section of the webpage without spacing or content being covered by the navigation bar.
T03 Result: PASS
Navigation screenshots
-
-
As a first time visitor, I want to read about the company's services so that I can assess whether they fit my needs / As a first time visitor, I want to look at prices so that I can check whether I can afford their services.
-
TO4 - Acceptance criteria
- when I click on the menu item “services” in the navigation bar, the page scrolls to the “services” section of the website.
- when I view / scroll to the “services” section, an introduction and a list of items included in the services are displayed as well as three text boxes showing pricing information laid out on top of different images, and
- when I scroll at the bottom of the section, a “contact-us” button is displayed,
- when I hover over the button, its appearance changes from green to orange.
- when I click on the button, the page scrolls to the “contact us” section.
T04 Result: PASS
Services screenshots
-
-
As a returning visitor, I want to read customer testimonials so that I can assess if the company is reliable and professional.
-
TO5 - Acceptance criteria
- when I click on the menu item “testimonials” in the navigation bar, the page scrolls to the “testimonials” section of the website.
- When I view / scroll to the “testimonials section”, a carousel with 2 side buttons and a dotted indicator displays an image, a name and text containing the customer recommendations in quotes.
- When I hover on either side buttons, the buttons appearance changes (to brown) and,
- When I click on the right button, the carousel moves one slide to the right,
- When I click on the left button, the carousel moves one slide to the left, and
- When I click on one of the dotted indicators, the first slide to be displayed is relevant to the position on the dotter indicator.
T05 Result: PASS
Testimonials screenshots
-
-
As a returning visitor, I want to read more about the company so that I can assess its credentials, professionalism and cat friendliness.
-
T06 - Acceptance criteria
- when I click on the menu item “credentials” in the navigation bar, the page scrolls to the “credentials” section of the website.
- When I view / scroll to the testimonials section, text and a background image are visible and displayed responsively.
T06 Result: PASS
About me screenshots ![about][screenshots/about_me.png]
-
-
As a returning visitor, I want to access contact options so that I can reach the company for further queries.
-
T07 - Acceptance criteria
- when I click on the menu item “contact us” in the navigation bar, the page scrolls to the “contact us” section of the website,
- when I view or scroll to the “contact us” section, contact details with a phone number and an email address are displayed as well as a contact form containing “full name”, “email address”, “subject” and “message” fields,
T07 Result: PASS
-
T08 - Acceptance criteria - Form valid path
- when I enter my name in the “full name” field, and
- when I enter a valid email address in the “email” field and,
- when I go to the subject field, I can keep the existing selection “general queries” or select “Arrange a meet & greet” and,
- when I enter a message in the “message field” and,
- when I click submit, I am brought back to the top of the page (as the form is not linked with any server)
T08 Result: PASS
Contact us screenshots
-
T09 - Acceptance criteria - Form invalid path
- when I enter an invalid email address and when I click submit, a message prompts me to enter a valid email address.
- when I leave the “full name” field empty and/or
- when I leave the “email” field empty and/or
- when I leave the “message” field empty and/or
- when I click submit, a message will appear to prompt me to enter the required fields.
Issue:
- No message appears when the message field is empty.
Fix:
- Add required to text area element (as shown in this commit)
T09 Result after fixes: PASS
Contact us - invalid path - screenshots
-
T10 - Acceptance criteria
- when I scroll to the footer of the webpage, the company contact details with a phone number and an email address are displayed
T10 Result: PASS
-
-
As a returning visitor,I want to view the areas where the company operates so that I can check that they provide services where I live.
-
T11 - Acceptance criteria
- when I click on the menu item “area we cover” in the navigation bar, the page scrolls to the section “Area we cover” of the website.
- when I view / scroll to the “area we cover” section, a list of areas where the business operates is displayed responsively.
- when I view the “area we cover” section, a map with a designated zone is displayed and I can zoom in and out, as well as searching my postcode.(the zoom and searching option are third party functionalities)
T11 Result: PASS
Area we cover screenshots
Note On xxl-screens the embedded map applies a default padding of 8px which results in what appears to be a grey border around the map.
-
-
As a frequent visitor, I want to quickly access the company social media account so that I can further check their credentials.
-
T12 - Acceptance criteria
- when I scroll to the footer of the webpage, icons representing facebook, twitter and instagram are displayed and,
- when I hover over one of the icons, the icon changes in appearance (grow),
- when I click on one of the icons, I am redirected to the right website in a new tab (ex. Facebook icon redirects to www.facebook.com.).
T12 - Result: PASS
Footer screenshots
-
-
-
T13 - Acceptance criteria
- When I land on the website, a hero image, jumbotron text and a “contact” us button are displayed responsively,
- When I hover over the contact us button, it changes in appearance from green to orange.
- When I click on the “contact us” button, the page scroll to the “contact us” section,
T13 - Result: PASS
-
Acceptance criteria - Form valid path
-
TAcceptance criteria - Form invalid path
Form valid (T08) and invalid paths (T09) have already been tested, please refer to section above.
-
T14 - Acceptance criteria
- when I scroll to the footer of the webpage, the company contact details with a phone number and email address are displayed.
T14 Result: PASS
-
Wave evaluation report was used on the website to assess its accessibility. The report showed the following issues:
Initial report can be found here
-
-
Contrast on buttons : Change color from #23B06A to #078847 as shown in this commit, even if it meant compromising slightly the design.
-
Missing aria-labels on links: Add aria-labels on links and aria-hidden is true to icons as suggested by Font Awesome and as shown in this commit and as illustrated in the screenshot below.
-
-
-
Semantics: Change headings where necessary and apply heading style to classes as suggested in this post from Solodev and as displayed in this commit and as illustrated in the example below.
-
Text align: Remove text align as shown in this commit.
-
Not sufficient alt text and broken link for the logo: Include additional description and change the href link to #home as shown in this commit.
-
Wave accessibility final report can be found here.
The following actions taken to improve performance:
- Compress images using tinyjpg
- Move scripts to bottom from header to the bottom of the page
The report also flagged up that the title was missing for the iframe for accessibility purposes, which as added as shown in this commit.
Note: Many of the recommendations to improve performance concerns third party libararies.
The best performance that could be achieved:
-
The W3C HTML validator service was used to insure there is not syntax errors on index.html. The initial report, which can be found here was run using direct input and showed the following mistakes:
Issues
- I-frame: Bad value for width element - digit expected but % is displayed instead
- I-frame: Frameborder attribute is obsolete
- Stray start tag script
Fixes
-
Remove frameborder and move width for iframe to css style .mapframe as shown in this commit.
-
Move the scripts at the end of the body of html as shown in this commit.
The final report, which can can be found here shows that all issues were resolved & that HTML code was validated.
-
The W3C CSS validator service was used using direct input to insure there is no errors in the css styles. The initial report, which can be found here showed the following mistakes:
- Issues: Hide is not value of display.
- Fix: The css was subsequently changed to display:none as shown in this commit.
- Warnings: Many of the browers vendor extension were unknown.
- Fix: The css file was amended and all the redundant vendors' extensions removed as shown in this commit. Below is an example of the modifications to the code.
The final report, which can be found here, shows that all issues were resolved & that the CSS styles were validated.
One alert "-webkit-fill-available is an unknown vendor extension" remains, however this is needed to allow the hero background image to cover the full height on mobile devices.
