This is my milestone one project for the Code Institute's 'Level 5 Diploma in Web Application Development'. The goal is to demonstrate my ability to utilise HTML and CSS, including CSS frameworks, to create a small, responsive, well-designed and well-implemented website for a business, fictional or otherwise. For this assignment I have chosen to create the webpage for my mother-in-law's dog breeding business, 'Jenamins'.
- Easy to find contact and location information
- Lots of pictures of cute puppies
- Gain insight into the running of the business, levels of professionalism, approachability and other factors relating to the decision to buy a puppy
- Connect with more potential dog owners looking to purchase a puppy
- Promote the business more broadly
- A place to direct people looking for information
- Provide a way of potential customers to register their interest
- Show the customer what makes this company special
- Promote the family run and professional nature of the business
- Provide customers with information on currently available puppies and upcoming litters
- Develop a site that satisfies the distinction requirements of the Code Institute
- Develop a site that satisfies the Goals of the Users and Operator as determined by the User Stories and Goals
- Use plain HTML, CSS and frameworks such as Bootstrap to create a technically interesting and aesthetically appealing site
- Use frameworks where necessary so as to not reinvent the wheel
- Create a responsive website that looks appealing on a variety of screensizes and devices
- Build a performant and efficient site, benchmarked using tools such as lighthouse, that is viewable on all modern browsers and devices
- Adults 18 and up
- Customers looking to buy a new puppy
- People interested in breeding their dogs
- People looking for pictures of cute puppies!
- Easy navigation, plenty of breadcrumbs, back-to-the-top links/widgets and other quality of life features
- Accessible for colourblind, visually impaired, and other users with accessibility needs
- All functionality presented works as expected and as intended
- Quick and easy access to contact details and location
- Plenty of images and a friendly aesthetic presentation -Simple to use with logical flow and clear and straightforward navigation
- As a first time user I want to know who this company is
- As a first time visitor I want to know what breeds of dogs Jenamin works with
- As a first time user I want a smooth experience with easy access to the most important information (contact and location details)
- As a first time user I want to see many pictures of puppies
- As a first time user I want to not be frustrated with the layout or design of the site
- As a first time user I would like to be easily able to contact the business with questions
- As a returning user I would like to see new/different pictures
- As a returning user I would like easy access to the Upcoming Litters page as I am looking for one in particular
- As a returning user I would like to be able to find the business on social media
- As a returning user I would like easy access to the contact and location details
- As a returning customer I would like easy access to the various official information, registration numbers etc.
- As the site owner I would like to connect with potential customers and other breeders more easily and more cheaply
- As the site owner I want to be able to easily see when a potential customer has contacted me through the website
- As the site owner I would like the site to be well optimised for SEO in order to increase visibility
- As the site owner I want potential customers to be able to contact/find us easily
- As the site owner I want to make sure customers are never lost on my website
| Task/Need | Importance: */5 |
|---|---|
| Browsing pictures | 4 |
| Accessing contact details | 5 |
| Discovering location | 5 |
| Finding out more about the company | 3 |
| Gaining more information about the dogs | 4 |
| Information on upcoming litters | 5 |
| Finding on Social sites | 3 |
| Ability to contact through website | 3 |
| Easy navigation | 5 |
| Finding registration info | 5 |
Accessibility needs should be considered and aria tags, semantic HTML tags, and alt tags for images should all be clear descriptive and follow the w3 conventions.
Colour palletes will be assessed for color-blind friendliness, and adjusted if necessary. Colour palettes did indeed need to be changed, see Colour Palettes
The structure of each page should be logical and allow keyboard navigation and be screen-reader friendly
The site needs to be structured in an intuitive and straight-forward way. Constantly visible, consistent, navigation links; links back to the top of the page for long pages, and other quality of life navigation features are important. Site will be using a tree-style Information Architecture with links back and forward available to the user at all times via the floating nav element and/or the footer as well as a sitemap and breadcrumb trail indicating the users current position on the site.
Links and navigation should be clear and unambiguous, interactive to highlight them visually, and well-labeled to help with accessibility.
The website should consist of the following pages:
-
Landing page - with a large hero image, some introductory content, nav bar and footer with social links and contact details. The nav bar and footer elements will be consistent and accessible across all pages of the site.
-
About Us - A page detailing the staff and dogs involved,the story of the company and the owners, why and how it was started, credentials and other pertinent information.
-
Upcoming Litters - A page to announce the latest news and for returning visitors to get updates.
-
Testimonials - A page for customer testimonials, of which there are many, so smart presentation will be important. Combine this with the previously mooted gallery page.
-
Contact Us - A page dedicated to contact and location information including a map and containing a styled webform to contact the business.
-
404 Page not found - for mistypes/broken links
-
Privacy Policy - link in footer and on contact page
The site should also make use of a 404 page that redirects the user back the landing page, and a favicon to allow users to easily recognise the site amongst bookmark lists.
Pages should be responsive and designed well for the three most common screen sizes of phone, tablet, and desktop:
- 360x640px
- 768x1024px
- 1280x720px
Each page should consist of the same nav bar and footer, ensuring a consistent User Experience.
The Nav Bar should contain the following elements:
- Links to all five of the main pages
- Logo, which also acts as a home link, as per convention
- a fixed div above the main nav, in a solid colour displaying the main contact details of the business
- Menu links should collapse into a burger on small breakpoints
- Nav should either be sticky to the top of the viewport or spawn a 'return to top' link when not visible
- Breadcrumbs beneath main nav indicating current position on site (eg: Home > Contact Us )
The Footer should contain the following elements:
- Copyright information
- Social Links
- Link to Privacy Policy
- Link to Contact Us page
- Map and address
- Mobile
- Tablet
- Desktop
- Mobile
- Tablet
- Desktop
- Mobile
- Tablet
- Desktop
-
Mobile
-
Tablet
-
Desktop
-
Mobile
-
Tablet
-
Desktop
-
Mobile
-
Tablet
-
Desktop
-
Mobile
-
Tablet
-
Desktop
- stationary information bar at top of each page
- responsive menu that collapses on mobile
- breadcrumb trail beneath logo
- links to information about business and dogs
- carousel used on testimonials page
- responsive contact form
- openstreetmap.org map embedded in footer
- links to sitemap and privacy policy in footer
- links to socials in footer
Typography that emphasises the friendly and personable nature of the business. A sans serif with rounded caps would be good for headers, following into a sans serif for body text.
potential options for headers include:
potential options for body text include:
I decided to go with:
Quicksand for the headers
and
Assistant for body text
Site owner has requested that a major component of the colour pallete be a lilac/purple. I explored a number of palettes centered around this colour:
-
Colour Palette 1
-
Colour Palette 2
-
Colour Palette 3
- Colour Palette 1
- Colour Palette 2
- Colour Palette 1
- Colour Palette 2
I decided on a final palette of:
White Smoke: #F5F5F5
Periwinkle: #C9C2F3
Tropical Indigo: #9D8DF1
Payne's Gray: #536B79
Night: #121213
However, after using accessibility tools to assess the suitability of the above palette, I amended it to:
White Smoke: #F5F5F5
Lilac #5C47D1
Payne's Gray: #536B79
Night: #121213
- CSS3
- HTML5
- Bootstrap 5.3.2
- Markdown
- Tilix
- Google Chrome
- Firefox
- git
- VSCode for linux
- GitHub
- Pencil
- Coolors
- Google Fonts
- Photopea
- hextorgba
- amiresponsive
| page | test | verified |
|---|---|---|
| index.html | header links work | yes |
| header responsive | yes | |
| header links rollover effects properly applied | yes | |
| header breadcrumbs display correctly | yes | |
| main content displaying correctly | yes | |
| footer links work | yes | |
| footer is responsive | yes | |
| footer links rollover effects properly applies | yes | |
| social links open in new tab | yes |
| page | test | verified |
|---|---|---|
| about-us.html | header links work | yes |
| header responsive | yes | |
| header links rollover effects properly applied | yes | |
| header breadcrumbs display correctly | yes | |
| main content displaying correctly | yes | |
| footer links work | yes | |
| footer is responsive | yes | |
| footer links rollover effects properly applies | yes | |
| social links open in new tab | yes |
| page | test | verified |
|---|---|---|
| upcoming-litters.html | header links work | yes |
| header responsive | yes | |
| header links rollover effects properly applied | yes | |
| header breadcrumbs display correctly | yes | |
| main content displaying correctly | yes | |
| footer links work | yes | |
| footer is responsive | yes | |
| footer links rollover effects properly applies | yes | |
| social links open in new tab | yes |
| page | test | verified |
|---|---|---|
| testimonials.html | header links work | yes |
| header responsive | yes | |
| header links rollover effects properly applied | yes | |
| header breadcrumbs display correctly | yes | |
| main content displaying correctly | yes | |
| footer links work | yes | |
| footer is responsive | yes | |
| footer links rollover effects properly applies | yes | |
| social links open in new tab | yes |
| page | test | verified |
|---|---|---|
| contact-us.html | header links work | yes |
| header responsive | yes | |
| header links rollover effects properly applied | yes | |
| header breadcrumbs display correctly | yes | |
| main content displaying correctly | yes | |
| footer links work | yes | |
| footer is responsive | yes | |
| footer links rollover effects properly applies | yes | |
| social links open in new tab | yes |
| page | test | verified |
|---|---|---|
| privacy.html | header links work | yes |
| header responsive | yes | |
| header links rollover effects properly applied | yes | |
| header breadcrumbs display correctly | yes | |
| main content displaying correctly | yes | |
| footer links work | yes | |
| footer is responsive | yes | |
| footer links rollover effects properly applies | yes | |
| social links open in new tab | yes |
-
As a first time user I want to know who this company is
- company name and contact information clearly visible on page load
- About Us page is clearly visible and accessible to new users
-
As a first time visitor I want to know what breeds of dogs Jenamin works with
- About Us page and Upcoming Litters pages clearly state the breeds of the
relevant dogs
- About Us page and Upcoming Litters pages clearly state the breeds of the
relevant dogs
-
As a first time user I want a smooth experience with easy access to the most important information (contact and location details)
- contact information is accessible on page load.
- Site is responsive
-
As a first time user I want to see many pictures of puppies
- Site has many pictures
- Site has many pictures
-
As a first time user I want to not be frustrated with the layout or design of the site
- site layout is cohesive and logical
- site design is clean and responsive
-
As a first time user I would like to be easily able to contact the business with questions
- the site provides multiple avenues to contact the owners
-
As a returning user I would like to see new/different pictures
- Testimonials and Upcoming Litters pages both to would be updated regularly
- Testimonials and Upcoming Litters pages both to would be updated regularly
-
As a returning user I would like easy access to the Upcoming Litters page as I am looking for one in particular
- Upcoming Litters page is accessible from all other pages via header
navigation
- Upcoming Litters page is accessible from all other pages via header
navigation
-
As a returning user I would like to be able to find the business on social media
- social links are in the footer of all pages
- social links are in the footer of all pages
-
As a returning user I would like easy access to the contact and location details
- contact and location details are available on page load of landing page,
allowing swift access
- contact and location details are available on page load of landing page,
allowing swift access
-
As a returning customer I would like easy access to the various official information, registration numbers etc.
- all pertinent information is available via the head and footer
- As the site owner I would like to connect with potential customers and other
breeders more easily and more cheaply
- site gives multiple avenues for customers and breeders to contact owners,
lowering the barriers to contact and increasing conversion rates
- site gives multiple avenues for customers and breeders to contact owners,
lowering the barriers to contact and increasing conversion rates
- As the site owner I want to be able to easily see when a potential customer
has contacted me through the website
- site could, in future revisions be hooked up to a fully fledged
notification system
- site could, in future revisions be hooked up to a fully fledged
notification system
- As the site owner I would like the site to be well optimised for SEO in order
to increase visibility
- Google Lighthouse currently rates the SEO of the site to be 90% for the
mobile and 92% for the desktop. The reason this is not higher is because
during testing robots.txt had dummy links. Once the site is deployed
improving the SEO should be trivial
- Google Lighthouse currently rates the SEO of the site to be 90% for the
mobile and 92% for the desktop. The reason this is not higher is because
during testing robots.txt had dummy links. Once the site is deployed
improving the SEO should be trivial
- As the site owner I want potential customers to be able to contact/find us
easily
- The site gives users multiple avenues for contacting the owners
- The site gives users multiple avenues for contacting the owners
- As the site owner I want to make sure customers are never lost on my website
- The site header has a breadcrumb trail, as well as a logo that links back to the landing page. Additionally the footer has further navigation links ensuring users should be well-orientated at all times.
I ran each page through the w3 HTML validator and found that the auto-formatter that I had chosen to use for the project, Prettier, had inserted trailing slashes at many points. Though this is a stylistic issue, I elected to clean them up regardless. It also raised some smaller issues like orphaned end tags which I cleaned up.
I ran the my stylesheet through the w3 css validator, which picked up on one typo that I fixed.
I tested each page using the WAVE Firefox plugin and fixed all errors that it raised. These issues were predominantly me having misused or disordered semantic elements. All pages currently score 0 errors and 0 contrast errors. The alerts are due to redundant links, however I feel that redundant links are a better choice than having a navigation system that changes.
After final testing on the deployed site and various fixes Google's Lighthouse testing tool reported the following:
the four issues raised by lighthouse testing of the index page are all related to bootstrap, while the first issue raised is server side and out of scope of this project.
Elements do not have an explicit height and width because they are set using percentage. This allows them to be responsive.
The performance of this page is lower than other pages, at 96% to the others 99% however this is to be expected due to the use of the relatively complex carousel object.
again, this only problem with this page is that Bootstrap is somewhat bloated, I intend to look for a more svelte option following this projects completion.
The site was tested on all devices available through Firefox and Chrome emulation tools. No major issues detected.
jan 20th: margin in one of the divs in the footer was unintentionally causing
a small amount of horizontal scrolling to be possible. Found the culprit using
Firefox's Dev tools to identify the element at fault
jan 21st: setting global h property interacted badly with my logo layout due
to not enough specificity. fixed
Jan 22nd: fixed the background-color of the breadcrumbs div being a slightly
different white than the rest of the page, same for the logo div found the
errant padding in breadcrumbs and replaced it with margin
jan 22nd: closing the section tag in the main body of any page breaks the
positioning of the footer, unsure how to fix currently. fixed: fixed a bunch
of unclosed tags, reset positioning using relative to body.
jan 27th: using rel=preload caused errors that using prefetch instead fixed
jan 27th: bootstrap text-center overwriting styling on meet the dogs section
of About Us fixed by wrapping images in div and moving the text-center class
down a level
jan 27th: lighthouse revealed a typo that was stopping the pages reporting the
HTML lang attribute fixed
The page will be deployed using gitHub pages. Deployment is relatively straight-forward as a static site. Clone the repo using the terminal command:
git clone https://github.com/Oxymetaphoric/milestone_project_1
then, copy the cloned folder to your html server's root directory.
- My wonderful family ❤️
- The Coding Crew
- Adam Cross
- David Bowers
photo by Wade Austin Ellis @ unsplash
photo by Taylor Kopel @ unsplash
photo by Brooke Cagle @ unsplash
photo by Jamie Street @ unsplash
photo by Victor Grabarczyk @ unsplash
Photo by Elena Mozhvilo @ Unsplash
Photo by Jametlene Reskp @ Unsplash
Photo by Bill Stephan @ Unsplash
Photo by Shayna Douglas @ Unsplash
Photo by Nathalie Sphener @ Unsplash
Photo by Lesli Whitecotton @ Unsplash Photo by Tamara Bellis @ Unsplash Photo by Rafal Jedrzejek @ Unsplash
privacy policy text from the ICO website
body text for Testimonials and About Us pages taken from current Jenamin site with permission