The Black Sheep Farm website invites its visitors to connect with nature. This flower farm and events venue is set in the Wicklow Mountains of Ireland and offers a variety of outdoor activities and purposes: Garden walks, weekend yoga, floral design classes, a cut flower garden to build and bring home a bouquet, and an event space to host special occasions.
Users of the site will find out about the owners of the farm and their origin story, as well as a mission statement for the "why" behind the farm, found in the Our Story (about) page. All of the information to either plan a day visit or inquire about booking the farm is contained within the Events and Visit pages. There is a class schedule newsletter to subscribe to and a contact form for events. The site is intended for adults, their family memebers, and friends of all ages and backgrounds; anyone who would enjoy spending time in a garden setting.
- Why Black Sheep Farm?
- User Experience
- Features
- Future Features
- Testing
- Deployment
- Technology
- Credits
- Bugs
- Contact
We were tasked for our first project with Code Institute to build a responsive website with a minimum of three pages. I wanted to create something I felt passionate about, so I chose to create this site and name it so as in a different life, my home and the nature preserve around it could become Black Sheep Farm.
Because a wellness website was one of our project prompts, I gave the business a focus on slow-living, sustainability, and spending time outdoors. This lent itself to the plant and floral-based color palette and the style choices made along the way. Every project is a journey in itself, and on this one, I gathered visual inspiration from nature and natural photography and let the design of the site follow organically. Sometimes we need to stop and take a breath, feel the sun on our faces, listen to birdsong, and appreciate the beauty around us; if this site can evoke that sense, or better yet, encourage its viewer to do so, then I have achieved my purpose.
Inspiration for the design began with a photo of a field of dahlias and the building of wireframes via Balsamiq.
The 5 Planes of UX Design guided this process:
-
STRATEGY - To achieve a visually pleasing web experience that evokes a connection to nature and invites its visitors to plan either a day or an event out at the farm.
-
User Stories
-
As a new visitor, I want:
- A simple and inviting layout. Easy to use navigation features and information presented in a logical, straightforward manner.
- A visually appealing deisgn with images of the farm and flowers.
- To learn about the ethos of the farm and its founders.
- To explore the different opportunities to visit and how to experience the farm.
- A simple way to stay informed about upcoming classes and activities.
- To find out what kind of events are hosted and to be able to easily contact the farm for more information about booking my own event.
- To be able to visit and engage with the site on any of my devices.
-
As a returning visitor, I want:
- To find out about the upcoming bouquet box subscription service.
- To find class days and times.
- To learn about new classes and activities (In the future feature interactive calendar).
- To engage with streamable content and to view an image gallery of the farm, the flower gardens, and the classes and events held on site (future features).
-
As the owner of the site, I want:
- A clear and effective delivery of information about what the farm offers.
- A site with a warm, welcoming look and feel befitting of my business.
- A simple design that puts the focus on the images and descriptions of what makes the farm appealing to visitors.
- An introduction to who we are as the farm owners and proprieters which inspires kinship and trust with the visitor.
- A simple mailing list subscription service so that visitors can be aware of upcoming attractions and classes.
- An easy form system for visitors to make booking inquiries for special events.
-
-
SCOPE -
- i. An enticing landing page with a simple layout that displays the beauty of the farm's flowers while inviting visitors to explore the site.
- ii. A feel good origin story about literal and metaphorical black sheep and a mission statement to connect with the reader.
- iii. Visit and Events pages to display what user experiences the farm offers.
- iv. A mailing list subscription service to get udated monthly class schedules and a contact form to be able to inquire about booking an event.
-
STRUCTURE - Four pages with clear purposes. Landing, About (titled "Our Story"), Visit, and Events.
-
SKELETON -
Initially planned and assembled in Balsamiq Wireframes
index.html
about.html
visit.html
events.html
- SURFACE -
- A color palette based off of floral hues for all images and feature elements with a neutral grey background to tie into the logo and farm name.
- Flip cards representing each page of the site are used on the landing page for visual interest. Images from the farm are used for the front of the cards and brief explanatory text with a link to the page described reveal on hover. Background colors on the back of the cards have been taken from the front images using a color picker.
- The form and email subscription signup are each overlaid atop a background image representing life at the farm.
- Dark grey text is used in favor of black for ease of reading.
- Copy and image choice give the site an informal, friendly, homespun feel.
- Images are intended to display the vibrancy and warmth of the flower farm and encourage the visitor to want to experience it in real life.
-
Typography
- Fonts courtesy of Google Fonts. "Sail": Headers and accent text. "Source Sans 3": All other copy.
- The font "Sail" was chosen to lend the headers and accents an upscale but cozy feel, an informally formal feel befitting a flower farm and events venue.
- The font "Source Sans 3" was chosen for legibility and contrast so that all pertinent information could be read easily by all visitors.
-
Color Scheme:
- Hex codes:
- C7C6C6,
- 444141,
- CAA8A9,
- E9DBA5,
- E7DADE,
- EDBC80,
- 9BAAA1,
- DCC8BF,
- C7C6C6,
- Hex codes:
- The header is in a fixed position and remains static at the top of the page.
- The logo is a stylized drawing of the farm's mascot animal and namesake, a black sheep. This was chosen to establish a playful feel and set the tone for the farm's brand identity.
- The fully responsive navigation element features at the top of each page, inside the header, where the logo and name are located on the left side. These are clickable and return the user from any page or position on the site to the landing page.
- For mobile screens, the right side features a toggle bar which opens a menu. When clicked, it displays links to the four pages: Home, Our Story, Visit, and Events.
- For tablet-sized screens and larger, this toggle gives way to links to the four pages.
- The landing page features a hero image with one of the farm's mascot black sheep at the forefront. Cover text at the bottom of the image lists the farm's full name and description.
- Beneath the hero image and cover text, four flip cards introduce the three remaining pages and a coming soon feature: A bouquet box. The front of these cards show an image relevant to the page content (Dahlias for Our Story/about, a garden pathway for Visit, and a decorated table for Events). These cards flip using the CSS transform property. The brightly colored back side of each card contains a short explanation of its page and a link.
- This about page features a newspaper-like format with four images sized to echo the landing page's flipcards and maintain cohesiveness. The main content is split into two containers: The left side contains the images and a brief introduction, while the right side contains text about the owners and their vision for the farm. The background colors are an earthy pale peach and a muted sage green to give the page a calming, homey feel appropriate to the content.
- The Visit page contains a call to subscribe to the class schedule. The input box and a description of the classes offered is overlayed on a background image of a bouquet being arranged. Below this, a matching text box invited the user to visit the farm and lists the address and hours. The right half of the screen displays four images with border and padding such that they appear in the style of polaroid photographs. Each image is captioned to describe the class or farm attraction they depict: Garden yoga, floral arrangement, family-friendly garden walks, and the on-site cafe. These image cards flip on hover to reveal the class times and locations.
- This page introduces the different opportunities to book the farm as the venue for a special occasion. There is a hero image of an events table, text below it to detail types of events, and an image with a contact form overlayed so that users can get in touch with the owners about scheduling an event.
- The footer houses four icons spaced evenly across the bottom of the page. These icons link to Black Sheep Farm's social media: Facebook, X, Instagram, and Youtube.
- Neutral and complimentary floral colors paired with uniformly sized, round-edged images are used to create a cohesive feel. Each page features either a hero image with text beneath, a split screen style format, or a combination of both, to maintain consistency. Flip cards are used to add interest to images on two of the pages.
- Bouquet CSA: A sign up and info page for a monthly subscription bouquet box (as shown on flipcard #4 on the landing page).
- Flowers Page: A feature page with images of each garden and the varieties of flowers grown as well as their seasonality.
- A dynamic bi-weekly calendar on the Visit page to view and reserve a spot for upcoming classes.
- A scrolling or dynamic image gallery of events.
- "LambCam": Livestream video of the farm's lambs.
- Streamable content: Yoga and meditation classes for non-local visitors and an audio gallery of Black Sheep Farm nature sounds, forrest bathing, etc.
How to Deploy (pictured)
This site was deployed through GitHub repository /erinvdoyle/flowerfarm
- Follow the link above and click the Settings tab in the top navigation bar.
- From there, navigate to the Code and Automation section on the left side of the screen and click the pages tab.
- Under the "Build and deployment" header, click the drop down menu "Deploy from a branch," located under Source.
- Under Branch, select "main" with folder "/root" and click Save. Congratulations, your site is now deployed.
- HTML5
- CSS
-
Content
- Flip Card tutorial from W3Schools How To Create a Flip Card with CSS
- Ribbon tutorial from W3Schools How To Create a Ribbon with CSS
- Adding a form to an image W3Schools How To Add a Form to an Image
- Footer tutorial from FreeCodeCamp How to keep your footer where it belongs
- README Tutorial on Medium How to make the perfect README.MD on Github
- Badges for Pallet colors in README supplied by Shields.io
-
Media
- Logo Icon from Icons8
- Web Fonts "Sail" and "Source Sans 3" from Google Fonts
- Font Awesome for favicon, burger menu, and social media icons
- (https://www.imagecolorpicker.com) color picker for background colors inspired by images
- Images from freepik and Floret Flowers
- Squoosh for image compression
- Coolors for README visual of color pallet
- Code Beautify for final formatting checks
- ChatGPT for initial copy inspiration which was tweaked for style and tone
-
Guidance
- Inspiration and a jumping off point from Code Institute's Love Running walkthrough project.
Testing The Mobile Navigation Toggle (Pictured)
-
The landing and Vist pages feature flip cards which function as expected, performing a horizontal flip across the y axis on hover.
- The link on the flipside of each of the landing page cards works properly and leads to the listed page.
Testing the Newsletter Signup Box (Pictured)
Testing the Events Contact Form(Pictured)
A Table of Feature Tests
| Feature | Test Case | Outcome |
|---|---|---|
| Logo image and text links | Click image, text | User returns to home page |
| Navigation links | Click links | Links transport to designated pages |
| Nav. links convert to toggle | Narrow screen below 768px | Toggle appears in top right corner |
| Nav. toggle | Click toggle icon | Navigation menu drops down |
| Nav. toggle menu | Click each link | Links transport to designated pages |
| Favicon | Open site in new tab | Favicon appears top left of tab |
| Header | Scroll content on each page | Header remains fixed at top of page |
| Footer | Click each social media icon | Icons transport to correct external page |
| index.html | ||
| Flip cards | Hover over each card | Cards rotate horizontally to reveal back |
| Flip card links | Flip card and click link | Links navigate to intended page |
| visit.html | ||
| Form: Email address required | Leave field empty, click subscribe | User prompted to provide email |
| Form: Data collected | Enter email and click subscribe | Code Institute form dump confirms entry |
| Flip cards | Hover over each card | Cards rotate horizontally to reveal back |
| events.html | ||
| Form: Input fields required | Leave field empty, click submit | User prompted to provide missing field |
| Form: Data collected | Complete the form | Code Institute form dump confirms entry |
| Browser Tested | Intended Appearance | Intended Responsiveness |
|---|---|---|
| Chrome (Mobile/Desktop) | Good | Good |
| Edge (Mobile/ Desktop) | Good | Good |
| Safari (Mobile) | Good | Fair |
- The site has been manually tested for desktop with Microsoft Edge and Google Chrome, and for mobile with Edge, Chrome, and Safari. The function and design of the site remain intact with the exception of a bug in Safari on my own mobile device, as detailed in the Unsolved Bugs section below.
- All pages have been tested for responsiveness through both Chrome and Edge DevTools at the following CSS breakpoints:
- Mobile S (320px)
- Mobile M (375px)
- Mobile L (425px)
- Tablet (768px)
- Laptop (1024px)
- Laptop (1440px)
Screenshots of index.html
Screenshots of about.html
Screenshots of visit.html
Screenshots of events.html
- Manual testing has been performed on an iPhone 11 and iPhone 13Pro using Safari and Chrome, as well as on three Windows laptops of differing screen sizes. https://ui.dev/amiresponsive provided the screenshot for the top of this README and allowed further testing of site responsiveness.
Screenshots of each page of the site as tested on Am I Responsive?
Screenshots of each page of the site as tested on my own device, iPhone 13Pro
Lighthouse Test Results (Pictured)
-
After running an inital Lighthouse test on each page of the site, it was clear that SEO and Accessibility needed to improve. I used the WAVE Web Accessibility Evaluation Tool to scan each page and found several contrast errors on the landing page flipcards, as well as empty labels in the navigation toggle and both the mailing list subscription box and Events page form.
-
The contrast issues were easily modified using WAVE's contrast tab and color sliders.
-
The missing labels were fixed after a quick google search suggested adding aria labels.
-
The final issue to be fixed recurred throughout the site and was a failure to adhere to header best practices. I had understood that headers should be used consecutively in size with no smaller header preceeding a larger one, but did not realize it was bad practice to start a page with an h3, for example, without first having an h1 followed by an h2. I resolved this issue by using font-size percentages in a CSS class for each header. This allowed me to keep my preferred size while using the correct selector.
Once these errors and alerts were fixed, Lighthouse testing across mobile and desktop for all four pages resulted in SEO and Accessibility scores of 100.
This website was developed with consideration for accessibility through the following methods:
- The use of semantic HTML
- Aria labels for the navigation bar and all forms
- Alt text for images
- Appropriate contrast levels between background and foreground features and background colors and text.
- 100% Lighthouse testing scores for Accessibility and SEO of each page
| W3 Validator | index.html | about.html | visit.html | events.html |
|---|---|---|---|---|
| html | Pass | Pass | Pass | Pass |
| CSS | Pass | Pass | Pass | Pass |
-
HTML Validator - Running the code through an HTML validator highlighted three errors:
- I used an erroneous img closing tag for the logo image, which occurred across all pages as they shared the same header.
- I also attempted to add an alt tag to a section element composed of a background image assigned in the css rather than an html image tag.
- Finally, I used a css ID multiple times for the flipcard text rather than correctly assigning a class.
These were all easily fixed by deleting the superfluous code and switching the ID selector to a class.
HTML Validation Screenshot
-
CSS Validator - The CSS validator highlighted two specific errors:
- I attempted to use a negative padding value in the about page.
- I used a "size" value rather than "re-size" on the nav toggle icon.
I removed the unneccesary CSS to resolve these issues as I was happy with the design without the intended CSS.
CSS Validation Screenshot
-
Solved Bugs
- When I deployed my site, I realized that the header left a gap at the top of the screen which became visible on some mobile devices as the user scrolled. I added a property of "top: 0;" to solve this issue.
- After testing my deployed site on different screens and devices, I realized the photos were loading slowly. I converted them from jpg to webp to lower the resolution and decrease load time.
- The form text and content on the Events and Visits pages, as well as the text of the "Our Story" div on the about page, overflowed their containers when tested on mobile device landscape dimensions. Adjusting DevTools to the proper dimensions for landscape on small devices was something I neglected to do and I did not catch the bug until testing landscape mode on my own device. I corrected the flex box for each image container and set each form container to 80% width to solve this issue.
- The main container on the about page did not extend all the way down to the footer on larger screens. I fixed this by setting the container height for larger screens at 100vh - 5rem (the height of the footer).
-
Unsolved Bugs
- However, as an addendum to my final "solved" bug above, I found that the Events form and the "Our Story" div in the about page function as expected on my mobile phone's Chrome in landscape mode, but overflow their containers on mobile Safari (iPhone 13Pro). These elements function properly on all mobile landscape (starting at a height of 320px and upward) in DevTools for Microsoft Edge and Chrome, as well as my partner's safari mobile (iPhone 11).
Screenshots of the bug from each device
iPhone 13Pro Safari (evidence of bug)
iPhone 11 Safari (no bug)
- After adding a second text box to the Visit page, underneath the mailing list submission box, this box now overflows its container on landscape mode on mobile. This will have to be a future fix as I implemented the change too close to deadline (lesson learned).
Thank you for viewing my project. Please feel free to contact me with any questions or comments.