The Rescuers

The Rescuers is a fictional dog rehoming service based in London, UK.

The service currently has 4 dogs, although more could be added in future. This website aims to both find a home for the dogs in need, and also educate prospective dog-adopters on the benefits of having a dog. The target audience for the website is anyone who would like to adopt a dog, and anyone who is interested in learning about the benefits of adopting a dog.

To meet the needs of this target audience, the website contains information on the health benefits of owning a dog, as well as why rescuing a dog is important. The website also contains an 'about us' page which contains information regarding the charity's history, mission and values. There is a 'meet the dogs' page which serves to showcase pictures of the current dogs that need re-homing, as well as a bio on each one. Lastly, the website also has a 'contact us' page with a form to enquire about a certain dog, and some information on when the inbox for enquiries is monitored.

Languages

This site was created using the below languages:

• HTML
• CSS

UX

User Stories

Current User Goals

• As a current user, I want to be able to easily navigate through the site and access the information I need.
• As a current user, I want to easily find out when I might receive a reply to my inquiry.
• As a current user, I want to be able to get to know the dogs and learn about the service.
• As a current user, I want to be able to access the service's social media platforms.

New User Goals

• As a new user, I want to easily navigate the whole site.
• As a new user, I want to see clearly what the site is about.
• As a new user, I want to learn more about the benefits of caring for a dog.

Animal Lover Goals

• As an animal lover, I want to be able to easily see all the dogs available, see how I can get in touch and submit an inquiry.
• As an animal lover, I want to be able to see the history of the service, and what their mission/values are.

Development

When creating a functional, informative website, a developer must consider all planes of development.

Strategy

This stage considers the potential users and their needs, as well as the objectives of the website.

• Roles:

  • Current users
  • New users
  • Animal lovers

• Demographic:

  • Any age, based in on near the UK

• Psychographic:

  • People with a love of dogs
  • People who are interested in learning more about the benefits of caring for a dog

• Website objectives:

  • To allow the user to learn more about caring for a dog.
  • To enable the user to inquire about a dog.
  • To allow the user to learn more about the service.

Scope

Assessing the scope of a website is based on the information gathered from forumlating a strategy. Using the target audience and the established website goals, the website requirements were set out.

Content Requirements:

• A section which establishes the purpose of the website.
• A section which allows the user to learn more about the background of the service, and where they are located.
• A section which features and details the dogs that are available for rehoming.
• A section which allows the user to submit an inquiry to the service and see when they might receive a reply.
• A section which signifies that the inquiry has been received correctly.

Structure

The requirements listed above were then organised and structured into 5 pages, 4 of which the user can select from the nav bar:

• Home
• About us
• Meet the dogs
• Contact us
• Thankyou (Landing page after submission of a form- not accessible from the nav bar)

Skeleton

A wireframe for the website was produced using a desktop version of Balsamiq in order to provide a clear image of what the website should look like.

The link for Balsamiq is here: Balsamiq

Features

Below is a list of features which are included in this website:

Header Icon

This icon is located to the left of the nav bar at the top of every page. The icon serves as a continuous theme throughout the website, and allows the user to get a sense of what The Rescuers is all about. It is a memorable 'stamp' which shows a happy dog and signifies the purpose of the website.

Navigation Bar

This is at the top of each page below the title. It has links to each other page in the website, and it is set up to highlight the active page in white text, to show the user which page they are on. When hovering over another option, the option will become underlined, as per standard website conventions. This features allows the user to easily navigate through the website, and know which page they are on.

The Tagline

The tagline is located below the nav bar and serves to summarise the purpose of the website- 'A shelter specialised in matching dogs to humans'. This is present in the same position on every page of the website, to ensure that there is uniformity across all pages, and the user is clear as to the purpose of the website.

Dogs in Need section

The 'Dogs in Need' section allows the user to see information regarding why it is better to rehome a rescue dog, than to buy a puppy. There is also an icon of a dog which alludes to what the section is about. Next to the section, there is a picture of a dog, which ensures a consistent theme.

Health section

The section allows the user to see information regarding the health benefits of owning a dog. There is also an icon of a heart, and a picture of a field to the left of the section, ensuring a consistent theme of health and wellbeing.

The Footer

The footer section contains links to 4 forms of social media contained with their icons (Facebook/Twitter/Instagram/Youtube) as well as a message encouraging the user to explore the rehoming service further on Social Media. It also contains a copyright, along with the author's name and year.

About Us page

This page serves to educate the user about the history, mission and values of the dog rehoming service. The history section provides a brief history of the service, and how they came to be. The mission section states a clear purpose for the service, with 3 key goals. The values section details the values that the service holds dear, and how they aim to act.

Come and see us section

At the bottom of the About Us page, there is an iframe from Google maps, with a fictional location for the service. The location has been chosen because it is not specific to anyone's address, and a park would be a relatively realistic location for a dog-homing service, allowing for easy dog exercising.

Meet the Dogs page

This page will allow the user to view and read about each of the 4 dogs which the service has available for rehoming. The section contains 4 images which have been re-sized to ensure uniformity. Next to each image is a bio for each dog, which provides some information about each dog.

Contact us form

Located on contact-us.html, this form allows the user to input their first name, last name and email address in order to contact the service. There are 4 radio buttons which are mutually exclusive so that the service will know which dog the user is enquiring about. Each field is required, and if the user attempts to click the 'Contact Us' button to submit their information without filling out each field, they will receive a message asking them to fill in the necessary detail.

Response times section

Located on contact-us.html, this table allows the user to see the times that they can expect a response. Above the table, there is a sentence which provides rationale for the below times being provided.This ensures a better user experience, because their expectations of turnaround times are fully managed.

Thankyou

This page serves to acknowledge that the user's enquiry has been received, and that the service will get back to the user shortly.

Features Left to Implement

Gallery

A separate page showing a gallery of dog pictures and videos

Volunteering

A separate page which allows the user to access advice and links with information about how to fundraise or volunteer. This would include articles and links to different fundraising ideas.

Testing

Details of testing undertaken can be found here

Unfixed Bugs

There are no known bugs which have not been fixed.

Deployment

The site was created in GitPod and deployed to GitHub pages.

The steps to deploy are as follows:

1. From the GitHub repository, navigate to the Settings tab.

2. Click 'Pages' under the 'Code and Automation' section.

3. From the source section, ensure the branch is set to 'main'.

4. Once the main branch has been selected, and the message at the top changes to green, the site has been successfully deployed.

The live link can be found here - The Rescuers

Credits

Content

The code below in the Meta section of all .html files was taken from W3 schools: W3Schools

<meta name="description" content="Dog rehoming charity in London">
<meta name="keywords" content="Dog, London, Rescue, Rescuers">
<meta name="author" content="Ben Dawson">

• All icons (Social icons and icons on home.html) were taken from Font Awesome: FontAwesome
• All fonts were taken from Google Fonts: Google Fonts
• Color Scheme (Commented at the top of CSS file) was taken from: Coolors
• Help with formatting a readme file was taken from: MakeaReadme
• Structure of the readme file was taken from the sample readme from Love Running: LoveRunning

Media

All photos were taken from the free, open-source website: Unsplash Credit for each picture is below:

• Bob- Justin Veenema
• Charlie- Victor Grabarczyk
• Dog- Pauline Loroy
• Field- Raquel Pedrotti
• Icon- Marliese Streefland
• Lucy- Angel Luciano
• Rossi- My personal Facebook (My old dog!)