Bodelschwinger Hof

(Developer: Ana Runje)

Live webpage

Table of Content

1. Project Goals
   1. User Goals
   2. Site Owner Goals
2. User Experience
   1. Target Audience
   2. User Requrements and Expectations
   3. User Stories
3. Design
   1. Design Choices
   2. Colour
   3. Fonts
   4. Structure
   5. Wireframes
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Features
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. Accessibility
   4. Performance
   5. Device testing
   6. Browser compatibility
   7. Testing user stories
7. Bugs
8. Deployment
9. Credits
10. Acknowledgements

Project Goals

User Goals

• Finding a restaurant that offers a nice atmosphere and good food.
• See a full menu with clear pricing.
• Find information about the restaurant.
• Find the location of the restaurant

Site Owner Goals

• Increase in the number of customers.
• Promote the bussines.
• Provide a way for new and existing customers to contact the buissnes.
• Provide essential information about the bussines to customers.

User Experience

Target Audience

• People looking for a place to dine at
• People looking to order take away
• Groups of people looking for a place to carter a event
• Small to medium wedding parties

User Requrements and Expectations

• A simple and intuitive navigation system
• Quickly and easily find relevant information
• Links and functions that work as expected
• Good presentation and a visually appealing design regardless of screen size
• An easy way to contact the bussines
• Simple content that the user can skim read
• Accessibility

User Stories

First-time User

1. As a first time user, I want to know where the restaurant is lokated
2. As a first time user, I want to know the price range
3. As a first time user, I want to know more about the restaurant
4. As a first time user, I want to get a feel of what to expect at the restaurant

Returning User

5. As a returning user, I want to see the Sunday meal offer
6. As a returnign user, I want to know the opening times
7. As a returning user, I want to find a phone number to call for reservation
8. As a returning user, I want to see the menu
9. As a returning user, I want to leave some comment, suggestion or message to the staff
10. As a returning user, I want to find the restaurant on social media
11. As a returning user, I want to know who is preparing the food
12. As a returning user, I want to get directions to the restaurant

Site Owner

13. As the site owner, I want users to find news about upcoming events or changes in opening times
14. As the site owner, I want users to get to know the restaurant
15. As the site owner, I want the users to be able to contact us

Design

Design Choices

The webpage was designed with the feeling a customer might get while dining at the restaurant. It is calm, warm and inviting. Some of the imagery on the page has a round shape with a border to resemble food served on a plate.

Colour

For the colour sheme warm brown tones were chosen to match the images on the page and also the colour theme of the actual restaurant. To narrow down the colours I used Adobe Color. After deciding on the colour I tested them on WebAIM to make sure the contrast between them was right.

Fonts

Pinyon script with cursive as fallback was used for the logo to match the sign outside the restaurant.
Montserrat was used for the body and Roboto for headings. Both fonts are considered dyslexia friendly.

Structure

The page is structured in a well know, recognizable, user friendly, and easy to learn way. Upon arriving to the website the user sees a familiar type of navigation bar with the restaurant logo on the left side and the navigation links to the right. The website consists of five separate pages:

• A homepage with a sections for News and Sunday Meal Offers
• An about page with the About Us and Meet the Chef
• A menu page
• A image gallery with images and video showcasing the general feel of the restaurant
• A contact page with a contact form, a map and information about the bussines section

Wireframes

Home

About

Menu

Gallery

Contact

Technologies Used

Languages

• HTML
• CSS

Frameworks & Tools

• Bootstrap v5.0
• Git
• GitHub
• Gitpod
• Tinypng
• Paint.NET
• Balsamiq
• Google Fonts
• Adobe Color
• Font Awsome
• Favicon.io

Features

The page consists of five pages and fourteen features

Logo and Navigation Bar

• Featured on all five pages
• The navbar is fully responsive and changes to a toggler (hamburger menu) on smaller screens and includes links to the Homepage, About page, Menu page, Gallery and Contact us page
• It allows users to easily navigate the page
• The link for the page the user is currently on is highlighted

Carousel

• Introduces the user to the restaurant with a small three picture slide show
• Options for the user to navigate the slide show via back and forward arrows or indicators at the bottom

News

• Allowes the user to see upcoming events or any news about the restaurant
• User stories covered: 13

Meal-deal

