Two Dogs is a blog site that hopes to bring light-hearted and entertaining content by showcasing events in the life of the Two Dogs - Wreckless Eric and Baby Jim. It includes stories, images and videos about what they get up to in their day-to-day life.
The live site can be found here
Image by Freepik
The target audience for this site is consumers of online entertainment with a cross section of dog-lovers. It's primary source of traffic will be through social media channels. If the site is successful, it is expected that a portion of users will come from signing up to the blog.
It is anticipated that due to the nature of the site, users will predominatly use their mobile phone to use the Two Dogs site. This should be verified as the site gathers traffic.
-
User Stories
- As a dog lover and online content consumer I want to view content relating to dogs online
- As a dog lover and online content consumer I want to view content relating to the two dogs, Wreckless Eric and Baby Jim
- As a fan of the Two Dogs blog, I want to keep up to date with the latest blog posts through email
The first release of the Two Dogs site includes several vital features which are detailed below. Future releases should include additional features as outlined in the 'Features Left to Implement' section.
The navigation bar
Featured on all pages, this fully responsive navigation includes links to the landing page, the meet page, the tails blog page, the gallery and the blog sign up page. It is exactly replicated across the site to ensure consistency for the user.
The navigation allows users to browse the site from any page without having to use the back button on their device.
It uses code from Medium.com (futher details in Credits section below). This particular piece of code was used as it included consideration for users of screen readers, increasing the reach of the accessibility of the site.
The landing page hero image
The landing page opens up to an image of the two dogs, enticing the user to explore the site further and find out more about them. The image has a slight zoom to help focus the user on the call-to-action, beginning their journey on the site.
The footer
The footer includes links to relevant social media sites, opened in new tabs to avoid taking the user away from this site.
The meet page
The meet page introduces users to the Two Dogs and allows them to learn some basic facts about their history and personality including likes and dislikkes. This is important in building interest with the audience.
The tails blog
The Tails Blog houses blog posts giving detailed stories about the Two Dogs lives. Users will find written content, images and videos updated frequently here. This is the main focus of the website and will grow over time as new content is added.
The gallery
The gallery contains visual content of the dogs including from the Tails blog posts and completely new content. It supports the core feature of the site, the blog.
The sign up page
The sign up page includes a sign up form that allows users to opt in to periodical emails containing the latest stories from the Two Dogs lives. Users are in control of the frequency of the emails received. To encourage users to sign up, there is a call-to-action in the form of a banner throughout the site.
- CMS for adding and organising blog posts and image/video content
- Automated emails to subscribed users with optional daily, weekly or monthly updates
- Comments and social sharing on blog posts
- Improved image delivery for better quality, responsive and optimised performance
- Implement custom 404 page (page has been built in this release, implementation blocked by git restrictions)
Throughout the development of this site, testing was carried out on different devices using the developer tools on multiple browsers including Chrome, Firefox and Microsoft Edge on Windows 10.
This was repeated towards the end of the project using the free testing tool on BrowserStack.com, while extending the reach of testing to other Windows OS, the browser Safari and multiple MacOS. It is worth noting that as this is a free tool, the accuracy of the tests may be limited.
For all testing, each page was reviewed across the following criteria;
- Layout and positioning (ie is everything where it's expected to be on all devices)
- Functions (ie buttons, links, inputs, etc)
- Features (ie image rendering, form fill and submission, etc)
- Consistency, convention and expectation (ie does it allow affordance to the user)
The site was evaluated by Google's Lighthouse and Page Speed tools. As performance is not optimal, improvements were investigated such as using webp images or minfying the CSS. Both resulted in the score lowering even further, by as much as 10 points in the case of the image file type. In place of the recommendations from Google this release uses source sets and mulitple css files, resulting in marginal improvements from the first audit. Further investigation into the recommended changes should take place for future releases.
Lighthouse
- Performance - 77
- Accessibility - 100
- Best Practices - 100
- SEO - 100
Page Speed
- Mobile - 77
- Desktop - 97
UAT
In addition, remote user acceptance testing was conducted with 3 users; two using mobile devices and one using a desktop. Users reported a satisfactory experience, with no difficulty using or understanding the website. One user reported a typo.
During initial testing, opportunity to refactor the code were discovered and an attempt was made to improve it. This resulted in larger changes than expected, such as the move to using styled sections over individually targeted elements, which required additional fixes and further testing before release.
HTML
In the first round of html validator testing, button tags and section/article tags were found to be used incorrectly. In addition, there were a small number of open and unnecessary tags that needed to be addressed.
The second round, conducted after implementing the new structure, found an open div on the index page, sections incorrectly used in place of divs and some stray tags. In two instances, changing the section to div required updating the css file to maintain syles.
The third and final round of testing before deployment returned no errors for this project.
CSS
In the first round of css validator testing, some unclosed attributes were found. This highlighted that these attributes were unecessary to the output of the code and were removed.
The second round, conducted after implementing more efficient css, found two parse errors. In addition, it warned of the use of the deprecated property 'clip'.
The third and final round of testing before deployment returned no errors for this project.
This release includes some bugs that should be addressed in future releases. Although appear to block using the site, they negatively effect user experience due to positioning and inconsistent styling, and should be prioritised.
- Some divs and/or sections are not extending the height of their content on screens below 768px
- The hamburger menu icon on mobile screens should float right
- The mobile menu drawer should be wider and float to right
- On very small screens (below 368px) the logo breaks onto two lines
- Buttons are not full width on screens below 768px, resulting in some breaking onto two lines on very small screens
- Hero and about-breeds images are not using a responsive solution
- On Firefox and Safari the custom success page redirect brings users to the Code Institute 'form dump' confirmation page
- On Chrome, Opera and Samsung mobile apps, the Code Institute 'form dump' confirmation page opens in a new tab or pop up while redirecting to the success page on the original tab
- On Firefox and Safari, custom input styling is overwritten by browser defaults.
- On Samsung mobile app, dark mode alters colors from brand
As part of the Code Institute submission process, this site was deployed to GitHub pages. The steps to deploy are as follows:
- Open github.com and log in to user account
- Find Two-Dogs repository
- In the GitHub repository, navigate to the Settings tab
- Find the page section on the left hand menu
- Check source is 'Deploy from branch'
- Check branch is 'main'
- Click save
The live site can be found here - https://somekindofdesign/two-dog.github.io/two-dogs/index.html
The code from this project was implemented by the project owner, Louise Stanley. Additional help, guidance and solutions were also used from the below sources.
Code Institute - Love Running Walkthrough Project
- Creating the Hero Image for the hero image and text on the landing page
- Creating the Club Ethos for the circle containers of the dog profiles on the Meet page
- Site Footer for the social media links and the footer
W3Schools
- How TO - Custom Checkbox for styling the checkboxes on the sign up form
- How TO - Blog Layout for the structure of the blog and image gallery
Slider Revolution
- Styling Radio Buttons with CSS for styling the radio buttons on the sign up form
Medium
- Responsive, Pure CSS Off-Canvas Hamburger Menu for implementing a hamburger menu on smaller devices
Although the content is unique, the project including layout, features and readme file were guided by the Code Institute Portfolio 1 Assessment Guide.
All written content was provided by the project owner, Louise Stanley.
Images and videos were generated by Louise Stanley with the exception of the background image for the About Breeds section. Please see content creator information below.
- Photo by Hannah Lim on Unsplash
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent