Pawfection is a dog sitting service based in Galway, Ireland. The company was started after the founders realised there was a growing need for an alternative to dog kennels for owners needing a place for their dog to stay while they go on holiday.
Pawfection is aimed at dog owners in the Galway area, who may feel unsure and stressed about what to do with their dog when they go on holiday, or if they have an unforseen event that pops up and they need to find someone to sit their dog last minute. The services are highlighted clearly, with two options: our staff sitting the dog at the owners' home, or our staff sitting the dog in their home.
I made the logo using Canva with this:
The colors are warm and inviting, and are also used throughout the site. The logo is intuitive as it is also a clickable link to bring the user back to the homepage.
The navigation bar is displayed clearly at the top and center of each page. It is the same throughout the site and takes the user between the Home page, the About Us page, Dog sitting page, Testimonials page, and Contact page.
The navigation bar has a bottom border style applied to show the user which page they are currently on, and a hover psuedo class which impliments a background color and border bottom style when the user hovers over each page link.
The Home Page background shows a dog sleeping on it's owners bed with a transparent text overlay giving a brief but precise overview of the business. The colors aren't too distracting, and the image is cosy and inviting.
The footer is displayed at the bottom of each page, and uses a simple vertical line to divide up the contact information and opening hours to the left.
On the right social media links are displayed and the links will open in a new tab for ease of navigation.
The About Us, Dog Sitting, and Testimonials pages have a simple design layout with warm colors, and images that compliment the text to give the user a positive sense of the business and its' ethos.
Class attributes are used so that the style is consistent throughout the site. There are 4 different class selectors:
- One for a blue colored text box.
- One for the accompanying image.
- One for a gold colored text box.
- One for the accompanying image.
For ease of use the display: flex layout is used so that each of these pages can be efficiently targeted for responsiveness.
The About us page gives a short description of how the business was formed, i.e that it met a need in the market for alternatives to dog kennels. For potential customers this information is vital so they are aware of the type of service provided.
There is also a section on the business ethos which further highlights the uniqueness of the business. The images show happy dogs and help to make the user feel like their dog can be trusted under the car of Pawfection.
The Dog Sitting page utilizes the simple image and text box display to seperate the two types of dog sitting service the business provides:
- Dog sitting in the owners' own home.
- Dog sitting in one of the Pawfections staffs' homes.
The information is simple and covers some main concerns and questions a potential customer may have. Will my dog be happy and safe in your care? The options of care and the opportunity presented to meet staff beforehand brings a sense of trustworthiness.
At the bottom of the Dog Sitting page there is a gold colored horizontal rule to divide the main content from an additional feature. This feature is an internal link button that takes the user to the contact page. This makes it quick for the user to submit a dog sitting request once they have just read about the services provided
The Testimonials page offers two reviews from satisfied customers, and covers both options of dog sitting, in the owners' home and in a staff members' home. The images and stories highlight the users satisfaction with the service.
There is a contact form included on the site for potential customers to submit a message requesting more information, or to send details of dates when they need a dog sitter.
The form only allows the user to hit send once all fields are completed, and the name and email fields will only accept text or email format as requested.
The send button is styled with a hover pseudo class, so the experience is more interactive for the user.
I would like to change the navigation bar when the site is used on a smaller device. Rather than have the menu shrink in size and move underneath the logo, I want to implement a hamburger mobile menu so that the user can easily hover over and see all of the navigation links. This would make the mobile design more sleek and polished. (example below from WSSchools)
I would like to develop my mobile size design for the site. I would use a feature of having the images display the text information when the user hovers over them. This would be a more sophisticated way of displaying the information, rather than the current scrolling from image to text box, to image etc.
- Navigation bar
-The navigation bar is fully functional. The links have all been tested on both desktop and mobile devices, and from all pages.
-The logo also works as a link to bring the user back to the home page.
-The navigation bar does alter position and falls under the logo on smaller devices, but is in keeping with the style of the site, and contains the same class styling.
- Footer
-The footer has absolute positioning and remains in place the bottom of all pages, and all all screen sizes. This has been tested on mobile and desktop.
-When I first started working on the home page I had various issues with positioning, and tried a fixed position for the footer. I also tried relative and absolute switching back and forth between the rest of the content, but found the footer floated half way up the page. Finally I was able to use absolute positioning and a defined height and margin-bottom to ensure the footer remained in position and cleared the rest of the page content without any gaps.
All social media links in the footer have been tested, and open in a seperate tab.
- Links and form button
-All internal links have been tested and work. There is a button at the bottom of the dog sitting page which takes the user directly to the contact page, it is working correctly.
-At first the send button on the contact form was sending the user to the Code Institute form dump page and taking them out of the site, but I changed this in the code to open a new tab.
The various parts of the site were tested for responsiveness using Devtools in Google Chrome. I had to make some significant layout changes to accomodate this. The site was designed in a deskptop first manner, so it was a struggle to make it work on smaller devices.
-Home Page
The home page had to be restructured for small devices, and the background cover image was brought to the center. I tested using a width property of 100vw on the image at mobile level but this left huge gaps of background showing, and wasn't consistent with the site. I moved the overlay text from the left position to the right to accomodate a better view and perception of the background image.
-Footer
The footer was tested for responsiveness, and at the smaller device level the social media icons feel below the footer creating grey background space. I resized the social media icons, and reduced the font size of the footer text. The layout works on mobile devices slightly differently with the social media icon links falling below the contact and hours information.
One major layout issue I have encountered is working with flex display. For my About Us, Dog Sitting and Testmonials pages I created class attributes so I could apply the style to all 3 pages rather than code seperate layouts for each page. It has been challenging to make the layout work as one page includes landscape images, and the other two use portrait.
I created two containers, one that holds one image and a gold coloured text box beside it, and the other that holds one image and a blue coloured text box beside it. To make the layout more interesting I decided to inverse the order of image and text betweem the two containers, this meant using the property 'flex-flow: row reverse' on the second container. Overall I prefer this layout but it has cause some issues with differences in margin and space. It mostly effects the about us page as seen here, there is a big space between the bottom image and text:
At present I have tried to decrease the space but this causes issues on other pages. I have decided to keep the layout as I prefer how it looks on the other pages, rather than having a uniform two text boxes and two images aligned vertically. If there was more time I would like to refine this layout and learn more about using flex, and flexboxes.
-Favicon Error
When I tested my site on Dev tools I recieved an error that the favicon could not load. I used
favicon.cc
to make a favicon, and added it to my index.html head.
HTML
-No issues were returned when passing through the Offical WSC validator
CSS
-No issues were returned when passing through the official (Jigsaw)validator
ACCESSIBILITY
I used lighthouse in google chrome to test the site and made sure the site passes accessiblity markers.
The site was deployed to GitHub pages. The steps to deploy are the following:
In the GitHub repository, navigate to the Settings tab and click on'Pages'. Select the Main Branch. Once the main branch has been selected, the page will automatically be refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here:
Throughout the project I made use of tutorials and advice from the following websites:
I also used Youtube tutorials to impliment aspects of the site:
- The social media icons used in the footer, and the icons on the Dog Sitting Page were taken from Font Awesome
- The fonts I used in my site were Roboto Condensed, and Poppins which I took from Google Fonts.
- I tested the site color scheme using contrast grid from
-All images are taken from the free image site
Code for the send button, and link button to contact page styling was taken from Code Institute's
Love Running Project
The code for the social media links in the footer was taken from Code Institute's
Love Running Project
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent