I had the challenge of developing a minimum 3 page static front end website for my first milestone project with Code Institute. I decided to create a fictitious nutrition company, called Patrick Coakley Nutrition (PCN). I have a keen interest in healthy eating and cooking, so I thought it would be enjoyable to develop a static front-end website on this topic. The purpose of this made up business, is to tackle the problems of the fitness industry head on. This business doesn’t promise quick fixes or beach body results in 6/8 weeks. PCN is about educating the consumer about nutrition, so overtime they are able to make better more informed food choices in order to achieve their health or performance goals.
I set out to develop a clean website, with nice imagery, styling, and the right amount of written content so people enjoy visiting the website whilst learning about nutrition and what PCN can do for them.
Purchasing or deciding to schedule a nutrition consultation is not an impulse decision. Consumers are looking to make a long term change. They need to make an informed decision, in order to feel confident, that they are making the correct choice. By navigating through the website, the user will gain trust with PCN, and recognise the aim is not to over promise and sell them something unrealistic. They will hopefully purchase a consultation or enquire more, before making a purchase.
The key call to actions, PCN hopes to achieve is:
-
Sign up to a consultation
-
Contact us - PCN is confident, that if a consumer enquires for more information, we can help build a successful relationship with this user, which leads to an increase chance in signing up to a consultation.
• As a first time visitor to PCN, I want to get an idea of the type of beliefs PCN is based on. I need to be confident PCN is different from the other diet fads out there.
(Reason for having 'Our Services and Approachsection on landing page and also ‘about’ section)
• As a user I want to see testimonials, so I can see what experiences people who were in a similar scenario to me have had with PCN.
(One from individual and one from a sports team or company to target different target market/groups)
• As a Purchaser I want to see different services available and the various price ranges.
(for the b2b consumer the price isn’t stated. They are prompted to email for more details)
• As a user I want to see some sample recipes I can eat as part of a healthy diet plan before I agree to sign up.
(reason for recipe page)
• As a user I want to see links to social medias to see if there is any more content available related to Patrick Coakley Nutrition. Possibly more recipes, posts related to nutrition and successful transformations.
(reason for links to social medias in Footer)
• As a user , I’m skeptical about signing up straight away. There are too many disingenuous company’s/influencers in the fitness industry misleading consumers. For this reason I have some questions to ask PCN.
(reason for ‘contact’ page)
I used Balsamic to build the wireframes. I only created desktop styled wireframes but if I was to do it again I would also create wireframes for mobile viewing.
-
Index.html Wireframes
-
About.html Wireframe view
-
Services.html Wireframe view
-
Recipes.html WireFrame view
-
Contact.html Wireframe view
I used Bootstrap 4 to build the framework of the website. Bootstrap was the main tool frame responsible for making the PCN website responsive. This means the website automatically resizes itself to look good on all devices, be it mobile, tablet, laptop or desktop.
White - A white background is the dominant feature throughout the website. I wanted to go for a clean look and I also feel it fits well within the fitness industry. Too much colors could be overpowering and distract the user from the key information provided.
Charcoal – I used a charcoal background in the ‘Footer’, ‘Our Services’ section and the ‘Lunch’ section. The Charcoal section adds a sense of change to the page and also gives a modern feel when paired with the dominant white background. ‘Antiquewhite’ was used as the font colour, in order to lift the text.
Green and Red – The Call to action buttons are either green or red. The green is intended to fit well with the idea of making a healthy choice. The red was used to convey a sense of urgency. According to a post on Yahoo "Many people make the statement that Red usually goes hand in hand with stop, but studies show it is one of the best colours to use for call to action buttons."
• #46b123ed (Green)
• Black
• White
• #36454f (Charcoal)
• rgb(250, 235, 215) (Antiquewhite)
• #a1720bbb (Gold)
• rgba(236, 40, 37, 0.7) (slightly pink red)
• #f05540ed (Light Red)
• rgb(47, 196, 255) (Light Blue)
• rgb(255, 172, 47) (Orange)
The “Oswald” font is the font used for all the headings and the “Open Sans” font is the font used for the body of the website. Sans serif is set as the fallback font in case for any reason the font isn't being imported into the site correctly.
Imagery is a reoccurring theme throughout the website. It is used catch the users attention and also aid the delivery of nutritional information in a clear concise manner. The Hero image especially works well in drawing the user in and given the website a very modern feel.
Every page in the PCN website features the same exact 'header' , 'footer' and 'nav'. The only slight variation is in the 'navbar' where each active page contains the class= "active". This slightly changes the boldness of the text, which acts as an indicator to the user to which page they are on.
- The Landing page sets the theme for the layout of the entire website. There is an eye catching hero image, with one clear ‘call to action’, to prompt the user to the service offering provided by PCN.
- The ‘Our Services’ section and the ‘Testimonials Section’ set out to reassure the user that PCN is not like many of the other disingenuous , misleading companies within the fitness industry. The message is consistent that PCN is about real, sustainable and long term behavioural and physical changes.
- Mobile responsive alterations - The only main difference on mobile, is that one of the ‘Testimonials’ is left out. The reason for this is I didn’t want to overpower the mobile viewer with too much written content.
- I was considering placing the ‘Services’ page as the second page, as users read the website from left to right, and the key return for PCN, is for more users to sign up to a consultation. In the end I decided to place the ‘About’ page here as the user is encouraged to gain increased trust with the PCN brand before signing up.
- I decided to use a lot of imagery in this page, as I didn’t want to bore the user with lots of written content.
- Mobile responsive alterations - Two of the images(GAA and the Stacked image) are hidden from mobile view. In the absence of this images Icons from font awesome are introduced to add a sense of fun to the page.
- The Services page is the main call to action page. We are looking for B2C customers to sign up for a consultation, and B2B customers like sports teams or corporations, to contact us about our service offering. Users who are looking to sign up to a consultation are presented with a modal when they click the ‘sign up’ button, which then prompts them to enter their card details. B2B customers are relocated to the ‘Contact.html’ page upon clicking the ‘Contact PCN’ button.
- Mobile responsive alterations - N/A
- The reason for the Recipe page, is to give the user a taste of what content they can expect to gain access to, if they were to sign up to PCN. They are also included on the website, to act as proof that eating healthy food doesn’t have to be boring or tasteless.
- Mobile responsive alterations - the thumbnail images are removed for mobile view as they inpacted on the readability of the text.
- I followed Matt Rudge’s format for creating the Contact Form in the Resume Project as part of the ‘User Centric Frontend Development’ module.
- Simply a basic contact page that allows users to get in contact with PCN.
- Calorie Calculator – Implement some form of calculator that estimates the number of calories a person needs to consume each day. The user could then identify their calorie needs and simply created a surplus to gain weight or a deficit to lose weight.
- Blog – Create a blog page featuring topical nutritional information and also requests from users.
- Once i learn Javascript, i plan to make the contact form responsive.
- HTML5 - is the standard markup language for documents designed to be displayed in a web browser.
- CSS3 - Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
-
- Bootstrap was used to assist with the responsiveness and styling of the website.
-
- Google fonts were used to import the 'Oswald' font and the 'Open Sans' font into the style.css file which is used on all pages throughout the website.
-
- Font Awesome was used on throughout the website to add icons for aesthetic and UX purposes.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub is used to store the projects code after being pushed from Git.
-
- Balsamiq was used to create the wireframes during the design process.
I followed a past students testing matrix to design my own table to present my test results in a visually please manner. I created it in excel, and it outlines the various tests i made to ensure the website acted efficiently across various devices and browsers.
The Testing Matrix can be located here - View
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
- The Website was tested on Google Chrome,Internet Explorer, Microsoft Edge, Mozilla Firefox and Safari browsers.
- The website was viewed on a variety of devices such as Desktop, Large Monitor, Laptop, iPhone7, iPhone 8 & iPhoneX.
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
- Some colours with more than 6 alphanumeric colours don't appear on the old versions of Microsoft Edge and Internet Explorer.
- On the services page and the contact page, the footer creeps up on the page in large width viewing due to reduced amount of content on these pages.
Gitpod was used to develop my project. Here i could create code and complete some debugging. Gitpod allows you to run a preview of the website, but nothing here can be seen by the users. This is basically like a demo of what the website will look like without going live. The next step is to commit any significant work and push it to Github. Once in Github, i follow the steps below on how deploy my project. This is where the website goes 'live' and any users who have a link to my project were are to view the site.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the PatrickCoakley23/first-milestone-project
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- 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 PatrickCoakley23/first-milestone-project
-
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.
https://github.com/PatrickCoakley23/first-milestone-project.git -
Press Enter. Your local clone will be created.
-
The full screen hero image code came from this post on w3 schools
-
Bootsrap 4 - Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
-
The timeframe I used on the 'services.html' page was inspired by a YouTube tutorial by Online Tutorials
-
The PCN logo was created on https://monogramframes.com/
-
Shutterstock was the source for all the imagery used on the website.
-
Font Awesome was where i sourced every icon bar the 'Cork Gaa Crest' for the website.
-
Twinkl was used to source the Cork Gaa Crest used in the 'Testimonials section"
-
All content of the website was written by the developer.
-
General lines from Code Institutes Sample README were used in this README file, for example the 'Deployment' section and the 'Making a Clone' section.
-
My mentor, Precious Ijege was a great help. The three mentor sessions were invaluable. He explained every suggestion in a clear concise manner, and pointed out bugs i would never have seen.
-
My tutor, Cormac Lawlor was very supportive during the project. Being a past student himself, he was aware of certain issues i was facing and was always at hand to offer support.
-
Brian O' Grady and Matt Rudge's teaching of the 'Love Running', 'Whiskey Drop' and 'Resume' project's were a great aid in developing my website.
-