Yellow Lemon

This project was made as part of the Code Institute Full Stack Development Course (MP1)

View a live version of the website here

Project Description

This is a website for a fictional band called 'Yellow Lemon'.

A responsive mobile first website for Yellow Lemon. Yellow Lemon are a well known band. Their fanbase stem from a variety of different age groups and music tastes, owing to their diverse makeup and history.

This website’s purpose is to provide a useful resource for fans of the band to explore and also meet the requirements requested by the bands management team.

Contents

• User Experience (UX)
  • Brief
    • Website Purpose
    • Client Goals
  • User Stories
    • New User Stories
    • Returning & Regular User Stories
    • Client User Stories
• Design
  • Colours
    • Primary
    • Secondary
  • Wireframes
  • Typography
  • Iconography
  • Artwork
  • Responsive Design
• Features
  • Existing Features
  • Additional Features
  • Future Features
• Technologies
  • Languages
  • Libraries
  • Version Control & Management
  • Other Software/ Tools
• Deployment
  • Github Pages
  • Fork
  • Clone Locally
• Testing
  • Automated Testing
    • WC3 HTML
    • WC3 CSS
    • JS Hint
  • Manual Testing
    • Responsive
    • Manual Processes
    • User Stories
• Known Bugs
• Credits

User Experience (UX)

Brief

The site's users are fans and potential fans who wish to learn more about the band's history and the band members, and possibly book them for shows.

The bands management are interested in selling more of their music/ merchandise and getting more gigs.

The aim of this website

Provide a useful resource for band fans to keep to to date.
Including:

• Band News.
• Tickets to upcoming band shows.
• Ability to book the band for events.
• Provide a branding centric and cohesive experience.
• Provide users with the ability to listen to recent band tracks from anywhere on the site.

In addition
Owing to the pandemic related cancelations of all band shows. An area was created for band members to showcase their 'studio sessions'. Allowing fans to still enjoy and interact with the band. And providing the bands management team with a with referals for the band YouTube channel.

The goals of the band & management

The website owners have highlighted,

• Selling more of their music & merchandise.
• Getting more gigs/ bookings.

User Stories

New User Stories

As a user,

• I want information on each band member.
• I want the ability to book band shows or events.
• I want to keep to to date on band news.
• I want easy access to band social media.
• I can't attend shows, I want to interact with the band.

Returning & Regular User Stores

• I want to easily check recent news.
• I want to easily check new events.

Client User Stores

• We want the bands branding to be forefront.
• We want to sell the bands merchandise.
• We want the bands music to be available.
• We want to sell tickets to shows.
• We want the ability to receive enquiries about private shows.

Design

As with any band, they are very much identity & brand focused. Their image and how it is portrayed is of high importance.

To ensure a unique and a cohesive brand centric identity throughout the website,
I used a custom colour palette, produced bespoke artwork and incorporated complementary iconography. The artwork created was further incorporated into the merchandise being sold, via the Merchandise Page.

Colours

A vivid palette of colours was chosen.

Primary Colours

Yellow - #dfc548

Black - #191919

Red - #f87b70

Off White - #fafafa

White - #ffffff

Secondary Colours

Spotify Green - #1db954

Wireframes

Mobile, Tablet & Desktop mockups - View in full.

A comprehensive set of mock-ups/ wireframes were created. Layouts and styling for mobile, tablet & desktop devices.

Mockup/ Wireframe Pages include:

Mobile

• Home
• Home - Band News section
• Home - Events Section
• Home - Follow Section
• Menu Overlay
• The Band
• Merchandise
• Band News Article
• Getting in Touch / Private Events

Tablet

• Home
• Studio Sessions

Desktop

• Home - including Band News Section
• Home - Events Section
• Home - Follow Section
• The Band
• Studio sessions
• Merchandise
• Band News Article
• Getting in Touch / Private Events

I didn't create mockups for each device variation. Aspects of both the mobile and desktop design are applied to tablet layouts.

Production Design Changes to Note

• Initially, I was planning on having only two news articles display on the home page, a further news page containing a number of recent articles and a further page for individual articles.
  This was amended, the live mobile site now only shows text articles, removing the images allowed for four articles to be placed in the same space. Negating the need for a dedicated page to list recent news articles. On larger displays such as tablets and desktops the article images will appear. And the image size and amount of initial copy was reduced.
• Black was used instead of red for article headings. Due to contrast issues against a white background.

Typography

This website uses both Google Fonts and Adobe Typekit.

The Google font in use:
Roboto

The Adobe Typekit font in use:
Effra

Rockwell

The following font-weights were used:
100, 400, 500 & 700.

Iconography

A custom icon was used for the events alert:

All other icons in this project are from Font Awesome.

The following Font Awesome icons have been used:

Artwork

Custom artwork created for the project:

Used on the Get in Touch Page/ Private Events:

Used on the Follow/ Social Media Section:

Used on the Merchandise Page:

Responsive Design

Yellow Lemon was designed as a mobile first website.

Rather than use a framework, I decided to use CSS Grid.
This allowed me to create a bespoke layout while still being easily adaptable to various screen sizes, thanks to extensive configurability afforded by grids.

There are three distinct layouts:

• Mobile
  • Default
• Tablet
  • Displays wider than 768px
• Large Tablet/ Small desktop
  • Displays wider than 992px
• Desktop
  • Displays wider than 1200px

Testing the responsiveness of the website is conducted in the testing section below.

Features

Yellow Lemon is a mobile first fully responsive website with the following features.

Existing Features:

• Responsive Navigation,
  • (Mobile) The header height and logo reduces in size as the user scrolls.
  • (Mobile) Menu navigation overlay with hamburger icon animation.
  • (Mobile) Menu navigation overlay adjusts position on user scroll also.
  • (Mobile) Menu navigation overlay when active dims underlying homepage until exited (header excluded).
  • (Large Tablet/ Desktop) On larger screens a full text menu is displayed in the header.
  • (Large Tablet/ Desktop) Header/ Navbar and logo reduces in size as the user scrolls.
• An extensive Home Page, featuring:
  • Primary call to action promoting bands latest release.
  • Secondary call to action promoting the bands new Studio Sessions.
  • Most recent Band News.
    • (Mobile) Images are removed to create more room for additional articles within the same user scroll - promoting further engagement.
  • Upcoming band Ticketed Events.
    • Responsively displaying the next four events.
    • With links to either purchase a ticket from a third party vendor or check for more dates via the third party.
  • User updates alert within events section.
    • The position of which varies depending on the display size.
  • Follow Section promoting the bands Social Media accounts.
  • A site wide footer containing,
    • A further CTA regarding contact for private events.
    • Copyright notice and links to Terms of Service & Privacy Policies.
• An immersive The Band page detailing information on band history and each band member.
  • The page provides two distinct layouts and colour schemes depending on display width.
  • Customised imagery of each band member.
  • Links to discover further information on each band member.
• Individual News Articles pages containing the full content of the articles displayed on the home page.
• A Studio Sessions page for the band to share YouTube clips of their latest work.
  • This page provides a different colour theme, creating a feeling and look of a venue.
  • The user can immediately see the latest video.
  • Explore the most recent videos via a scrollable list.
  • Or discover additional videos on YouTube.
• A Merchandise or Merch page, containing an array of products being sold by the band.
  • User ability to purchase merchandise via a third party vendor.
• A Contact/ Get in Touch page featuring,
  • A custom hero image.
  • A contact form, for enquiries regarding private events.

Additional Features

The band's music is accessible from anywhere on the site. Via the primary call to action or the headphones icon located on the header/ navbar. This toggles a Spotify popup detailing the bands latest releases. And the ability to follow through to the bands Spotify page to discover more music.

Future Features:

• Remove third parties and have direct ticket and merchandise sales.
• Expand on the studio sessions page to include articles with each video.

Technologies

Languages, libraries and version control

Languages

• HTML5
• CSS3
• Javascript

Libraries

Font Awesome is the only external library used.

Version Control & Management

• Git
• Github

Other Software/ Tools Used

• Adobe Illustrator
• Adobe InDesign
• Microsoft Visual Studio
• Gitpod
• JSfiffle
• Chrome Dev Tools
• Safari Web Development Tools
• Can I Use It

Deployment

This site has been deployed on GitHub Pages.
You can view a live version of the site here.

GitHub Pages

Deploying on Github pages is very straight forward.

1. Login to your GitHub account(or join).
2. Navigate to or create the repository, in this case yellow-lemon-MP1.
3. On the menu below the repository title click on the settings cog.
4. Then scroll down to GitHub Pages and select 'master' or 'main' branch.
5. Leave the default folder as '/root'.
6. Once ready, the URL will appear in the green banner above source.

Fork

1. Login to your GitHub account(or join).
2. Go to the repo by clicking here.
3. Click fork in the top right corner of the screen.

Clone (Locally)

1. Login to your GitHub account(or join).
2. Go to the repo by clicking here.
3. On the main page of the repository click on 'Code'.
4. Click on the 'Clipboard'/ copy icopy the clone URL (Clone with HTTPs).
5. In your local environment open your terminal, navigate to or create a directory.
6. Paste the URL into your terminal and enter. The repo should be successfully cloned.

Testing

Automated Testing

WC3 HTML Validator
Results

• No errors or warnings to show.

WC3 CSS Validator
Results

• No errors (CSS level 3 + SVG)

JS Hint
Results
menubar.js
One warning:

• Missing semicolon (line 29).

menuoverlay.js
Five warnings:

• Missing semicolon (line 7, 29, 30, 31).
• Expected an assignment or function call and instead saw an expression (line 9).
• Missing semicolon (line 29).
• Two undefined variables {'spotify' line 8 & 41} + {'headphones' line 9 & 14}.
• Three unused variables {menuOverlay line 12} + {menuUnderlay line 34} + {spotifyOverlay line 40}.

As JS is not a requirement of MP1, and these warnings are not having a huge impact on site functionality. I will apply fixes at a later date. I have noted the likely effect these errors are causing in the known bugs section below.

Manual Testing

Responsive Testing

The following physical devices were tested.
Physical Mobile Devices & Hardware

Using Chrome Dev Tools & Safari Web Tools.
The following display sizes were tested:

iOS Mobile & Tablet devices

Android Mobile & Tablet devices

I was unable to test Internet Explorer.
As I am using CSS Grids, it's assumed the site will render incorrectly if viewed via Internet Explorer.

Can I Use It was used extensively during production of the CSS grid layout to ensure support across all modern web browsers.

Results Noted:
The site behaved well on almost all display sizes.
Some issues were found on larger tablet display sizes where the news article image becomes stretched. I have noted this in the known bugs section below.

Manual Testing Processes

************
* Homepage *
************

Header
- On load check the header height is 100px. 
- 'Yellow Lemon' text and 'Lemon' icon displaying correctly (per mockup).
- Confirm Spotify 'headphones' button is visible. 
- Check Spotify functionality:
    - When active confirm overlay present with Spotify embed present. 
    - Confirm overlay occupies same amount of space as 'Latest Release' CTA.
    - Confirm Spotify embed playing music as expected. 
    - When active confirm Spotify 'headphones' button changed colour to green.
    - On Body scroll confirm Spotify overlay position aligns with header and original top margin maintained.
    - When 'X' or 'Close' is tapped. Confirm overlay closes. 
- Confirm hamburger menu icon present and visible. 
- Mobile Menu checks:
    - Confirm when menu active, menu overlay appears. 
    - Confirm body excluding header dims. 
    - Confirm each link functions correctly. 
    - Confirm link hover/ focus transitions to text colour theme red. 
    - Confirm on Body scroll, menu overlay position aligns with header and original top margin maintained.
    - confirm menu overlay has z-index preference over Spotify overlay. 
- (On displays over 992 px) Confirm text navigation is visible, displayed and aligned correctly. 
    - Confirm navigation transitions - scale / colour change on focus/ hover + border bottom. 
- On scroll down confirm header height reduces to 75px. 
- Confirm scroll to top header height increase to 100px. 
- On sessions.html, confirm header background is black. Logo text, headphones & hamburger icons are yellow. 
- Confirm when Logo link active, it directs user back to home. 

Primary CTA (Latest release)
- Confirm background image is visible. 
- Confirm hero text is visible and the layout is correct. 
- confirm 'Play' button activates Spotify overlay. 
- (On displays over 992 px) Confirm primary CTA covers 2/3 of screen area.

Secondary CTA (Studio sessions)
- Confirm background image is visible. 
- Confirm overlay with Headings, Title, Span Test & Lemon Icon display correctly. 
- Confirm 'More' link directs to sessions.html. 
- (On displays over 992 px) Confirm primary CTA covers 1/3 of screen area.

Section Dividers 
- Confirm 'Lemon' icon with full width line is present at end of each section.
- Confirm spacing is uniform. 

Band News Section 
- Confirm section title is visible, displayed and spaced correctly.
- (Mobile Only - under 768px) Confirm band news articles are text only. 
- Confirm four articles are present.
- Confirm Title, Date, Text is visible, correctly displayed and spaced. 
- Confirm 'More' button on each articles directs to the correct news article .html.  
- (Tablet Only - over 768px) Confirm band news articles feature an image and is displayed correctly. 
- (Tablet Only - over 768px) Confirm event items rearrange into a grid of four. 
- (On displays over 992 px) Confirm four news articles with images are present. 


Events Section
- Confirm section title is visible, displayed and spaced correctly.
- (Mobile Only - under 768px) Confirm 'User Notice/ Alert' is visible above the events section. 
- (Tablet Only - over 768px) Confirm 'User Notice/ Alert' is visible below the events section title.
- Confirm section text is visible in all links are directing to the correct anchor, page or external link. 
- Confirm section text styling conforms with stylesheet. 
- Event Section event items: 
    - Confirm div is scrollable. 
    - Confirm four events are present. 
    - Confirm event item section heading and subheadings are visible and display correctly. 
    - Confirm event item content is visible and displaying per stylesheet. 
    - Confirm all four 'Tickets' buttons direct to an external link 
    - Confirm at the end of the event items scrollable section, the 'More Dates' link is viable and directing to the correct external resource. 
    - (Tablet Only - over 768px) Confirm event items rearrange into a grid of four. 
 - Event Section 'Book Yellow Lemon' link directs to contact/ get in touch page.
 - (On displays over 992 px) Confirm the four ticket items align in a row of one. 

Follow Section
- (Mobile Only - under 768px) Confirm all content is aligned in a column. 
- Confirm 'Follow Yellow Lemon' Artwork is visible and displaying correctly. 
- Confirm section text is visible and displaying correctly. 
- Confirm section text span is displaying correct font. 
- Confirm four Social Media icons are present. Fully visible and aligned correctly. 
- Confirm four Social Media icons transitions in scale & colour on focus/ hover. 
- Confirm four Social Media icons direct to external links. 
- (Tablet Only - over 768px) Confirm content layout:
    - Artwork positioned on left. visible, displayed and aligned correctly. 
    - Section text & Social media icons are position on the right and aligned correctly in a column. 
    - Both section should be aligned and spaced evenly. 
- (On displays over 992 px) Confirm artwork, content and social media links are displayed and aligned correctly. 

Footer
- Confirm footer position at bottom of page. 
- Confirm footer text content is visible, displaying and aligned correctly. 
- Confirm copyright & policies links are positioned bottom right. 
- Confirm copyright & policies links direct to external resource. 
- Confirm section divider is positioned below copyright & policies.
- Confirm section divider is visible, displaying and aligned correctly. 
- (On displays over 992 px) Confirm footer content and links are displayed and aligned correctly. 


******************
* The Band       *
* /the-band.html *
******************

Header
- Follow above header steps. 

- (Mobile/Tablet Only - under 992px) Confirm Hero Image Artwork. 
    - SVG Artwork is visible, displaying and aligned correctly. 
- Confirm section title is visible, displayed and spaced correctly.
- Confirm section text is visible and styling conforms with stylesheet.
- Band Member info section items: 
    - Confirm div is scrollable. 
    - Confirm four band member items are present. 
    - Confirm band member item section heading and subheading is visible and displays correctly. 
    - Confirm band member item content is visible and displaying per stylesheet. 
    - Confirm all four 'More Information' links direct to an external link 
 - (Mobile/Tablet Only - under 992px) Confirm band history information content is positioned beneath Band Member Section. 
 - Confirm band history information section 'Read More' links direct to an external link. 
 - (On displays over 992 px) Confirm theme change (background colour)
 - (On displays over 992 px) Confirm positioning of logo (to left) in body and hiding in header. 
 - (On displays over 1200 px) Confirm positioning of logo (to center) 
 - (On displays over 992 px) Confirm content is visible and displays correctly. 

 Footer
 - Follow footer steps above.


*******************
* Studio Sessions *
* /sessions.html  *
*******************

Header
- Follow above header steps. 

Main Content - Latest Video
 - (Mobile/Tablet Only - under 992px) Confirm layout is correct - content appears in a column. 
 - Confirm Recent Video Titles, subheadings, icons, copy/ text & date are visible and displaying per stylesheet. 
 - Confirm transitions on play icon - scale & colour. 
 - Confirm link to YouTube is functioning. 
 - Most recent sessions section items: 
    - Confirm div is scrollable. 
    - Confirm four additional recent session items are present. 
    - Confirm session item section heading and subheading is visible and displays correctly. 
    - Confirm session item content is visible and displaying per stylesheet. 
    - Confirm Thumbnails are visible, displaying and aligning correctly. 
    - Confirm all four 'Play' buttons direct to an external YouTube link 
 - Confirm 'View more on YouTube' Link at bottom of section directs to YouTube channel. 
 - (On displays over 992 px) Confirm layout changes to row. 
    - More current video to appear on left side, recent video selection to appear on right. 
    - Confirm content is is visible and displays correctly. 

Footer
 - Follow footer steps above.


*********************
* Merchandise       *
* /merchandise.html *
*********************

Header
- Follow above header steps. 

Merch Hero Artwork. Confirm that, 
- SVG Artwork is visible, displaying and aligned correctly. 
Merch content. Confirm that, 
- Section title is visible, displayed and spaced correctly.
- Merchandise section items: 
    - Confirm div is scrollable. 
    - Confirm four additional merchandise items are present. 
    - Confirm merchandise item section heading and subheading is visible and displays correctly. 
    - Confirm merchandise item content is visible and displaying per stylesheet. 
    - Confirm Thumbnails are visible, displaying and aligning correctly. 
    - Confirm all four 'Buy' buttons direct to an external link 
- Confirm additional text content below scrollable div is present. 
- Confirm content is visible and displaying per stylesheet. 
- (On displays over 992 px) Confirm layout changes to row. 
    - Hero artwork to appear on left side, merchandise selection to appear on right. 
    - Confirm content is visible and displays correctly. 

Footer
 - Follow footer steps above.


**************************
* Contact page           *
* /bag-some-lemons.html  *
**************************

Header
- Follow above header steps. 

Contact Hero Artwork. Confirm that, 
    - SVG Artwork is visible, displaying and aligned correctly. 
- Confirm section title is visible, displayed and spaced correctly.
- Confirm section text content is visible, displayed and spaced correctly.
- Confirm form input fields are displaying and aligned correctly. 
- Confirm data entry into form input fields. 
- Confirm data entered is styled per stylesheet. 
- Confirm email form input field validates data entered. 
- Confirm form submit button is functioning. 
- (Mobile/Tablet Only - under 992px) - Confirm content is arranged in a column. 
- (On displays over 992 px) Confirm layout changes to row. 
    - Hero artwork to appear on left side, contact form to appear on right. 
    - Confirm content is visible and displays correctly. 

**Displaying correctly = Adhering to CSS rules specified on stylesheet.css*

User Story Testing

New User Stories Testing:

1. I want information on each band member.

2. I want the ability to book band shows or events.

3. I want to keep to to date on band news.

4. I want easy access to band social media.

5. I can't attend shows, I want to interact with the band.

Returning & Regular User Stories Testing:

1. I want to easily check recent news.

2. I want to easily check new events.

Client User Stories Testing:

1. We want the bands branding to be forefront.

Cohesive branding and styling was used throughout the site.
The bands identity is signalled through the colour scheme used.

Visually, the use of a lemon icon was repeated throughout the site to reinforce the Yellow Lemon brand:

2. We want to sell the bands merchandise.

Band merchandise is available to purchase via a third party on Merch page.

3. We want the bands music to be available.

A Spotify popup is available from anywhere on the site. Allowing users to listen to the bands music.

4. We want to sell tickets to shows.

5. We want the ability to receive enquiries about private shows.

Known Bugs

• Issue with active menu item.
• In some tablet aspect ratios images can become horizontally stretched.
• Issue with Spotify headphone indicating active or note (likely due to the JS hint errors observed above).

Credits

• I found this documentation very helpful, CSS Grid
• Mobile Menu Overlay - https://stackoverflow.com/a/48217369
• Menu Height adjust on scroll - http://jsfiddle.net/cgdoh1bo/1