Vikki Sponge Patisserie is a bakery and cafe providing fresh cakes and drinks available for purchase to eat in the café or takeaway. The bakery also provides a range of celebration cakes available to order and a custom cake service.
The website is designed to be a responsive website that can be accessed and easily viewed on a range of screen sizes. The sites primary audience will be customers interested in learning more about the bakery before visiting or making an enquiry about making an order. It will provide information about the business and the variety of products available for purchase.
The deployed website can be found here
- User Experience (UX)
- Features
- Design
- Technologies Used
- Testing
- Deployment and Local Development
- Credits
As a customer I would like:
- To learn about the bakery and cafe.
- To find out what kind of products and services are provided.
- To find information about the location of the bakery.
- To be able to contact the bakery.
- To view social media pages.
- To be able to clearly view the website on any device.
As the business owner I would like:
- To promote the bakery as a modern business providing high quality products.
- To display a variety of products regularly available for purchase at the bakery.
- To display examples of custom cakes available to order.
- To provide information about what services are provided.
- To provide information about the location of the bakery.
- To provide means of contact for customers to make enquiries.
- To provide links to the businesses social media pages.
- For the website to be accessible and easily viewed on any device.
The website has four pages (a 'Home' page, a 'Gallery' page, a 'Contact Us' page and a 'Find Us' page) which are all easily accessed via the navigation menu.
All pages feature:
- A responsive header with:
- A logo which is a link to the 'Home' page allowing users to easily navigate to the 'Home' page from any other page.
- The website cover text giving users a brief description of and promoting what the business offers. This is removed on screens up to 600px wide to avoid a cluttered appearance.
- The navigation menu with links to each page which allows users to easily navigate from page to page across all devices without having to navigate backwards to previously visited pages.
- A different background image for each page to provide visual interest that is relevant to the page content. The background images are responsive to screen width to ensure the focal point is centred and the image fits well on all screen sizes.
- A footer with:
- A responsive form used to sign up to a newsletter containing input fields in which the user is required to enter their name and email address in order to submit the form. The user submits this information using the 'sign up' submit button. Signing up to a newsletter allows the business to provide its customers with any news, updates or special offers.
- Social media icon links to Facebook, Twitter and Instagram which open in a new browser tab, allowing customers to view and participate in any activity on social media platforms.
The 'Home' page features:
- Information about the bakery and café, briefly detailing the services available to customers in store and information about the custom cake service provided.
- A review section displaying customer 5 star ratings using star icons and their review of the bakery.
The 'Gallery' page features:
- Images of a selection of products available to purchase at the bakery and examples of custom celebration cakes created for previous customers. These images promote the products available at the bakery and give the user an idea of what is offered.
- An embedded YouTube video of a celebration cake being decorated as a demonstration of the skills the bakers at the company possess.
The 'Contact Us' page features:
- Different means of contacting the bakery giving the users the choice of different options.
- Telephone number and email address for the bakery.
- A contact form containing:
- A text input fields in which the user is required to enter their name in order to submit the form.
- An email input field in which the user is required to enter their email address in order to submit the form.
- A telephone input for the user to enter their telephone number.
- A dropdown input for the user to select an option for what type of event they require a cake for if applicable.
- A date input field for the user to enter a date they would require a cake.
- A text area input field in which the user is required to enter their message to the bakery in order to submit the form.
- The user submits the form using the submit button located under the message input field.
The 'Find Us' page features:
- The address of the bakery to inform users of the business location.
- The open times of the bakery to inform users of the business hours.
- A google map iframe to allow users to more easily find the bakery.
In addition to the pages for the main content of the website, a custom 404 error page and two thank you message pages were also created.
- The 404 error page informs the user that an error has occurred when the page they intended to view cannot be reached.
- On successful submission of the contact form a page containing a message thanking the user for contacting the business is displayed.
- On successful submission of the newsletter sign up form a page containing a message thanking the user for signing up to the newsletter is displayed.
- An online ordering service allowing users to order and pay for cakes online to be collected from the bakery or delivered.
The website comprises four pages, all of which feature the header at the top of the page and the footer at the bottom of the page.
-
The header is fully responsive, the position of the elements is adjusted depending on screen size.
- For screens over 992px wide the logo and cover text are displayed on the top left of the screen, the navigation menu is displayed across the whole width at the top of the page with the links displayed horizontally on the right, with the background image also displayed across the whole width of the page below the navigation menu.
- For screens up to 992px wide the logo and cover text container is displayed at the top, across the whole width of the page with the text horizontally centred. The navigation menu is displayed immediately below, across the whole width of the page, with the navigation links horizontally centred. The background image is displayed below the navigation menu, across the whole width of the page.
- For screens up to 600px wide the logo and cover text are displayed as for screens up to 992px. The navigation menu displayed below across the whole width of the page with the navigation links stacked and horizontally centred. The background image is displayed below the navigation menu as for screens up to 992px wide.
- For visual feedback, the navigation link for the current page and any link the cursor is positioned over is displayed in a different font with an underline.
-
The footer is fully responsive and includes the newsletter sign up form displayed horizontally centred with the container displayed across the whole width of the page, and the social media links displayed as icons positioned horizontally in a bar below the newsletter sign up form.
- The height of the newsletter container adjusts to ensure the newsletter form is always displayed within the boundaries of the container and the newsletter inputs respond to screen width to remain fully displayed on the page.
- The social media links remain displayed horizontally in a row with the space between the links adjusting dependant on screen width to maintain balance on the page.
-
The content of the 'Home' page is displayed in columns on screens over 992px wide. Information about the business is displayed in two columns with an accompanying image below each section of text on screens over 992px wide, below this the reviews are displayed in three columns. On screens up to 992px wide the content is displayed stacked vertically.
-
The photos on the 'Gallery' page are displayed in a responsive column format to ensure appropriate image size and pleasing layout. On screens over 992px wide the photos are displayed in four columns, on screens up to 992px wide the photos are displayed in three columns, on screens up to 768px wide the photos are displayed in two columns and on screens up to 600px wide the photos are displayed in one column. The video is positioned centrally below the photo gallery and the size of the video is responsive to screen width to ensure the video is an appropriate size for viewing and is not larger than the viewport.
-
The content of the 'Contact Us' page is displayed with headings positioned centrally on the page and the contact information and contact form displayed in a responsive column format below for consistency in style. On screens over 992px wide two columns are displayed and screens up to 992px the content is stacked to ensure appropriate sizing of the elements for good usability.
-
The content of the 'Find Us' page is displayed in the same style as the 'Contact Us' page for consistency in style. The heading is positioned centrally with the image and information displayed below in two columns on screens over 992px wide and stacked on screens up to 992px wide. Below the this a google map is embedded which is displayed across the whole width of the page.
-
The content of the 404 page and the thank you pages is includes a header and a short sentence aligned in the centre of the page. These pages have a clean and simple design to give the user the necessary information quickly and without distraction. The header and footer are present on these pages enabling the user to navigate to any part of the website with ease.
The colour scheme was chosen to complement the colours in the images, frame the pages of the website and provide contrast for good readability of the information. The colour palette was created using Coolors.
Google Fonts was used to add the following fonts:
- 'Trirong' is used for headings and to provide visual contrast for navigation links when in use.
- 'Open sans' is used for the body text of the site, this is a clean and easy to read font.
- 'Sans serif' is used as a fallback font in the event the font cannot be imported into the site correctly.
Fontjoy was used to choose fonts that have good visual contrast.
The images used in the website were chosen to reflect the content of the pages and the information they accompany. They are intended to promote the products and services provided by the business and entice users to become customers.
The 'Gallery' page images were selected for the close up format and the dark background of the images to ensure the focus is on the products and provide consistent style in the gallery. These images are displayed with a ratio of 1:1 to provide a clean layout across all sizes of device.
Icons were used as visual indicators for the social media links, star ratings and contact details.
All icons were sourced from Font Awesome
HTML - to create the structure of the website.
CSS - to add style to the website.
Chrome DevTools - used to help test features and for debugging.
Google Fonts - a fonts library.
Font Awesome - for iconography used on the website.
Git - for version control.
GitHub - to create and store the project repository.
GitPod - development hosting platform used to create the website.
Balsamiq - used to create Wireframes for the layout of the pages.
Coolors - used to create the colour palette.
Pexels - used to source images.
Unsplash - used to source images.
Rawpixel - used to source images.
Microsoft Photos - used to edit images.
CloudConvert - used to convert images to webp format.
Tiny PNG - used to compress images.
Am I Responsive - To view the website on a range of devices and create the mock-up screenshot image.
The W3C Markup Validation Service - Used to validate HTML files.
The W3C CSS Validation Service - Used to validate the CSS file.
PageSpeed Insights - Used to generate lighthouse report for 404 error page as lighthouse was unable to load the page when used in Chrome Developer Tools.
Prettier.io - Used to format code.
Chrome DevTools was frequently utilised in the development of the website to manipulate and test features as they were added to the project, to test responsiveness and for debugging purposes.
See Functionality Testing Document
The website was tested for functionality on different browsers (Chrome, Firefox and Edge) and found to be fully functional on them all.
The W3C validator service was used to validate the HTML on all pages of the website. All errors and warnings flagged by the validator service were addressed and the pages were resubmitted for validation.
'Home' page initial validation report
'Home' page final validation report
Fixes implemented:
- Used
<div>tag to surround social media links instead of<section>tag because a heading is not used. This change was implemented on all pages.
'Gallery' page initial validation report
'Gallery' page final validation report
Fixes implemented:
- Added an identifying heading to the photo gallery section.
- Removed the frameborder attribute on the video iframe HTML element.
'Contact Us' page initial validation report
'Contact Us' page final validation report
Fixes implemented:
- Replaced contact details aria-labels with title HTML attributes.
- Changed input id and name HTML attributes to avoid duplicates.
- Removed contact form date input placeholder.
'Find Us' page initial validation report
'Find Us' page final validation report
Fixes implemented:
Removed duplicate id attribute.
Replaced Google maps <section> tag with <div> tag because a heading is not used.
404 Error page validation report
Contact Thank You page validation report
Newsletter Thank You page validation report
The W3C validator service was used to validate the CSS in the stylesheet. All errors and warnings flagged by the validator service were addressed and the file was resubmitted for validation.
Fixes Implemented:
- Adjusted format of the value used for aspect-ratio because "1" is not a valid aspect-ratio value.
I frequently used Lighthouse in the Chrome Developer Tools to allow me to test the performance, accessibility, best practices and SEO of the website during the development of the website. Images were converted to webp format as suggested in a Lighthouse report performed after implementing the photo gallery feature and compressed to improve performance.
Final Lighthouse reports are as follows:
- When the browser font-size was increased the logo and cover text were overlapping and unable to be read proving an accessibility issue. The problem was fixed by moving the html cover text elements to the same container as the logo which resulted in a clean and readable display of the text when the browser font-size was increased.
- When the browser font-size was increased the newsletter sign up form exceeded the edges of its container. This issue was fixed by making the height on the container a minimum height value.
- When the 'Gallery' page was viewed on a larger desktop screen size, the size if the video exceeded the screen size. This issue was fixed by setting the width of the video to 50% of the page width on larger screens to enable the video fully visible on the page.
- When the navigation links were hovered over the changing font caused layout shift to occur. This issue was fixed by setting a definitive height and width for each of the links.
- When form input fields were clicked on the focus style rule transition from a 1px border to a 2px border caused layout shift to occur. This issue was fixed by setting a definitive height for the input fields.
- Elements in columns that were intended to be displayed next to each other at the same height on the page were displayed at different heights on the page. This issue was fixed by utilising a flex container and aligning elements at the bottom of the container to ensure desired positioning.
- Form input fields were given a white background colour to ensure consistency as the select 'event type' input displayed with a grey background when viewed using Firefox.
- When submitting the contact and newsletter sign up forms a 502 bad gateway error was received. The html initially used for the forms was
<form action="https://formdump.codeinstitute.net/" method="post" class="sign-up-form">. Howeverhttps://formdump.codeinstitute.net/was not functioning as expected. The solution used was to change the contact form html to<form action="contact-thank-you.html" method="GET" class="contact-form">and the newsletter html to<form action="newsletter-thank-you.html" method="GET" class="sign-up-form">. This solution sends the user to a webpage thanking them for contacting the business or signing up for the newsletter when the respective form is successfully submitted. However the attributemethod="GET"results in the inputted information being sent in the URL which is not the preferred method as this can present information security issues.
- Generating Lighthouse reports to test the performance, accessibility, best practices and SEO of the website highlighted that the images served could be more appropriately sized to save cellular data and improve loading times on mobile devices.
The site was deployed to GitHub pages.
The steps to deploy are as follows:
- Log in (or sign up) to GitHub.
- Go to the repository for this project (https://github.com/VictoriaParkes/MS1-Vikki-Sponge-Patisserie).
- In the GitHub repository, navigate to the 'Settings' tab.
- From the 'Code and automation' section of the menu on the left, select 'Pages'.
- In the 'Build and deployment' section, under the heading 'Source' select 'Deploy from a branch' from the dropdown menu.
- Under the heading 'Branch', select 'main' from the branch selection dropdown menu and '/root' from the 'Select folder' dropdown menu.
- Click save, the page will be automatically refreshed and a message reading 'GitHub Pages source saved.' will be displayed to confirm successful deployment.
- The link to the live site will be displayed at the top of the 'GitHub Pages' page once deployment has completed and can be used to access the live website.
The live link can be found here - Vikki Sponge Patisserie
The steps to fork the repository are as follows:
- Log in to GitHub.
- Go to the repository for this project (https://github.com/VictoriaParkes/MS1-Vikki-Sponge-Patisserie).
- In the top-right corner of the page, click 'Fork'.
- Under 'Owner', select an owner for the repository from the dropdown menu.
- Optionally, in the "Description" field, type a description of your fork.
- To copy the main branch only, select the 'Copy the main branch only' check box. If you do not select this option, all branches will be copied into the new fork.
- Click 'Create fork'
- Log-in to GitHub.com, navigate to your fork of the repository.
- Above the list of files, click Code.
- Copy the URL for the repository.
- To clone the repository using HTTPS, under "Clone with HTTPS", click the 'Copy' icon.
- To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click the 'Copy' icon.
- To clone a repository using GitHub CLI, click Use GitHub CLI, then click the 'Copy' icon.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied earlier.
- Press Enter. Your local clone will be created.
For more details about forking and cloning a repository, please refer to GitHub documentation.
W3 Schools and lessons from Code Institute's Full Stack Developer Course were frequently referred to in the development of this website. Code for the header, footer and gallery was sourced from the 'Love-Running' project.
The 404 error page was created using GitHub documentation.
The README.md file was created using a markdown cheat sheet as reference.
The content of the website was written by Victoria Parkes.
The local development section of this document was written using GitHub documentation.
All icons were sourced from Font Awesome.
Photographs were sourced from:
The decorative element was sourced from Rawpixel.
I would like to thank Brian Macharia, my Code Institute mentor, for his helpful feedback and advice.