The Mancunian Cafe Website

View the live website here

The Mancunian Cafe is a fictitious cafe based in the Northern Quarter of Manchester City Center. The cafe offers a variety of hot drinks, breakfast rolls, pastries, paninis, sandwiches, cakes and biscuits. This is the cafe's main marketing website which aims to promote the cafe's products to potential customers and persuade them to come and visit the cafe. The website is designed to be responsive and easy to navigate on a range of devices.

User Experience (UX)

User Stories

Key requirements of the website's users include:

To be able to navigate the website easily to find the content I am looking for
To be able to understand what makes the cafe unique and why I should want to eat there.
To be able to view the offers the cafe currently has on.
To be able to view the cafe's menu and each item's nutritional information.
To be able to find out where the cafe is located and what it's opening hours are.
To be able to find out what other customers who have visited the cafe thought of it.
To be able to contact the cafe to get answers to any questions I may have.
To be able to find the cafe's social media links.

Design

Colour Scheme

The three main colours used in the website are turquoise, white and grey.
These colours were chosen because the turquoise/grey contrasts with the white.

Typography

The three main fonts used throughout the website are Pacifico, Roboto and Lato. Pacifico was used in the cafe's logo, Roboto in the main headings, the jumbotron and navigation links, and Lato in the subheadings and paragraphs.
These fonts were chosen because they make the logo stand out and the main content easy to read.
Sans Serif is the fallback font which is used in the event that the specified font fails to import into the website correctly.

Imagery

The hero image was chosen because it gives the user the impression that the cafe has an vibrant atmosphere where they can come to socialise and enjoy something to eat and drink.
The menu item images were chosen because they give the impression that high quality food and drinks are served at the cafe.

Wireframes

Features

Existing Features

Brand Logo
- This familiarises users with the cafe's logo and is also a link which the user can access from any page to take them back to the home page.
Navigation links
- These enable users to access the different pages of the website so they can easily find the content they are looking for.
Hero image
- This provides users with an idea of the atmosphere in the cafe and details of the current offer.
Reasons to Eat With Us
- This enables users to read about what differentiates the cafe from its competitors.
Customer Testimonials Carousel
- This allows users to read three testimonials other customers have written reviewing their experience at the cafe.
Menu Cards
- These enable potential customers to find out what items are on the menu and view key information about each item such as an image of the item, it's price and icons to show whether it is gluten-free or vegan.
Nutritional Information Modal
- This allows users to view the nutritional information about each item on the menu.
Google Map and Address
- This provides users with a map displaying the cafe's location and the address.
Opening hours
- This enables users to find out when the cafe is open.
Telephone Number
- This allows users to access the cafe's telephone number.
Contact us form
- This enables users to contact the cafe about any questions they may have by completing the form.
Social Media links
- These provide users with links to the different social media platforms where the cafe has a presence.
Responsive Design
- Bootstrap grids and CSS media queries are used throughout the website to ensure that it is optimised for use on devices with a wide range of screen sizes.

Features Left to Implement

Link the contact us form up to a database
- Set up a database and link the contact us form to the database so that the cafe's employees can view the enquiries submitted by users.
Placing of orders for collection through the website
- Add an order form which makes it possible for customers to place orders which they are collecting from the cafe through the website.
Email sign-up
- Add an email sign-up form so users can sign up to a newsletter if they want to be informed about new products, services, offers and any other news about the organisation.

Technologies Used

Languages Used

HTML5:
- HTML5 was used for the sturcture of the webpages.
CSS3:
- CSS3 was used for the styling of the webpages.

Frameworks, Libraries & Programs Used

Bootstrap 4.4.1:
- Bootstrap was used for the jumbotron containing the hero image text, testimonials carousel, menu items cards, nutritional information modals contact us form. Bootstrap was also used for the grid which assists with the responsiveness of the website and for the styling.
Hover.css:
- Hover.css was used for the hover effects on the navbar links and social media icons.
Google Fonts:
- Google fonts was used to import the 'Lato', 'Pacifico' and 'Roboto" fonts into the style.css file which are used on all pages throughout the project.
Font Awesome:
- Font Awesome was used throughout the website to enhance the user experience by adding icons.
jQuery and Popper.js:
- Bootstrap uses jQuery and Popper.js to make the navbar responsive.
Gitpod
- Gitpod was used to write the code for this project and gitpod terminal was used to commit changes to Git and Push them to GitHub.
Git
- Git was the version control system used for this project.
GitHub:
- GitHub is used to store the project's code and any other required files.
Balsamiq
- Balsamiq was used to create the wireframes during the design phase of the project.

