"Lawendowe Pole"(en-"Lavender Field") is an existing small family run company producing the own recipe full natural ice cream and desserts with the main Café and two small ice cream shops located outside Kraków in local tourist places.
This website is built for Milestone Project 1( "Code Institute") with HTML5, CSS3 and Bootstrap framework. The main goal of this project is that users will find easily navigated,and well visual-designed website with all information about products, locations and all other services provided by the company.
- I want to intuitively navigate through the website(with the focus on mobile devices).
- I want to find information about the product and services the company offers.
- I want to find about the opening times in each location the product is offered.
- I want to be able to locate the Cafe and the remaining ice-cream shops.
- I want to know what facilities are available in each location (like parking, seat in/out, "is coffee available and other deserts?"; "can I pay with a card?").
- I want to view the current company "Menu".
- I want to find reviews about this company on social media.
- I want to find photos or videos of the places and products.
- I want to enjoy the design of the website and the content.
- I want to find contact information.
- I want to find directions to the Café and the remaining ice-cream shops.
- I want to find about current opening times.
- I want to see new images or videos of the places and product.
-
To organise the project work I used JIRA project management tool:
-
Colours used in the project were picked with the focus on 2 colours:
-
purple (which is the main colour for the brand) as "Lavender field"("Lawendowe Pole") is the name of the company and they use colours associated with their name.
-
turquoise as the company use this colour together with purple in the social media adverts and it looks well for companies associated with sweets, desserts and ice creams.
-
Adobe Color was used to create the colour palette
👇
:black_nib:
- The primary font used in this project is Open Sans with sans-serif as a fallback font. This font is elegant and modern. It offers an excellent reading experience.
- The secondary font used for this website is Libre Baskerville with sans-serif as a fallback font. It's a web font optimised for body text and used with Open Sans in modern web design.
- There is a logo image (provided by the owner of the company) appearing on each HTML page in the navigation bar and will be displayed through all devices (mobile, tablet and desktop).
- In the homepage, there is an image carousel with 3 photos of the product with the caption displayed on larger screens (images resized and optimised) for better user experience and website performance.
- There is also a separate Gallery page with images of the products and pictures from the Café and company ice cream shops (resized into square images and optimised)
👉 Wireframes for mobile, tablet and desktop
🔵 Header - with a navigation bar is located on the top of the pages (home, locations and gallery) to help the user easily navigate through the content with a box shadow effect for better visual experiences.
-
Logo brand located on the left side of the navigation bar on all pages with a homepage link for locations and gallery pages.
-
Navigation links are located:
- For desktop - next to the logo with a hover effect changing colours from #73185b (dark purple) to #d6d3c1 (Ecru White from a colour palette used for this website) to let know the visitor knows that the link is clickable.
- For mobile/tablet - a visitor will find a hamburger menu on the right side of navbar with navigation links collapse. Having the same hover effect.
-
Locations and social media links visible only on the desktop on the right side of the navigation bar with a hover effect same as to be found for menu links. In the Header we can find three icons:
- location icon - by clicking on this icon user is brought to google maps in a new tab where all 3 locations for the company (Café and the 2 remaining ice cream shops) will be displayed.
-
Facebook and Instagram icons linked to existing company accounts
🔵 Image carousel - with captions located under the navigation bar:
-
A visitor will find there three images presenting company products and basic information moving to the next automatically to the next slide after 5 seconds.
-
Carousel from bootstrap was used in this project to present the product for the visitor with professional images to attract new customers.
-
Captions start to be visible from medium screens and on bigger smartphones in landscape view for a better visual experience. Colour used for the headings on each image is light purple (#bf3b9c) from the palette used across this project with rgba background for the better reading experience.
🔵 Video as a gif - muted and looping with an added shadow effect to attract customers and trigger the desire for this product.
🔵 Contact Form - section on the homepage for filing in a "Form" for customers to be able to contact the company (booking, comments) with links to send mail and call the owners for more information.
🔵 Footer - with Facebook, Instagram and TripAdvisor links and copyright information.
- box-shadow was added for a visual experience.
🔵 Locations page - logo brand with an active link to go back to the homepage in the header and directions to all ice cream locations with facilities available on each one of them.
- an arrow to go back to the top of the page due to length to allow visitors to move easier through the website.
🔵 Gallery page - with 2 sections of product and places with an arrow on the bottom to allow visitors to go back to the top of the page.
⚪ - payment options to pre-ordered products for collections.
⚪ - Polish language version
⚪ - attach English menu.pdf to open in new tab
* HTML5
* CSS3
- Bootstrap v.4.5.2 - used for layouts, styling and custom components such as navigation bar or image carousel.
-
JIRA - project management tool
-
JPEG-OPTIMIZER - optimized the size of images used in this project
-
tinypng - optimized Mockup.png for README
-
Concepts - to create the first hand-drawn wireframe
-
Adobe Xd - for wireframe
-
Adobe Colour - for colour palette used in this project
-
Adobe Photoshop Express - To resize or crop the images for carousel in homepage and images in the gallery.
-
Google Fonts- to import 'Open Sans' and 'Libre Baskerville' fonts used through this project
-
Font Awesome - for social media links on the website and SVG used in wireframe
-
Visual Studio Code - used to write this README.md
-
GitPod - used for developing the website and commit the project to Github repository.
-
Github - used to host the project and deploy the live website through Git Pages.
-
Chrome Developer Tools - used to debug and test the website, and to ensure colour contrast
- Lighthouse - as a part of the chrome dev tool was used to improve the quality of the web page.
-
Favicon - to create a favicon for this Website
-
material.io - Facebook SVG used in my wireframe comes from material.io
-
zamar.com - to convert mp4 to webm as the fallback video file.
-
techsini - To generate website mock-up for README file.
- Testing website responsiveness on devices from 280px width- elements should not overlap each other ✅
- Css/Html validation ✅
- Website performance and best practise ✅
- Visual aspects of the website: fonts and colour contrast. ✅
- Functionality -all links on each page working, Contact Form and layout ✅
- User stories test ✅
- Home page- pdf
- 4 errors found and fixed
-
inline attribute- removed from video element
-
value on select - removed from the select element
-
type attribute - removed from textarea element
-
bad value - fixed telephone number spacing on a element for href attribute
- 1 warning for sections
- Locations page-pdf
-
1 error found and fixed
br tag - removed from the table
- Gallery page-pdf
- no errors found
| Screen size\Browser | Chrome | Opera | Edge | Firefox | Safari |
|---|---|---|---|---|---|
| Mobile | ✅ | ✅ | ✅ | ✅ | ✅ |
| Tablet | ✅ | ✅ | ✅ | ✅ | Not Tested |
| Desktop | ✅ | ✅ | ✅ | ✅ | ✅ |
The website was tested on a varied number of devices:
- Android - Samsung Galaxy S10 (screen size - 6.1-inch) on Chrome, Opera, Firefox and Microsoft Edge
- IOS - iPhone 7 (screen size - 4.7-inch) on Safari and Chrome
Surface Book in tablet view - Chrome, Opera, Firefox, Edge (screen size - 13.5- inch)
-
PC Windows (Windows 10):
- Surface Book on (screen size - 13.5-inch)
- Surface Book on the second monitor DELL U2419H(screen size - 24-inch)
Tested on Chrome, Opera, Firefox and Microsoft Edge
-
MacBook pro 13 :
- Tested on Safari and Chrome browser.
Also, friends and family were asked to test this website and I did not receive any information on noticed bugs in the feedback from them.
To improve and check performance for this website I used Lighthouse, which is part of Chrome Developer Tool
- Home Page Test:
- Locations Page Test:
- Gallery Page Test:
- By using Chrome Developer Tools colour contrast was tested:
-
On the homepage of this project right click on the pc mouse
-
Press - "Inspect"
-
Press - ctr+shift+c or "small box with an arrow" to inspect elements of the website.
-
Move the mouse cursor over elements to see under Accessibility->Contrast the result.
-
Follow the same steps for locations and gallery pages.
- All Html pages were tested and contrast was correct.
Homepage:
- Navigation bar
- In desktop view:
- Tested menu links: Home (underlined to inform the user on which currently page he is), About, Contact, Locations, Gallery and Menu ✅
- social media links:
- locations(to open Google maps in new tab with all 3 places) ✅
- Facebook and Instagram ✅
- In mobile and tablet view:
- Tested menu links: About, Contact, Locations, Gallery and Menu ✅
- Navbar-toggler button functionality ✅
- Image Carousel:
- In desktop and tablet view :
- Image view ✅
- Carousel controls next and prev ✅
- Image captions -displaying ✅
- In mobile view:
- Image view ✅
- Carousel controls next and prev ✅
- Image captions to not be displayed on the mobile portrait view ✅
- About section:
-
In desktop view:
- About text displayed on the left and video gif on the right side ✅
-
In mobile and tablet view:
- About text displaying above video gif ✅
-
No issues with the layout in About section
- Contact Form:
- All fields in the contact form are required to be filled in:
- Trying to send without name input (required is displayed) ✅
- After putting name try to send and info to fill the empty field in email box is showing. After typing only the text information about missing @ is displaying ✅
- Text area required after typing in a name and email (booking is pre-selected with an option to change for comments) ✅
- After filling in all required field press send and no issues recorded. ✅
- Links for email and phone in the contact section working ✅
- All fields in the contact form are required to be filled in:
- Footer: *Social links test ✅
Locations:
- Navigation bar
- In desktop view:
- By clicking the logo brand located on the left, the visitor is brought back to the homepage ✅
- Tested menu links: Home, About, Contact, Locations(underlined to inform the user on which currently page he is), Gallery and menu ✅
- social media links:
- locations(to open google maps in new tab with all 3 places) ✅
- Facebook and Instagram ✅
- In mobile and tablet view:
- By clicking the logo brand located on the left, the visitor is brought back to the homepage ✅
- Tested menu links: Home, About, Contact, Locations, Gallery and Menu ✅
- Navbar-toggler button functionality ✅
- Three Location sections:
- Get directions links tested ✅
- scroll back to the top of the page button (used due to lenght of this page) tested ✅
- For mobile and tablet view photo with directions is located above opening hours and facilities and in desktop view next to each other ✅
- Footer:
- Social links test ✅
Gallery:
- Navigation bar
- In desktop view:
- By clicking the logo brand located on the left, the visitor is brought back to the homepage ✅
- Tested menu links: Home, About, Contact, Locations, Gallery (underlined to inform the user on which currently page he is) and Menu ✅
- social media links:
- location(to open Google maps in new tab with all 3 places) ✅
- Facebook and Instagram ✅
- In mobile and tablet view:
- By clicking the logo brand located on the left, the visitor is brought back to the homepage ✅
- Tested menu links: About, Contact, Locations, Gallery and Menu ✅
- Navbar-toggler button functionality ✅
- Images layout:
- For mobiles - 1 photo in a row ✅
- For tablets - 2 photos in a row ✅
- For desktops - 4 photos in a row ✅ No layout issues ✅
- scroll back to the top of the page button (used due to length of this page) tested ✅
- Footer:
- Social links test ✅
- I want to intuitively navigate through the website(with the focus on mobile (looking for food-related places tend to happen on the route).
The website was designed with a Mobile-first approach. All Pages contain a Navigation Bar Menu to allow users to navigate through the content easily with the current page menu link underlined for more clarity. For longer Pages (Locations and Gallery) visitor will find "Back to the Top" button for better navigation experience.
- I want to find information about the product and services the company offers.
On the Homepage visitor will find Image carousel with captions to give information about the products. From the navigation bar on every page, a visitor will be able to be directed to About section where he can see information about company and testimonies from customers.
- I want to find about the opening times and in each location, the product is offered and a form of contact.
On all devices in the navigation menu visitor will find a link to Locations page where he/she can find about opening times for all three places the ice cream is sold. From the navigation bar on every page visitor will be able to be directed to Contact us section where he can find a contact form and links to company email and telephone.
- I want to be able to locate the Cafe and the remaining ice-cream shops.
On all devices in the navigation menu visitor will find a link to Locations page where he/she can find directions link icon-opening Google maps in a new tab with the exact location of place he/she is interested in going to. (Available on all pages).
Also on desktop view visitor will find on the right side of the navigation bar a location icon. After clicking on that link google maps with all three locations will be opened in a new tab. (This option will be available on all Pages)
- I want to know what facilities are available in each location (like parking, seat in/out, "is coffee available and other deserts?"; "can I pay with a card?").
A visitor will be able to find about the facilities on the Locations page.
- I want to view the current company "Menu".
On all devices in the navigation bar visitor will find a link to MENU opening in a new tab in a pdf file.
- I want to find reviews about this company on social media.
For all devices visitors will find social icons in the footer linked to existing social media accounts and trip advisor information about this place.
Additionally in desktop view on the right side of the navbar visitor will find social media links to Facebook and Instagram.
- I want to find photos or videos of the places and products.
On all devices in the navigation menu visitor will find a link to the Gallery page where he/she can find photos of the product and places the product is served.
Photos and other media are also available on "Lawendowe Pole " Facebook and Instagram accounts.
A muted video used as a gif will be available in the About section.
- I want to enjoy the design of the website and the content.
A visitor will find an easily navigated website, with an intuitive way to find the content. Colours, fonts and images and video used in this project were also chosen for a better visual experience.
- I want to find contact information.
- I want to find directions to the Café and the remaining ice-cream shops.
- I want to find about current opening times.
A returning visitor will still find information about opening times, contact details and also navigation directions to company ice cream places.
- I want to see new images or videos of the places and product.
A returning visitor will find new photos in gallery page and video gif updated upon owners request on the homepage.
On mobiles and tablets button "Back to Top" after clicking is staying in hover effect(colour change unless website refreshed)This bug doesn't have negative feedback from users who tested this website.
This project was created using the following steps:
- Open Github in the browser and sign in to my account.
- Click on Repositories
- Press New
- Choose Code Institute Temple
- Give Repository a name and description
- Press Create repository.
- Finally click on Gitpod button in the newly created repository to start working on this project.
This website was published using GitHub Pages by:
- Navigating to the GitHub Repository
- Under the name of this project, there is a navigation bar - > Click on Settings.
- Scroll down to the GitHub Pages Heading.
- Under the Source Choose *Branch: master
- Click the Save button.
- Click on the newly created link with the live page. (it can take a few minutes for the site to be published).
- Navigating to the GitHub Repository
- Click on Code green button.
- Under the Clone section, copy the URL from the HTTPS dialogue box.
- Use the IDE of choice to open the terminal.
- Use git clone command followed by the copied URL.
- A clone of the project will now be created locally on your machine.
-
Bootstrap library - used to create a responsive design, creat navbar, an image carousel with captions and form.
-
To learn and create the box-shadow effect for navbar and footer:
-
Used box-shadow for my video- Effect number 7:
-
To learn how to centre horizontally and vertically video
-
Business owner of "Lawendowe Pole"- Images
-
Unsplash - Images
-
Pixabay - Images and video used as a gif.
- My mentor, Maranatha Ilesanmi for advice, guidance and support on this project.
- Daisy Mc Girr(Code Institute student) for:
- webinar on Testing.
- Jim Lynx (Code Institute student) for:
- MS1 webinar
- Slack Community - for feedback on my project.
- My friends and family - for giving feedback on my project and testing this website.