• Allowes users to see what meal-deal is available for the upcoming Sunday
• User stories covered: 5

Footer

• Featured on all five pages
• Consists of three seperate sections: contact information, opening times, and social media links
• User stories covered: 1, 6, 7, 10, 15

About Us

• Gives a description of the restaurant and its facilities with a image of the front of the building on the right side
• User stories covered: 3, 14

Customer reviews

• Features a few reviews left by the restaurants customers on social media
• User stories covered: 3

Meet the Chef

• Features a short bio of the chef with an image of the chef on the left side
• User stories covered: 11

Menu

• Gives an overview of the menu in five sections: starters, main meals, kids meals, dessers, and wine.
• Each section of the menu is accompanied with an image of one of the items form the menu
• Features pricing
• User stories covered: 2, 8

Image Gallery

• Imagery of the restaurant arranged in a grid
• User stories covered: 4

Promo Video

• A YouTube video to promote the restaurant
• User stories covered: 4

Contact Form

• A way for user to provide feedback
• User stories covered: 9, 15

Map

• Shows the restaurant location on an embeded Google Map
• User stories covered: 1, 12

Info Box

• Provides the user with information about the restaurant including addres, phone number, email, and the name of the owner
• User stories covered: 7, 15

Validation

HTML Validation

The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with no errors no warnings to show.

Home

About

Menu

Gallery

Home

CSS Validation

The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. When validating the page as a whole, the validator shows some errors linked to Bootstrap v5.0. When validating just my own custom CSS it passes with no errors found and some warnings associated to using root variables.

whole page

style.css

Accessibility

The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.

Home

About

Menu

Gallery

Contact

Performance

Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website.

Home

About

Menu

Gallery

Contact

Performing tests on various devices

The website was tested on the following devices:

• Lenovo Yoga 2 Pro (both in pc and tablet mode)
• Honor 20 pro
• Xiaomi Redmi Note 7

In addition, the website was tested using Google Chrome Developer Tools Device Toggeling option for all available device options.

Browser compatability

The website was tested on the following browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Egde

Testing user stories

1. As a first time user, I want to know where the restaurant is lokated

Feature	Action	Expected Result	Actual Result
Map	Navigate to the Contact Us page, locate the Google Map	Locating a map showing the location of the restaurant	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the address of the restaurant	Works as expected

Screenshots

2. As a first time user, I want to know the price range

Feature	Action	Expected Result	Actual Result
Menu	Navigate to the Menu page	See prices on menu page	Works as expected

Screenshots

3. As a first time user, I want to know more about the restaurant

Feature	Action	Expected Result	Actual Result
About Us	Navigate to the About page and locate the About Us section	Find description of the restaurant	Works as expected
Customer reviews	Navigate to the About page, scroll down to What our guests say section	Read customer reviews	Works as expected

Screenshots

4. As a first time user, I want to get a feel of what to expect at the restaurant

Feature	Action	Expected Result	Actual Result
Gallery	Navigate to the Gallery page	Find pictures of the restaurant and food served there	Works as expected
Promo video	Navigate to the GAlelry page and scroll to the promo video	Watch promo video	Works as expected

Screenshots

5. As a returning user, I want to see the Sunday meal offer

Feature	Action	Expected Result	Actual Result
Meal-deal	On home page scroll down to the Sunday meal deal section	Find the meal-deal for the upcomming Sunday	Works as expected

Screenshots

6. As a returnign user, I want to know the opening times

Feature	Action	Expected Result	Actual Result
Footer - opening times section	On any page scroll to the footer	See opening times	Works as expected

Screenshots

7. As a returning user, I want to find a phone number to call for reservation

Feature	Action	Expected Result	Actual Result
Footer - contact information section	On any page scroll to the footer	See phone number	Works as expected
Info Box	Navigate to Contact Us page and locate the How to find us section	See phone number	Works as expected

Screenshots

8. As a returning user, I want to see the menu

Feature	Action	Expected Result	Actual Result
Menu	Navigate to the menu page	Read the menu	Works as expected

Screenshots

9. As a returning user, I want to leave some comment, suggestion or message to the staff

Feature	Action	Expected Result	Actual Result
Contact Form	Navigate to the Contact Us Page and locate the contact form, fill out and submit contact form	Data submited via contact form	Works as expectd

Screenshots

10. As a returning user, I want to find the restaurant on social media

Feature	Action	Expected Result	Actual Result
Footer - social media section	On any page scroll to the bottom	Click on social media links	Works as expected

Screenshots

11. As a returning user, I want to know who is preparing the food

Feature	Action	Expected Result	Actual Result
Meet the Chef	Navigate to the About page and scroll down to Meet the Chef section	Find brief bio of the Chef	Works as expected

Screenshots

12. As a returning user, I want to get directions to the restaurant

Feature	Action	Expected Result	Actual Result
Map	Navigate to the Contact Us page, locate the map and click on directions link	See directions to the restaurant on Goole Maps	Works as expected

Screenshots

13. As the site owner, I want users to find news about upcoming events or changes in opening times

Feature	Action	Expected Result	Actual Result
News	Scroll down on home page and locate news section	Find latest news	Works as expected

Screenshots

14. As the site owner, I want users to get to know the restaurant

Feature	Action	Expected Result	Actual Result
About Us	Navigate to About page and locate About Us section	See relevant information about the restaurant	Works as expected

Screenshots

15. As the site owner, I want the users to be able to contact us

Feature	Action	Expected Result	Actual Result
Contact Form	Navigate to the Contact Us Page and locate the contact form, fill out and submit contact form	Data submited via contact form	Works as expectd
Info Box	Navigate to Contact Us page and locate the How to find us section	Find the phone number	Works as expected
Footer - contact information section	On any page scroll down to the footer	Find the phone number	Works as expected

Screenshots

Bugs

Bug	Fix
Home page link stays highlighted when visiting another page	Change active atribute to the correct page
The user can submit a contact form input without a message	Add required attribute to message input field
Navbar divides into two rows on xs screen size	Add a media query to remove the right margin of the logo in the navbar on xs screen
Email overflows on xs screen size	Add a media query that makes the divs spread to 100% width on xs sreens to froce the content onto a seperate line
When viewed on tablets, the contact page has whitespace after the footer	Set min-height for body to 100vh

Deployment

The website was deployed using GitHub Pages by following these steps:

1. In the GitHub repository navigate to the Settings tab
2. On the left hand menu select Pages
3. For the source select Branch: master
4. After the webpage refreshes automaticaly you will se a ribbon on the top saying: "Your site is published at https://4n4ru.github.io/CI_MS1_BodelschwingherHof/"

You can for fork the repository by following these steps:

1. Go to the GitHub repository
2. Click on Fork button in upper right hand corner

You can clone the repository by following these steps:

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
4. Open Git Bash
5. Change the current working directory to the one where you want the cloned directory
6. Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY) 7.Press Enter to create your local clone.

Credits

Images not referenced below are owned by the developer.

Media

In order of apearance:

• carousel-1: Photo by Heather Gill on Unsplash
• news: Photo by Claudia Altamimi on Unsplash
• meal-deal: Photo by Sam Moqadam on Unsplash
• chef: Food photo created by freepik - www.freepik.com
• menu background: Background vector created by pikisuperstar - www.freepik.com
• starter Photo by Margarita Zueva on Unsplash
• main meal Photo by Keriliwi on Unsplash
• kids meal Photo by Sam Moqadam on Unsplash
• dessert Photo by Krisztina Papp on Unsplash
• wine Photo by Biljana Martinic on Unsplash
• salad: Photo by Sam Moqadam on Unsplash
• fish: Photo by Sam Moqadam on Unsplash
• chicken: Photo by Sam Moqadam on Unsplash
• 404 error image: Background vector created by freepik - www.freepik.com

Code

In order of apearance:

• The HTML for the responsive Navbar with toggler was taken from the Bootstrap v5.0 documentation code snippet and combined with their Navbar with Pills
• Carousel on index page was taken from Bootrap v5.0 documentation code snippet
• CSS code to avoid whitespace below footer was taken from a forum post on FreeCodeCamp
• 404 page was build using description on GitHub Docs

Acknowledgements

I would like to take the opportunity to thank:

• My mentor Mo Shami for his feedback, advice, guidance and support.
• My husband Jure Runje for his support, advice, help with testing, and for giving me some kids free time to work on my project.
• To the lovely people on the Code Institute Slack for providing peer code reviews.
• My parents who own the restaurant that inspired this website