Testing

WC3 Validation

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure that the code used in the project was in compliance with the HTML5 and CSS3 standards and that there were no syntax errors.

Testing User Stories from User Experience (UX) Section

To be able to navigate the website easily to find the content I am looking for.
- The navigation bar can be easily accessed in the header of each page.
- It is clean and easy to read and contains the cafe's logo and the navigation links to the other pages of the website.
- Each of the navigation links clearly communicates to the user what page it will take them to.
- The cafe logo is also a link which takes the user back to the home page.
- The website is structured in a logical way with the offer information, reasons to eat at the cafe and testimonials on the home page, and the menu, location information and contact form each on their own pages.
To be able to understand what makes the cafe unique and why I should want to eat there.
- The why eat with us section is clearly highlighted on the home page.
- Here there is information on what differentiates the cafe from its comptitiors.
To be able to view the offers the cafe currently has on.
- The hero image is clearly highlighted on the home page.
- This contains information about the offer the cafe currently has on.
To be able to view the cafe's menu and each item's nutritional information.
- The menu page is clearly highlighted in the navigation bar.
- Here there are cards containing key information about each item on the menu including an image of the item, it's price and icons to show whether the item is gluten-free or vegan.
- When the user clicks on the image of a menu item, a modal opens which contains information about the item's nutritional information.
To be able to find out where the cafe is located and what it's opening hours are.
- The location page is clearly highlighted in the navigation bar.
- Here there is a google map displaying the location of the cafe and the cafe's address and opening hours.
To be able to find out what other customers who have visited the cafe thought of it.
- The testimonials section is clearly highlighted on the home page.
- This contains three testimonials other customers have written reviewing their experience at the cafe.
To be able to contact the cafe to get answers to any questions I may have.
- The contact us page is clearly highlighted in the navigation bar.
- Here there is a form which the user can complete to get in touch with the cafe.
To be able to find the cafe's social media links.
- The social media icons are clearly highlighted in the footer of each page.
- Each of these provides a link to the relevant social media platform.

Manual Testing

Details of the manual testing carried out can be viewed here.

Further Testing

The Website was tested on a variety of different web browsers including Google Chrome, Microsoft Edge and Safari.
The Website was also viewed on a number of different devices with a range of screen widths including an iMac, MacBook, iPad and iPhone.
Family and friends were asked to review the site and documentation and identify any bugs or other issues that were affecting the user experience.

Fixed Bugs

Navbar links were wrapping onto a second line on medium sized screens.
- Changed size at which collapsed navbar displays to medium sized screens and below.
Hover effects were displaying in collapsed navbar.
- This was fixed by making the background colour of the relevant css class to transparent and setting it to white only for large screens and above.
Carousel height changes if the number of lines of text in each testimonial changes.
- Used media queries to set minimum height for carousel paragraphs based on the largest number of lines used across all three testimonials.
Items not centrally aligning in parent columns
- Fixed error in code.
Part of the menu item images were getting cut off when columns were very wide.
- Restricted the maximum width of the menu item cards to 350px and centralised them within their parent container.
Type of enquiry dropdown text was appearing in a different color to the rest of the form.
- Added a css class to apply custom styling to whole form.
Menu cards were appearing 3 items per row rather than 4 on extra large screens.
- Fixed an error in the code.
Nutritional key items were not centralising properley on mobiles.
- Removed the right margin from the vegan icon.

Known Bugs

Carousel height changes on devices below 288px if the number of lines of text in each testimonial changes.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

Log in to GitHub and click on the relelavant GitHub Repository.
Click on the "Settings" button at the top of the repository.
Scroll down to the "GitHub Pages" section.
In the source section, click the branch dropdown and select "master".
Click save and wait for the page to refresh.
Scroll back down to the "Github Pages" section and locate the link to the published site.

More information about deploying a website to GitHub Pages is available here.

Forking the GitHub Repository

The GitHub Repository can be forked using the following steps:

Log in to GitHub and locate the project's GitHub Repository.
At the top-right of the repository, click the "Fork" Button.

More information about forking a GitHub repository is available here.

Making a Local Clone

A local clone of the project can be created using the following steps:

Log in to GitHub and locate the project's GitHub Repository.
Under the repository name, click the "Code" button.
To clone the repository using HTTPS, under "Clone with HTTPS", click the clipboard button to copy the repository URL. To clone using SSH click "Use SSH" and then click the clipboard button.
Open Git Bash
Change the current working directory to the location where you want to store the cloned repository.
Type git clone and then paste the URL you copied in Step 3.

$ git clone https://github.com/jonathan-odonnell/milestone-project-1.git

Press enter to create your clone.

$ git clone https://github.com/jonathan-odonnell/milestone-project-1.git
Cloning into 'milestone-project-1'...
remote: Enumerating objects: 240, done.
remote: Counting objects: 100% (240/240), done.
remote: Compressing objects: 100% (151/151), done.
remote: Total 639 (delta 132), reused 178 (delta 72), pack-reused 399
Receiving objects: 100% (639/639), 22.71 MiB | 5.33 MiB/s, done.
Resolving deltas: 100% (322/322), done.

More information about making a local clone of a GitHub repository is available here.

Credits

Code

Code for the navbar came from bootstrap.
Code for the navbar toggler icon colour (.navbar-dark .navbar-toggler-icon class) was obtained by viewing the bootsrap css for the toggler and adapting it to make it white.
Code for navigation link underline colour (.hvr-underline-from-left:after class) was obtained by viewing the hover.css underline from left css code and adapting it to make the underline transparent or white depending on the screen size.
Code for active navigation link underline (.active class) was obtained by viewing the hover.css underline from left css code and adapting it to make the underline white and appear permanently rather than only when hovered over.
Code for the jumbotron came from Bootstrap.
Code for the testimonials caurosel came from Bootstrap.
Code for the line after the testimonial reviewer's name (.blockquote-footer::after class) was obtained by looking at the bootstrap css for the line before the reviewer's name and adapting it to add a line after the reviewer's name.
Code for the menu item cards came from Bootstrap.
Code for the nutritional information modals came from Bootstrap.
Code for the google map came from Google.
Code for vertically aligning content in the center of the column came from this Stack Overflow post.
Code for the form came from Bootstrap.
Code for the select menu to select and disable first option came from this Stack Overflow post.

Content

Fair Trade Coffee section of the home page was adapted from this page on the Fair Trade Foundation website.
Lucy testimonial was adapted from this Trustpilot post.
Nutritional information was from Cafe Nero's coffee menu, all-day breakfast menu, panini and sandwich menu, cakes and muffins menu and snacks menu, and Costa Coffee's menu.
Contact us text was adapted from the Avanti West Coast Contact Us page.
The information in the Github Pages section of the readme was adapted from the GitHub configuring a publishing source for your GitHub Pages site documentation.
The information in the Forking a Github Repository section of the readme was adapted from the GitHub forking a repository documentation.
The information in the Making a Clone section of the readme was adapted from the GitHub cloning a repository documentation.
All other content was written by the developer.

Media

The hero image was from Unsplash.
The gluten-free was from Needpix.
The vegan icon was from Wikipedia.
The cappuccino menu image was from Unsplash.
The latte menu image was from Unsplash.
The caramel latte menu image was from Unsplash.
The flat white menu image was from Unsplash.
The mocha menu image was from Unsplash.
The americano menu image was from Unsplash.
The breakfast tea menu image was from Unsplash.
The herbal tea menu image was from Unsplash.
The croissant menu image was from Unsplash.
The pain au chocolat was from Pixabay.
The bacon roll menu image was from Unsplash.
The egg, bacon and sauage panini menu image was from Unsplash.
The chicken and pesto menu image was from Unsplash.
The vegan meatball panini menu image was from AnyRgb.
The chicken and salad sandwich menu image was from Unsplash.
The tuna and salad sandwich menu image was from Unsplash.
The caramel shortbread menu image was from Pikist.
The chocolate brownie menu image was from Piqsels.
The flapjack menu image was from Unsplash.
The chocolate chip cookie menu image was from Unsplash.

Acknowledgements

I received inspiration for this project from Avanti West Coast, Tim Hortons, Cafe Nero, Costa Coffee and Axe and Cleaver.

code-institute-submissions / milestone-project-98 Goto Github PK

milestone-project-98's Introduction