This is The Dog House, a local dog grooming salon in Prestatyn, North Wales. This website was designed for real-life use for the above company. The website will help new and returning users to find useful information about the dog groomers and enable them to contact the groomers to book an appointment or for general enquiries.
The aim of this project is to provide a responsive, easy to use and easy to learn website that is aesthetically pleasing and useful to the users.
HTML and CSS will be the languages used to create this website.
- Find a lovely dog grooming service
- View prices and opening hours
- Find information about the services provided
- Find the location of the dog groomers
- Allow customers to get to know the company
- Entice bookings via call to actions
- Provide essential information to customers - services
- Provide easy access to the business location and how to get in contact
- Dog owners whose dog needs a haircut
- Dog owners whose dog needs cleaning
- Dog owners looking to treat their dogs
- A simple and intuitive navigation system
- Relevant information that is quick and easy to find
- Links that work as expected
- Good presentation and a visually appealing design regardless of screen size
- An easy way to contact the business
- Accessible for all users
As a first-time user:
- I want to know where the dog groomers is located
- I want to know what services are available
- I want to see what previous client's dog look like after a groom
- I want to get a feel of what to expect at the dog groomers
As a returning user:
- I want to see examples of groomed dogs
- I want to know the opening times
- I want to find a phone number to be able to book a groom
- I want to see customers testimonials
- I want to find the dog groomers on social media
- I want to find the location of the dog groomers
- I want customers to know what services we offer
- I want customers to know our opening times
- I want customers to be able to contact us and locate our premises
- I want customers to have a positive feeling towards us
The following wireframes were created near the beginning of the design process with Balsamiq.
The colour palette was taken from the branding already used by this well established company. This was to ensure brand continuity throughout all their digital and tangible marketing assets.
- Gold #ba9950
- Dark Gold #4a3d20
- White #fff
- Black #000
- Dark Grey #212529
The Poppins font from Google Fonts is the main font used throughout the site. It is used frequently by many web developers and is easy on the eye. Sans Serif is set as a backup should the Poppins font fail to load.
Bootstrap grid system and responsiveness was used throughout the site and the HTML was organised in an effective way according to bootstrap useability.
The CSS file was written in a way to utilise the cascading nature of CSS and in such a manner that general styles including colors are found at the top, then styles for each section as found in their define order (as found when browsing the site) and then media queries at the bottom.
This website was design with mobile users first most in mind as the current customer base majority uses mobile devices to find the groomers. With this in mind, a single page website was chosen as it creates a better experience for mobile users. The page is structured in a familiar, user friendly, and easy to learn way. The navigation bar with the shop logo on the left side and the navigation links to the right is a view that users are used to and link to the different sections of the webpage. Priority of the sections was based on the buying experience - that the user needs information on what is available (services), confirmation that this dog groomers is the right choice (gallery and testimonials sections) and then the ability to contact (booking and contact section). However, it was felt that the ability to find the booking section or phone number straight away was especially important for returning customers which is why they are found at strategic places throughout the site including the header. The website consists of the following sections:
- A home section with a hero image and small description of the business.
- A section detailing the services offered
- A gallery section with images of previously groomed dogs
- A testimonial section from happy customers
- A footer section containing contact information, opening times and social media links
The header follows a format users will be familiar with. It is fixed to the top of the page so the user can navigate to different parts of the page at all times. This was chosen in place of a back to top button on each section to ensure readability on small devices but to still enable users to navigate to different sections of the website at will. The logo is placed on the left-hand side and links back to the top of the page. The navigation links on the right hand side link to different sections on this one page website. Smooth scrolling was introduced via CSS to ensure a good user experience. In small devices, a hamburger menu icon (familiar to users of mobile devices) contains the navigation links and drops down when pressed.
Two call to actions are placed at the top of the page in line with the user stories to encourage users to book an appointment using the “Book” link or to phone using the uniquely placed phone number. I really wanted the phone number to be upfront and visible at all times and although this may break slightly from convention, it was designed this way to be central, visible and interactive (click to call on mobile devices).
The logo reduces in size as you hover over it to indicate that is clickable.
The photo of the dog is also used as their facebook profile image so this linked their brands together. The hero image gradually increases in size on page loading to attract and engage users, while the text clearly states the purpose of the website and encourages the user to contact the company. On small devices, the text is stacked on top of the hero image to ensure compatibility with devices that have smaller widths and the hero image and text automatically resize for each device width.
Originally gold text color on a white background, this was changed to black text on a white background to increase contrast and make the site more accessible. It lists a range of services and succinctly describes each one to assure the user of what the company does and what is available. Icons were used to attract the users eyes and allow them to quickly understand what type of service was being offered. On smaller devices, the services stack delightfully one on top of the other.
The beautifully designed bootstrap gallery was used here to attractively display previous clients and showcase how talented the groomers are. The imagery provided by the owners really adds a feel for the groomers shop so that users know what type of atmosphere to expect when they arrive. Each image is shown on a different line on mobile devices so it was decided to reduce the number displayed on these devices to give the user a more positive experience and to avoid scroll boredom setting in. SRCSET's where used to aid responsivity and page loading times.
In line with the user stories section, it was felt important to assure potential clients that their pooch would be in good hands and the testimonials section really lent a hand to this. Showcasing the groomed dog, personalising it with their name and then adding the lovely comments that clients had made creates a warm feeling for users and increasing the ability to trust the company. Again, on smaller devices, the testimonials stack one on top of the other for ease of scrolling. It is worth noting that each section of the website starts with the same header - i.e. a title and then a small description, this helps the user learn that they have entered a new section and added familiarity and ease of learning to the site. After reviewing the section, it was felt that the article tag would be appropriate to enclose each testimonial. The article included the dog image and name, the dogs owner's name and their testimonial. They are a relevant section on their own and as they website grows in the future they could pop up in their own right at different points in the website.
Users are encouraged to book an appointment either by phoning the groomers directly (the phone number was highlighted in white to draw user attention to it and make it easy to find) or by filling in a short form if messaging is preferred. On smaller devices the form inputs stack on top of each other for ease of filling in.
Name, phone number and email address are required so that contact with the user can be made. So as not to put off the user, dogs breed and filling in a message was not required as long as contact can be made.
The footer matches the header in reverse with the gold bar once again featuring call to actions to encourage the user to interact with and find out more via social media.
The footer then incorporates useful information including opening times, the shop location and contact information and on smaller devices they change from three separate columns to filling the width of the device and therefore they stack one on top of the other.
A 404 page was added to the root folder as when researched it was discovered that github pages has an automated system for finding the 404 page in this folder to handle errors.
- HTML5
- CSS3
- Bootstrap v 5.2
- Git
- GitHub
- Gitpod
- Balsamiq
- Google Fonts
- Font Awesome
Manual testing and responsiveness was tested throughout development to adjust the website as features were added. It was decided to wait until the skeleton structure was there before validation was tested to ensure the code base was sound enough to be tested. The code was refactored during the build process to ensure unused code was deleted and ensure the code was clean.
This site was tested across the three most widely used browsers today - Google Chrome, Microsoft Edge and Safari. The site worked well across all three browsers and discrepancies were not found.
The site was tested on numerous devices and it worked well on all. The devices used for testing were a ASUS Vivobook Laptop, an iMac, an iphone 11 and a Samsung s22
Responsiveness was tested throughout the site development using Google Chrome Dev Tools. Bootstrap made responsivity much easier to achieve and then a few css rules were required to adjust the site for small to large devices.
All user stories were achieved as the content needed was present and easily visible on the site. The navigation was easily seen and useable on both large and small devices. Text was clearly legible and displayed on contrasting background to allow accessibility. All images and icons were used to enhance the experience on the site and did not detract or distract from the user achieving their desired outcome.
As a first-time user:
-
I want to know where the dog groomers is located
- This is achieved in the footer section which can be found through the contact nav link and is visible by a location icon and the address of the dog groomers.
-
I want to know what services are available
- This is achieved via the services link. A list of the available services is available with descriptions of what each servcie entails and the icons make finding the relevant service quick and easy.
-
I want to see what previous client's dog look like after a groom
- This is achieved through the gallery link which provides a beautiful visual of different types of groomed dogs.
-
I want to get a feel of what to expect at the dog groomers
- This is achieved via the overall branding of the site using the colour palette used in the shop. The logo is similar to the one used in the shop window and the gallery pictures let the user feel the ambience of the shop.
As a returning user:
-
I want to see examples of groomed dogs
- This is achieved via the gallery of groomed dogs.
-
I want to know the opening times
- This is achieved via the contact nav link which takes you to the footer of the page and shows you the opening hours and an open door icon.
-
I want to find a phone number to be able to book a groom
- This is achieved via the phone number in the gold seperator bar at the top of the page, the phone number in the header text of the book an appointment section or via the contact link which directs the user to the footer which contains the phone number of the salon.
-
I want to see customers testimonials
- The testimonials link takes you to four lovely reviews from existing customers. The images of well groomed dogs from those customers affirms that this is a well respected groomers.
-
I want to find the dog groomers on social media
- This is achieved via the social media icons at the bottom of the page just about the footer. They link directly through to the relevant live social media channels of the shop and open up in another tab so they the user can still peruse the site.
-
I want to find the location of the dog groomers
- The location of the shop is found via the contact nav link and is display by the location icon for easy reference.
-
I want customers to know what services we offer
- The services section navigated to via the services link displays the available services and describes what the service is. The handy icons draw the users eyes and makes it easy to understand quickly what services are available.
-
I want customers to know our opening times
- The opening hours are displayed in the footer of the website and can be found quickly via the contact nav link. The open door icon helps users find the opening times easily.
-
I want customers to be able to contact us and locate our premises
- Various calls to action are displayed throughout the site inluding two links to direct the user to the book an appointment form. The phone number is repeated three times throughout the site. Social media icons link through to their relative sites for customers to contact them in a familiar way and the email address is displayed in the contact information in the footer.
-
I want customers to have a positive feeling towards us
- Moments of delight are given to the customer by the movement of the hero image, the easy navigation to different aspects of the site. The numerous ways to contact the shop and through a visual feast given by the UX design.
HTML was testing using the W3C Validator and the following errors were flagged and corrected:
Problem The logo image file name had spaces in between the words.
Fix The logo image file was renamed without spaces.
Problem The container div inside the footer was missing a closing tag.
Fix A closing tag was provided.
Problem There were unnecessary descriptive roles describing the links as links
Fix The roles were removed from the anchor tags.
CSS was tested using W3C Jigsaw CSS Validator and passed. Two warnings were displayed but were not corrected for the following reasons:
-
Warning that there is the same color for background-color and border-color for the success buttons. This warning was ignored as this is a style choice and provides a clear indication that the button was clicked.
-
Warning that imported style sheets are not checked in direct input and file upload modes. As there is only one style sheet and this was checked by direct input, there was not a need to correct this warning.
Google Chrome Lighthouse extension was used to test performance and I was pleased with the results as shown below:
Wave (https://wave.webaim.org/) accessibilty report highlighted the need for some improvement for accessibility:
- Alt tags were added to images
- Image sizes were reduced
- Screen reader only information for social media icons were added
- A heading size was skipped (i.e. there was not a h3), so the h4’s were changed to h3’s in the testimonial section
- Button text colour was changed from gold to black for enough contrast and to fit in with site styling
- Gold text on white background changed to black to increase contrast ratio
I was then left with two alerts, which were ignore as they were deemed necessary for the site. The two alerts were:
- There are two links that go to the same place - Home link in the navigation bar and the home link in the Logo image.
- Two links that go to the same place - Telephone number that can be clicked to call on a mobile device at the top of the page and the bottom of the page
Web Aim's contrast checker was used to ensure contrast between foreground and background colors was enough for accessibility purposes. The black background with #ba9950 passed, but the contrast between a white background and #ba9950 was not enough. A darker colour of the same shade was chosen (#96793C) to be used against any white backgrounds in the website. The bootstrap dark background (#212529) was chosen for the header and footer and this contrasted enough with the #ba9950 foreground text colour.
During development and reflection on reviewing the final site, there are a few items that I would still like to incorporate in a future version of this website:
- I would like to use javascript to make the navigation menu collapse into the hamburger icon when a link is clicked on.
- I would like to connect the form up so that the information is sent by email to the owner.
Bugs were fixed in two ways - as the site was being built and after testing. To see bugs fixed during testing, please see the information in the testing section of this readme. For all other bugs, see below:
Problem: White margin on right handside on mobile view.
Fix: A quick search on Stack Overflow found the answer this css was added to the style sheet
html, body { overflow-x: hidden; }
Problem: The social media links were all directed to the dog groomers Facebook page
Fix: Social media links were replaced with the correct
Problem: The fixed header meant the tops of each section were hidden by the header when the navigation links were pressed
Fix: Stack Overflow was very help in finding a solution. The resolution was taken and adapted from the following thread (https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header). I included a span above each section with an anchor class. Then the following CSS was included in the stylesheet to offset the header.
span.anchor {
margin-top: -164px; /* height of nav, in this case 54px */
display: block;
height: 164px; /* height of nav, in this case 54px */
visibility: hidden;
position: relative;
}
Problem: On small devices under 300px the text of each individual testimonial was crossing over onto the relating image.
Fix: The 'sm' breakpoint was added to the margin start and end properties of the outer testimonial rows.
The following steps were taken to deploy the website on GitHub Pages:
- The Code Insitute template was obtained from https://github.com/Code-Institute-Org/gitpod-full-template
- A new repository was created in GitHub, the project was named
- The green Gitpod button was pressed to open a new workspace/development environment (obtain the gitpod extension to enable the green button)
- Git is used to commit during development and push this over to Github
- To create the hosted site at Github Pages, I navigated to the Github repo settings tab and found the Github pages dedicated section.
- The main branch was chosen in the dropdown menu and the 'save' button was pressed. This supplied a live link the the website (https://abbyhumphreys.github.io/The-Dog-House---PP1/)
To run this on your local machine:
- Go to the Github repo at (https://github.com/AbbyHumphreys/The-Dog-House---PP1)
- Click on the 'code' button and 'download zip'
- Extract the zip file on your local machine
- Run the index.html file in a browser
Code Institute - I thoroughly enjoyed learning HTML, CSS and use of the Bootstrap framework through Code Insitute and have used guiding principles from the course throughout this website. I enjoyed using the hero image animation idea from the Love Running project and adjusted for use on this site.
Font Awesome was used for the icons from the site and instructions were followed on how to install from their website (https://fontawesome.com/)
The Dog House owners supplied and gave permission for use of all images on the site
Adobe Express (https://express.adobe.com/spv) was used to resize the images for small, medium and large size devices.
TinyPNG was used to reduce the file size of each image.
Image Online Convert (https://image.online-convert.com/convert-to-webp) was used to convert the files to webp
Mozilla provided the SRCSET snippet (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#how_do_you_create_responsive_images) and was recommended by my mentor Rory Patrick-Sheridan
Google Fonts were the source for the Poppins font used throughout the site (https://fonts.google.com/)
Bootstrap (https://getbootstrap.com/) framework was used to implement responsiveness and style into the site with ease
Am I Reponsive (https://ui.dev/amiresponsive) was used to create the first image in the readme file to show the responsiveness of the website
All other text and coding was created by myself.