The Rupera Vineyard website will provide information about what visitors can do at the vineyard, the vineyard history, technical information and a will provide ways for visitors to get in touch. The website visitors will be able to request to book onto any events, tours, tastings or a table by filling in the contact form provided.
The site can be accessed by this link
- As a first time visitor, I want to easily understand from the website what I can do at the vineyard, so that I can decide whether to visit.
- As a first time visitor, I want to be able to easily navigate through the website to find key information to help my plan my trip to the vineyard.
- As a first time visitor, I want to be able to contact the vineyard and book one of the activities described by the website.
- As a first time visitor, I want to see photographs of the vineyard and facilities to reassure me and encourage me to visit.
- As a returning visitor, I want to be able to find updated information about upcoming events .
- As a returning visitor, I want to see any changes to the operating hours and café offering.
- As a returning visitor, I want continue to be able to contact the vineyard as and when I need to.
- As a frequent user, I want to find social media links so I can follow the vineyards progress and news.
- As a frequent user, I want to see if there are any changes to the weekly events held at the vineyard.
-
- Positioned at the top of the page.
- Contains logo of the company on the left side.
- Contains navigation links on the right side:
- Home -leads to the home page where users can find out what they can do at the vineyard.
- Vineyard - leads to the vineyard page which has information specific to the vineyard and grounds. It provides technical information about the grapes and wine produced, as well as information about management practices. At the bottom of the page, visitors are given the option to learn more by attending a wine tasting or a tour.
- Café - leads to the café page. The café is where most activities take place on the vineyard so this is expressed. Information is then provided about what visitors can do at the café, followed by a gallery to show the atmosphere and help visitors decide if they would like to visit.
- Events - Leads to the events page. This is split into an 'Upcoming Events' section and a 'Weekly Events' section, which is the same as shown on the home page, to avoid having to flick between pages. This page gives up to date information and timings of events.
- Contact Us- Leads to the contact us page. This page contains a contact form for people to easily enquire about bookings or anything else. It also provides alternative methods of contacting the vineyard.
- The links have an animated hover effect.
- The navigation is clear and easy to understand for the user.
- The navigation bar is responsive on different computer monitor sizes, on tabets and on mobile phones.
- The nav bar is split into two lines on smaller desktops, one contains the logo and the other contains centred nav links.
-
On tablets:
- Navigation bar returns to being on one line, logo is positioned on the left and a hamburger menu is implemented and positioned on the right.
- When the hamburger menu is clicked, there is dropdown menu with the links in the same order, positioned on the left of the screen.
-
On mobile devices:
- Navigation bar has the logo in the center and a hamburger menu implemented on the right side of the navigation bar.
- When the hamburger menu is clicked, there is dropdown menu with the links in the same order, positioned on the left of the screen.
-
- Represents:
- The main idea of the company.
- Reasons to visit the vineyard.
- Regular activity and events at the vineyard
- Gives a feeling of the atmosphere and personality of the vineyard.
- Represents:
-
- Hero section has a background image that grows when the page is loaded.
- Hero section has a box positioned on top of it:
- Welcomes the visitor to the site.
- Emphasises the quality of the wine by mentioning awards.
- Expresses the care that's but into the wine - hinting at company ethos.
-
- Has a heading drawing attention to wide range of activity.
- Contains a carousel with images and captions for major aspects of the vineyard.
- Explains how visitors can join in with the above activities, providing link to contact page.
-
- Highlights the events held every week at the vineyard.
- Images show previous occurrences of the event for reference and for visitors to decide if it appeals to them.
-
- Fixed at the bottom right hand corner of the page to allow users to easily return to the top of the page. This has been used instead of having a fixed navbar, to improve user experience.
-
- Footer contains social media links that open in a new tab.
- Footer contains social media links that open in a new tab.
-
- A page for the wine enthusiasts and those who would like to learn.
- This page has a footer and 'return-to-top' button the same as the home page.
-
- Has a hero image showing a view down the rows
- A heading is positioned on top of the image encouraging visitor to 'look down the rows'.
-
- This section is designed to provide visitors some background and technical information about the vineyard and process of producing the wine.
- The first block of text describes the vineyard and grounds in general and describes a brief history.
- 'Our Grapes' talks in more depth about the varieties of grapes planted and some of their characteristics. There are two images to accompany this text.
- 'Our wines' provides similar information but describes the wines specifically.
-
- Encourages those who are interested in the information above to join a tour or tasting to gain more in depth information.
- Contains a section on the tour and a section on the tasting with a summary of what's included, price, and a link to book.
-
- A page for those looking for a place to relax or meet friends.
- This page has a footer and 'return-to-top' button the same as the home page.
-
- Has a hero image showing an attractive coffee. This helps identify the page and, makes the café appealing.
-
- Titled as 'the happy hub of our vineyard' to highlight that this is where most activities take place.
- Describes the atmosphere, what meals are served and the wide selection of cakes available, under clear headings.
-
- A collection of images to give visitors an idea of the food served, the atmosphere and previous events.
-
- A page providing details of upcoming events and weekly events.
- This page has a footer and 'return-to-top' button the same as the home page.
-
- Displayed chronologically on a timeline so the soonest event is displayed first.
- A brief description of each event is provided and details of times are also mentioned.
-
- Lists the events which are held every week.
- Similar content to on the home page but with more details of timings and location.
-
- A page providing details of how to get in touch and make a booking
- Also displays opening hours.
- This page has a footer button the same as the home page but there isn't enough content to require a 'return-to-top' button..
-
- This contains a form with fields to be filled in which allows the visitor to easily contact the vineyard.
- The form has required fields to ensure enquiries can be responded to.
- On completion of the form, user is redirected to a 'thank you' page.
- The background image displays another aspect of the vineyard.
-
- Lists opening hours, and the contact details for the vineyard to accommodate those who would like a more in-depth conversation or a faster response.
-
- Visitor is redirected to this page on completion of the contact form.
- This acts as confirmation that a message has been sent.
- It will automatically direct the user to the main page in 10 seconds.
- HTML was used as the foundation of the site.
- CSS - was used to add the styles and layout of the site.
- CSS Flexbox - was used to arrange items simmetrically on the pages.
- Bootstrap 4 was used for styling of navbar and carousel on home page.
- Balsamiq was used to make wireframes for the website.
- VSCode was used as the main tool to write and edit code.
- Git was used for the version control of the website.
- GitHub was used to host the code of the website.
- GitHub Pages was used to deploy my project
-
Purple and black were the main colours used to portray the luxury and quality of the vineyard. Purple is also the colour of some grapes so thought this fitted well with the theme of the website. Black also makes the images stand out. Hints of gold are used to highlight buttons and links, as it contrasts well with the darker colours.
-
Black and purple were used in blocks to indicate different sections of the website. This helps users navigate the website.
- 'Cormorant Garamond' Google Font was used throughout the website as it is clear so improves readability but also has 'classy' connotations.
- Home Page. Mobile Screen
- Vineyard Page. Mobile Screen
- Cafe Page. Mobile Screen
- Events Page. Mobile Screen
- Contact Us Page. Mobile Screen
- Home Page. Tablet Screen
- Vineyard Page. Tablet Screen
- Cafe Page. Tablet Screen
- Events Page. Tablet Screen
- Contact Us Page. Tablet Screen
- Home Page. Desktop Screen
- Vineyard Page. Desktop Screen
- Cafe Page. Desktop Screen
- Events Page. Desktop Screen
- Contact Us Page. Desktop Screen
-
- I tested this website on three browsers, Chrome, Edge and Safari and found that each displayed the website as intended and all links and images appeared and worked as expected. Please see the results of browser compatability testing here.
- See screenshots from Chrome testing below:
- See screenshots from Edge testing below:
- See screenshots from firefox testing below:
- See screenshots from Safari testing below:
-
- I have tested this website on 3 different mobile screen sizes, 3 different tablet screen sizes and 2 desktop screen sizes. Please view the results of this testing here.
- See below screenshots from mobile testing:
- See below screenshots from tablet testing:
- See below screenshots from Desktop testing:
-
- I tested my website with the lighthouse feature in DevTools and found that the website performs far better on desktop than on mobile devices. I considered altering the website to improve this but the main problem seems to be the hero image on each page. I decided that this was a key part of the websites identity so didn't change this. I found that other scores were fairly consistent on both desktop and mobile.
- See below the lighthouse scores:
-
- I used W3C CSS Validator to make sure my CSS was correct. The results showed no errors in my CSS on submission. The only errors flagged were 'webkit' errors as a result of Bootstrap which I cannot remove without losing desired Bootstrap features.
- I used W3C HTML Validator to make sure my HTML was correct. The results showed no errors on submission.
-
- I looked into each one of my user story objectives and navigated my website to see if they were all successful. I found that they were all successfully met but there is room for improvement. For example, the contact form would be more successful as a booking form which would save the user time typing out a long message explaining what they want to book. This however is above my current skill level and is something I hope to include in future projects.
- See my user story testing table here.
-
- I tested all the interactive features on the website by hovering, and clicking. The results of the feature testing can be found here.
-
-
White line at bottom of page:
- When scrolled to the end of the page content a white line could be seen. This stood out from the dark footer so I removed it. To find the cause of this bug, I used changed the background colour of different elements and found that there was margin on the '
- ' element which contained the social media links in the footer. I set this margin to '0' and this fixed the bug.
-
Scroll arrow behind carousel on small screens:
- When testing responisveness of website, I found that the 'return to top arrow' was hideen behind the carousel caption. I adjusted the z-index and gave the arrow a background to improve its visibility. This resolved the bug and improved UX.
-
Hero image on home page not full width when resizing:
- The hero image wasn't filling the allocated space when resizing. This left a white space to the right of the image which looked bad and provided a poor UX. To resolve this I changed the sizing of the image at the smaller breakpoints to provide a max and min width. This resolved the bug and has improved UX.
-
Contact form labels misaligned:
- The labels in the contact form weren't aligned correctly on smaller screens so I adjusted the sizing and alignment on smaller screens to fix this bug.
- When scrolled to the end of the page content a white line could be seen. This stood out from the dark footer so I removed it. To find the cause of this bug, I used changed the background colour of different elements and found that there was margin on the '
-
-
Image gallery on Cafe page:
- The images don't align at the bottom of the page due to the different sized images in the columns I craeted in order to display the images as a gallery. I looked at different ways of presenting these images in order to improve the apprearance and UX, but had trouble improving the appearance of the gallery. I have left this bug in the website but don't believe it has a notable negative affect on UX.
-
Text moves around under carousel on home page as images change:
- I used DevTools to try to identify the problem. It appears that height of the carousel changes as the pictures in it are slightly different heights. This means the carousel incraeses in height and pushes the text down in doing so. If a height is set for the image it is no longer responsive so I would have to add a different height at every screen size. I don't feel this warrants this excess of code and the UX isn't affected in very negative way so I have left the bug unresolved. I have learnt from this as will consider the affect of the carousel in furture projects.
-
- The site was deployed to GitHub pages. These are the steps of deployment:
- In the GitHub repository, navigate to the Settings tab.
- From here, navigate to 'pages' and the in the source section drop-down menu, select Main Branch.
- Click "Save" and page will be automatically refreshed to indicate successful deployment.
The live link can be found here
You can clone this project to make a local copy. In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/secarrel/rupera-vineyard.git
- Improve gallery display in 'Café' page so the bottom edge of the gallery is a straight line.
- Add custom 404 page;
- Improve the quality of the commit messages. At the start of the project, commit messages are too long and don't use key words ('Add', 'Modify', 'Feat:', 'Fix'). This improves toward the end of the project but there is still work to be done.
- Improve the functionality of the contact form.
-
- Inspiration for the 'hero-grow' animation with the slightly transparent box of text on-top, on the home page, came from Code Institutes 'Love Running' project.
- The responsive gallery idea is also adapted Code Institute's 'Love Running' project.
- The timeline display for upcoming events is inspired by Code Institute's 'Resume' project.
- The responsive hamburger navbar is adapted from Bootstrap.
- I was given permission to use the read-me from Iuliia Konovalova's project 'Animal Shelter'
-
- The following images for the website were taken from Unsplash.
- The following images for the website were taken from Pixels.
- vines_and_views;
- arty_red_grapes;
- wildflower_butterfly;
- iced_coffee;
- cafe_window
- menu_and_food
- healthy_breakfast
- working_in_cafe
- cafe_friends
- cakes
- coffee
- wine_tasting1
- wine_tasting2
- harvest
- walk_the_vines
- meriachi_band
- sing_song
- pizza_party1
- pizza_party2
- pizza_party3
- cheese_wine1
- cheese_wine2
- taco_tuesdays1
- taco_tuesdays2
- taco_tuesday3
- mariachi_band3
- wines
- wine_barrels
-
- I used logo.com to create the logo for the website.
- I used Compressjpg to compress the images for the website to improve performance.
- I used FreeConvert to convert jpegs to webP to improve performance.
- Iuliia Konovalova was really supportive throughout this project and provided excellent guidance on best practice, the read me and testing.
- Code Institute provided me with the knowledge and skills needed to create the project.
- My family and friends assisted by testing for bugs and testing the user stories.
-
