This is my first Milestone Project for my Full Stack Software Development Diploma with Code Institute. I will be using HTML and CSS only, but I have included some external Bootstrap CDN elements, which use JavaScript.
For this project, I am creating a simple website for a fictional new shelter for dogs. The website is simply structured with only key information on display, however there is scope for future expansion.
The basic aim of the website is to introduce people to the charity and encourage visitors to adopt a dog.
Table of contents generated with markdown-toc
I am looking to attract as wide a range of visitors as possible. Most will be people who like dogs and may have an interest in making an adoption.
I am a visitor and I want:
- To find out what this website is for
- The site to be easy to 'learn', navigate and use
- To see lots of pictures of happy dogs
- To see what dogs are available
- To be able to easily contact the charity to make an adoption or make an enquiry
- To follow the charity on social media
- To use the site on mobile/tablet/desktop
- To know where the charity is located
I am the website owner and I want:
- Visitors to want to make a donation or adoption
- To receive feedback on the new site
Below I have created a trade-off table that directly addresses user stories above as well as further features which may not be viable now, but could be useful in the future.
| Opportunity/Problem | Importance | Viability |
|---|---|---|
| Create an online presence | 5 | 5 |
| Show off our dogs | 5 | 5 |
| Encourage visitors to adopt | 5 | 5 |
| Provide means to donate online | 4 | 1 |
| Increase social media following | 4 | 4 |
| Blog/updates/mailing list | 3 | 2 |
The primary objective of this site is to create and develop an online presence for the new charity. This means that it is initially created as a Minimum Viable Product. This allows us to begin with the most important aspects and expand from there. We can also test what works and what doesn't. Therefore it is also sensible to provide the opportunity for visitors to give feedback so we can improve existing features and find out what new features are needed.
The strategy trade-off table above helps us work out what we can and can't implement at this stage. It also tells us what the most important features are. These are as follows:
- Create an online presence and introduce ourselves to visitors
- Show off our dogs
- Encourage people to adopt
- For visitors to be able to easily contact us for anything and provide feedback
Allowing people to donate online and adding operational updates/blog is outside my current skill set, however these are important features which can be looked at in future.
The website initially functions as a single scrolling page in a linear structure. This is the most simple and accessible way of navigation and information display. This is ideal for this site as we are looking to attract as wide a demographic of visitors as possible. We want visitors to be engaged immediately and for them not to be overwhelmed. There are nav links on the top of the screen, which take the user to different sections of the page. This will be fixed to the top of the screen when scrolling to enable the user to access them at any time.
The top navigation links will change colour when that section is active and upon hovering to provide the user with simple visual feedback on where they are and how to get to where they want to go within the site. There are also clear dividers and headings for each section.
The submit button in the contact section also changes colour when hovering. If there is an issue with what has been submitted i.e. a required field has not been filled in then this information will be clear.
On tablet and mobile devices the nav link is compressed to the hamburger style menu as standard on smaller devices. It also includes social media links so these have maximum visibility.
Each page section has a clear function and purpose.
- The logo and title are on the left with the navbar on the right. The navbar is compressed to the hamburger icon when using on tablet or mobile. This helps the visitor find their way around the website as well as providing useful links to our social media pages.
- Large hero image of happy dogs playing. There is a large button laid over the image which takes the user directly to the contact page with the text 'I want to adopt a dog'. The positive text and imagery instantly elicit a positive response from a visitor and make the site's function clear.
- General information to the shelter - when/why/how we started and what our objectives are. This section is friendly and inviting to the reader. This provides the visitor with facts on who we are and what we do - reinforcing our legitimacy and providing human context.
- Pictures and information profile about our dogs. There is scope for expansion on this section - this can link to a further page with all of our dogs included but for now, is just a showcase.
- This works as a brief info/advertising section to encourage people to adopt. There will also be photos of dogs to break the page up which keeps it visually appealing and triggers further positive emotions from the user.
- Contact form for all enquiries. This has standard inputs for name/email/telephone. There is a checkbox list for the user to specify the purpose of their enquiry as well as a large text field to add further questions/detail. There is also a text box informing the customer that we aim to respond to all enquiries within 24 hours of receipt and requesting feedback on the site. Name/email/telephone/enquiry type fields are all required with the larger text box optional. This has a broad scope for the visitor who can make any enquiry needed from one place.
- As is standard, we include our phone number, email address, and place address on the bottom of the page. This is located immediately below the contact section so these two sections can be seen as one larger one. The opening hours are included, as well as the social media links again.
This is a mobile-first design using bootstrap to adjust column numbers/sizes and positioning. On mobile, each column will fill the screen horizontally while on larger devices we can fit more features into each horizontal space.
Wireframe for mobile, tablet, and desktop
I am using a simple colour palette generated on Coolers.co which will ensure visual clarity. I have opted for a green theme as this represents nature and the outdoors which suits dogs well. Green is also the second favourite colour for both men and women as well as the easiest for the eye to process.
The hero image with the playing Beagles is not only eye-catching for a visitor, but the colours also generally match and pair well with the colour palette used which gives the site good visual flow from the beginning.
My chosen font is Yusei Magic for the headings and Lato for the paragraphs. These are both taken from the Google Fonts collection. Yusei Magic has a handwritten feel and gives the viewer a friendly and homely impression. Lato pairs well with Yusei Magic, is easy to read, and is a commonly used font online for larger bodies of text for this reason.
- Introduction to the charity
- Photos and descriptions of our dogs
- 'Why Adopt' section encouraging people to adopt
- Contact Us form and address/contact information
- Social Media Links
- Responsive design, which makes the content attractive and easily read at any screen size
- Navbar with a scrollspy component which helps the user navigate around the page and know where on the page they are at any time
- Payment/Donation/Sponsorship options
- Blog
- General operational updates
- Mailing list
- Carousel component added to dog profile photos to show off more pictures of each dog
- HTML5
- CSS3
- Bootstrap v4.5 - This was used to assist with general responsiveness and styling and more specifically for the navbar, scrollspy, grid layout, and contact form
- Fontawesome - This was used for all icons on the page. These were the Paw icon used in the header and dividers, the Home icon for the home button in the navbar, and the bone icon used in the Why Adopt section
- Google Fonts - I used the fonts Yusei Magic and Lato
- Git - Used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub
- Github - GitHub is used to store the project's code after being pushed from Git
- Webformatter.com - Used to beautify HTML
- Freeformatter.com - used to beautify CSS
- Techsini Mockup Generator - Used for the website mockup
- Balsamiq - Balsamiq was used to create the wireframe during the design process
- MS Paint - Used to resize and crop images used
- Coolers to generate the colour pallette
- Colorcodehex to convert hex colours to RGB colours for some translucent elements
- TinyPng to compress images to smaller file sizes
- Markdown table of contents generator - Used to generate TOC in ReadMe file
- Grammarly - Used to check spelling and grammar on the index.html file and the README.md file upon completion
-
I want to find out what this website is for
-
Visitors are instantly greeted by a large hero image of playing dogs.
-
There is a large button at the top of the page reading "I want to adopt a dog"
-
The hero image covers only 80% of the viewport size. This allows the visitor to see the top of the "About Us" section below the hero image, which invites them to scroll down and find out more.
-
-
I want the site to be easy to 'learn', navigate and use
- The site is a linear structure with everything located on one page. This is easy to navigate on all devices.
- The visitor has three options from the home page.
- They can either scroll down into the 'About Us' section, the title of which is already visible.
- They can use the navigation bar/hamburger menu to find more sections on the site. This is located at the top of the page as standard.
- They can hit the large button in the hero image "I WANT TO ADOPT A DOG". Not only is this a clear visual indicator of what the site is for, but also takes the user to the contact section where they can enquire about adopting a dog.
- The navbar is fixed to the top of the page so the user can always navigate back to either a previous section or find the section they are looking for.
- The navigation links have clear and unambiguous meanings so the user knows exactly what they are likely to find in each section.
- If the user fills a section of the contact form incorrectly or leaves a required input blank, they will receive an error message when attempting to submit.
- Once the form has been successfully submitted, the page refreshes back to the top so the user knows that it was successful.
-
I want to see lots of pictures of happy dogs
- Visitors are instantly greeted by a large hero image of playing dogs.
- There are further images of dogs all through the site and in each section except for the contact section.
-
I want to see what dogs are available
-
We have a 'Meet the Dogs' section advertising the dogs we currently have.
-
Each dog has a profile section with a picture and a short description.
-
Each profile section contains a link to the contact page so the visitor can quickly and easily enquire about a particular dog.
-
-
I want to be easily able to contact the charity to make an adoption or make other enquiry.
-
We have a contact section at the bottom of the page.
-
This section allows the user to enter their basic contact information (name, email, telephone). It also allows the user to specify what they want to ask about as well as add any further information in a textbox.
-
There are several links to this section on the page.
- In the navigation menu "contact us"
- The 'I WANT TO ADOPT A DOG' button on the hero image takes the user directly to the contact section.
- There is a link to the contact section in the 'About Us' section.
- There are links to the contact section under each dog profile in the 'Meet the Dogs!' section.
-
-
I want to be able to follow the charity on social media
-
Social media links are displayed on the navbar.
-
Social media links are displayed on the footer.
-
-
I want to use the site on mobile/tablet/desktop
-
The site is built with responsive design in mind. Bootstrap grid is used for most elements in the main section to keep the layout tidy and easy to digest.
-
On smaller devices, each element follows on from the next with pictures spaced between paragraph elements to keep visual appeal.
-
On larger devices elements tend to be more spaced out next to each other as this has greater visual clarity on a larger display.
-
-
I want to know where the charity is located
-
Our address is in the footer section as standard for most websites. Our opening hours are also visible in this section.
-
-
I want visitors to want to make a donation or adoption
-
We have plenty of pictures of happy and healthy looking dogs which should appeal to any visitor.
-
There is a 'Why Adopt' section added, with information that is intended to encourage any visitor to make an adoption with us.
-
-
I want to receive feedback on the new site
-
The option to provide feedback is requested and encouraged in the contact form section.
-
-
Chrome developer tools used throughout development to check usability on different devices/sizes. Devices "used" on dev tools include:
- Moto G4 and Iphone 6/7/8, as these are fairly standard sizes for a mobile devices
- Iphone 5/SE and Samsung Galaxy Fold, as these are relatively narrow mobile devices
- Pixel 2 XL and Iphone X, as these are larger mobile devices
- Ipad and Surface Pro, as these are standard sizes for tablet devices
- Ipad Pro, as this is a higher resolution tablet device
-
Personal devices used to check usability after deployment
- OnePlus Nord mobile phone
- Huawei Mediapad M5 10" tablet
- Dell Inspiron 7577 laptop
- Dell U2520D monitor
-
Friends and family asked to check usability on their Apple mobile, laptop, desktop, and tablet devices, particularly to check usability on Safari browser
-
Browsers checked were Chrome, Firefox, Edge, Opera, and Safari on all device types
-
I had difficulty changing the text colours and stylings on the navbar as these were defined by the bootstrap CSS file. Initially, I added inline CSS to the index.html file to override the Bootstrap navbar-dark stylings. Later, I found a way to do this on the separate CSS file using greater specificity to override the bootstrap stylings. The Chrome developer tools were very helpful in demonstrating exactly which elements needed to be overridden to get the look that I wanted.
-
I had difficulty figuring out a way for the descriptions of the dogs to appear in a modal box for mobile/tablet displays while appearing on the page below the image on desktop displays. I found out this could be done using JavaScript, however as this is outside the scope of this project I have amended the page design so that the descriptions of the dogs will now appear on the page below the images on all displays. The structure and wireframe have been amended accordingly.
-
There were issues with the navbar elements and photos in the "Why Adopt" section on Iphone 5 and Samsung Galaxy Fold screens when testing the site as these devices particularly narrow screens. I added media queries to the affected elements to make them smaller at screen widths below 372px to compensate for this. I used the same solution to fix an issue with the social media icons in the footer. For devices with low width, these would overrun into each other, so a media query was added to reduce their size for smaller devices.
-
Navbar not transforming into hamburger icon for Ipad Pro. I noticed this was because the resolution for this device was slightly over the Bootstrap large container size, so changed the breakpoint of this element to xl to fix this. The same issue was occurring on the footer section where each element was displayed horizontally rather than vertically aligned as intended. Once again I fixed the breakpoint for each element to xl to ensure that it appeared as desired.
-
Chrome dev tools lighthouse run to check optimisation. The following issues were found and resolved
- Image files were very large and could be reduced. To remedy this I compressed all the images used on the page to quicken loading speeds.
- Form checkbox inputs were labelled incorrectly - they all had the "for" attribute "gridCheck1" as they had been copied and pasted. These were all changed to match the appropriate label.
- No aria-label on the home button which would cause screen readers to ignore this important element - rectified by adding aria-label "home" to this element.
- Tap targets were not sized appropriately on mobile devices. This referred to the checkboxes in the contact form which were too small and spaced too close together making it more difficult for a mobile user to select these with their fingers. I fixed this by increasing the spacing on these elements.
- Anchor elements on both the navbar and in the main section had an insufficient colour contrast ratio according to Chrome dev tools lighthouse. I user tested this with friends and family of various ages and nobody found this text to be problematic to read. I kept the colours as they were as they matched my colour palette nicely and there was no better colour alternative. I also increased font-weight on all anchor elements in the main section to make these stand out more.
-
Mobile
-
Desktop
-
The initial HTML validator displayed one warning as there was no heading in the "Home" section.
- This was subsequently fixed by adding a hidden h1 element to the "Home" section with the content being the word "Home".
-
CSS Validator found no errors.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
- HTML and CSS code for horizontal section dividers copied and amended as required from templatefor.net
- CSS code to position an element both horizontally and vertically within div copied from w3schools.com
- Bootstrap components html copied and amended for the following sections:
- Bootstrap grid classes used for layout and responsiveness.
- Bootstrap classes used in style.css file to overwrite some bootstrap default class designs.
- Hero image of playing beagles taken from petponder.com. No photographer credit found.
- Photo of "Benji" taken from thedodo.com. Photo credit: Reddit user Skyote.
- Photo of "Ricky" taken from thedodo.com. Photo credit: Reddit user CzechThisOut.
- Photo of "Terri" taken from bigfluffydogs.com. No photographer credited.
- Photo of puppies in "Why Adopt" section taken from pexels.com. Photo credit: Chevanon Photography.
- Photo of 2 Vizsla dogs in "Why Adopt" section taken from pexels.com. Photo credit: Pixabay.
- Photo in "About Us" section taken by myself.
-
Text in "About Us" section copied and amended from The Last Chance Animal Rescue
-
All dog profile description text in "Meet the Dogs" section taken from Battersea Dogs Home website.
-
Text in "Why Adopt" section copied and amended from Rescue Dogs 101
-
Deployment section in Readme copied from Code Institute Sample Readme
-
General layout and structure of Readme inspired by Code Institute Sample Readme
- Thanks to my mentor Aaron Sinnott for his advice and pointers as well as for helping me find useful resources.
- Thanks to the Code Institute Slack community for providing resources and tips as well as peer-reviewing the project.
- Thanks to friends and family for taking the time to look at the site and give advice on both content and user stories.
- W3 Schools and Stackoverflow were extremely useful when I forgot correct code syntax for both HTML and CSS elements and a quick search in either of these websites would usually give me the answer I needed.
- Chrome Dev Tools was extremely useful for testing and adjusting CSS
- I could see real time results to code adjustments
- I was able to see output in both mobile and desktop format
- I was able to see exactly what Bootstrap elements I needed to overwrite for certain sections
- The Lighthouse feature helped me fix performance and accessibility issues as described in the testing section