Website for a fictional Cat Rescue and Adoption Shelter
The Cat Ark Website is a site that aims to bring awareness to a cat shelter in Galway, Ireland in order to garner donations, both in funding and in supplies. It also shows the cats that are available to be adopted so people can be tempted into giving the cats in the shelter a new home. As The Cat Ark is a not-for-profit shelter, it is important to fundraise to pay for vetinary bills, supplies, food and overheads. It is therefore essential that people know that the shelter exists, all the good work it does and how important it is for the local cat population. Without an informative, eye-catching website, it will be difficult to encourage enough people to support the shelter with donations. The site will also look for volunteers to help in the day-to-day running of the shelter. The Cat Ark website will help people find a cat that they know is healthy, vaccinated and socialised with other cats.
You can find the deployed website of The Cat Ark here.
Featured on all three pages, the fully responsive navigation bar includes links to the Home page, Adopt-a-Cat page and Contact-Us page and is identical in each page to allow for easy navigation. The band of orange color highlighting the Nav Bar is used to brighten up the site and bring attention to the navigation bar so its easy for the user to find.
The navigation bar is useful for users to find their way around the site without too much needless seraching.
The Cat Ark logo is featured in large, bold font across the top of all three pages and is a working linking that brings the user back to the homepage.
It is clear, easy to read and will bring the organisation's name to the attention of the user.
The first section of text on the home page is an introduction to The Cat Ark, giving the user a little background information and also tells the user about the community work the shelter does and the importance of what they do. The heading is also a clickable link to the homepage.
This section has an image of a cat holding a sign and looking at the camera. the sign says 'all you need is cat' and encourages the user to think about bringing a cat into their life.
The heading is a clickable link, bringing the user to the cats-for-adoption page, making it easy for the user to see the cats available. The text in this section, encourages the user to adopt a cat from The Cat Ark, giving the benefits to the user of doing so. It also lets the user know that they will be doing a good thing by adopting from the shelter as it will provide the shelter with the space to rescue another cat that needs a home.
At the top of this section, there is an image of a smiling young woman holding up two kittens close to her. The aim of this image is to encourage the user to get involved with the shelter as a volunteer so they can interact with the cute kittens as well. The image of the happy girl may even entice the user to adopt a cat, so they can enjoy their own cat.
The heading of this section is a clickable link which brings the user to the contact-us page so they can easily enquire about becoming involved with the cats at the shelter or as a fosterer. This is important to the shelter for it to be able to continue to run efficiently.
At the top of the Donations section, there is an image of an adorable, fluffy kitten looking at the camera with beseeching eyes. The user may be prompted to help the shelter to help the poor little kitten.
The heading of the Donations Section is a clickable link that brings the user straight to the contact-us page which may prompt the user to get in touch with the shelter with some offer of help or donation. As the shelter is a non-profit, charity-based rescue, it heavily relies on donations from the public to pay for vet bills and expenses. They also need donations of food, cat litter and bedding to keep the cats in their care fed and comfortable. This section aims to bring in much-needed aide so the shelter can keep going.
The aim of this page is to show the various cats that are ready and available for adoption at The Cat Ark at the moment and to give details of each cat's needs and likes so the user can evaluate whether one of the cats would make a good pet for their household.
Each cat has an image of them, followed by a list which includes their name, type, needs and is followed by a few sentences about that specific cat- what he or she likes for example. The list also details whether they are house-trained which may be important for the user to know. The images may prompt users to be tempted into adopting a cat from the shelter which is one of the main aims of this website.
The Cats for Adoption page is headed with the same logo, navigation bar and footer as the Home Page. The Logo is a clickable link which will bring the user back to the home page.
The user can reach the Cats for Adoption page two ways-by clicking on the heading of the section about adopting on the home page or by the navigation bar at the top of the page.
Screenshot of Contact Us Form and Submit Button
The Contact Us Page consists of the same Logo, Navigation Bar and Footer as the other pages. It also consists of a form which, when filled out by the user will allow them to submit their details. This will in turn send their details to the Cat Ark so they can get back to them with prior knowledge of their query. This is an important part of the website as it will allow the user to register their interest at any time of the day or night, not just during business hours. This means that it is less likely that they will navigate away from the website, forgetting to return as opposed to leaving their details for future contact.
The user is unable to submit the form without filling in the required fields. If they try they will be prompted to fill them in. As the form is not connected to a database as yet, the sucessful submission of details brings up a page by the Code Institute congratulating the user.
Screenshot of CI Successful Form Submission Page
The footer of the website is the same across all pages, made up of the logo, an invitation to the user to visit The Cat Ark in Galway, Ireland or to follow them on social media, the links of which are also on the footer. Social media links are represented by their associated icons and when clicked, will bring the user to the relevant social site. Below the social media icons is the copyright symbol and the name of the webpage creator, backed in the same orange as the navigation bar, borders and buttons to tie the look of the website together.
If I were to develop this website further I might add some of the features in the below list:
- Add a database to collect the information from the contact form.
- Give the user the option for us to keep their contact details on file, to be sent newsletters etc
- Add a method for the user to be able to donate to The Cat Ark straight from the website.
- Add videos of the cats from inside the center, from the foster families, etc
- Add a page for testimonials from happy volunteers and people who have adopted
- Add a gallery of images from the shelter and cats.
-
As a user I want:
- to be able to find out about The Cat Ark- where it is and what they do
- to be able to find my way around the website easily
- to know how I can find out more
- to be able to apply to adopt or volunteer
-
As a site owner I want:
- to encourage users to adopt, donate or volunteers
- to drive users to contact us for more information
- the website to be simple to use and navigate
- The layout of the headers is kept simple and clean with logo written large and bold and the nav bar highlighted with orange which is known for drawing attention. Orange is also known as a fun, warm and exciting color. The background color is a soft, light grey which I think is warmer than a stark white.
- The home page has simple layout with images between each subject to break up the text and add interest for the user.
- The Adopt a Cat page follows on with the same color scheme and font choices. It is also punctuated with images. A thin orange border around the media and descriptive lists adds a pop of color down through the page to the call-to-action orange click-here butons which carry the users straight to the contact form where the can apply to adopt.
- On the form page the color scheme continues with thin orange borders and rounded edges on the input fields
- The buttons change to blue when the user hovers the mouse over them, a little add of interest.
- The footer echoes the page header, with centered logo and a line of orange going across. Social media icons also turn blue when the cursor hovers over them. A darker grey is used as the background color for the footer to add some contrast.
- Font used is Libre Franklin and Libre Baskerville from Google Fonts. Libre Franklin is sans-serif and simple whereas Libre Baskerville is a serif font which I think provides a strong contrast.
Balsamiq Wireframes Created during Planning Stage
Balsamiq Wireframes Created during Planning Stage2
- My project changed a little from the wireframe stage of planning.
- Desktop
- Pages all load and all page features are working.
- Tested and working as intended on Firefox and Chrome browsers.
- Mobile
- Tested and working as intended on iPhone SE, iPhone 12, Samsung Galaxy S8 and Note.
- Google Chrome Dev Tools
- Tested and working responsively on all available devices .
- Links
- All links clicked and all resulting in expected results
Screenshots of Validation Test Results HTML
Screenshots of Validation Test Results CSS
Screenshots of Lighthouse Test Scores
- HTML No errors were returned when passing through the official W3C validator
- CSS No errors were found when passing through the official W3C validator
- Lighthouse used for general scores, passed
- No unfixed bugs.
The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab and choose Pages. From the source section drop-down menu, select the Master Branch Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. Issue I had when deploying: my project was private and so when I went into Github Pages the drop down list was not there. I had to go and make my project live before returning to continue deployong my website as directed.
The live link can be found here - Link to Deployed Live Website
- Content written using information from www.alleycat.org and www.wikipedia.org
- The icons in the footer were taken from Font Awesome.
- The fonts were taken from Google Fonts https://fonts.google.com
- All images were taken from Pexels and Pixabay which are open source sites.
Credit and Acknowledgement to the following sites for help with code or inspiration:
- W3Schools for general html and css code.
- Diffchecker to look compare code in my pages and find unclosed divs.
- Stack Overflow, Code Institute, Css.Tricks for general information.
- Foolishdeveloper.com for footer inspiration.
- Cloudinary.com for hosting my media library.
- Code Institute for README template.
- amiresponsive? for image of deployed website of different devices.
- Balsamiq for making wireframes.
I would like to thank the following for all the support and guidance:
- The Code Institute, especially our facilitator Kenan.
- The Slack Community, particularily the group I am lucky to be part of.
- My awesome mentor Rahul, whose encouragement and guidance was so valuable.
- My family, whose patience is much appreciated!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
