View the repository in GitHub here
View the live project here
The business is a beer subscription service called Tartan Taps, which has teamed up with some of Scotland's finest craft and microbreweries, to deliver a variety of beers to the customer's doorstep.
In this section, I have established user stories which will dictate the website functionality. The aim is to provide information on a selection of quality, great-tasting craft beers, alongside their breweries, in order to gain subscribers.
-
-
- As a First Time Visitor, I want to know at a glance the main purpose of Tartan Taps and what it can offer.
- As a First Time Visitor, I want to be able to navigate through the website intuitively, to seek the information I require.
- As a First Time Visitor, I want to locate their Social Media accounts, to determine how trusted they are.
- As a First Time Visitor, I want to see prices to determine whether this a suitable product for purchase.
-
- As a Returning Visitor, I want to be able to easily sign up to start receiving my subscription.
- As a Returning Visitor, I want to have options to get in contact with Tartan Taps, with any queries or questions I may have.
- As a Returning Visitor, I want to see customer reviews.
-
- As a Frequent User, I want to see what beers are available and compare them against my delivery.
- As a Frequent User, I want to find information about the breweries, from where the beers came.
- As a Frequent User, I want to be able to cancel / pause my subscription at any point.
- As a Frequent User, I want to be able to change the amount of beers I order each month, and when I receive them.
-
Based on the strategic goals that have been established, I have decided to incorporate a phased approach prioritising the most important information to less feasible concepts. This will allow me to manage my workload and build upon any feedback that I receive during the project.
To begin with, the first phase would be to create a minimum viable product (MVP).
-
- A home page setting out what the website offers.
- A beer page showcasing what beers are available.
- A breweries page to find out more information about each brewery.
- A Customise your crates page.
- A contact us page.
I would then build upon the MVP to further engage the user.
-
- Include interactive elements to engage the user (JavaScript knowledge not yet gained)
- Include a further option that the customer may select their beers individually.
- Create a Gift page, to allow users the option of a single purchase or gift subscription.
I would then implement back end technologies (knowledge not yet gained).
-
- Add a delivery and payments page.
- Add an edit your order page.
-
-
- The main colours used are Navy and Tan, which has been dictated by the Tartan Taps logo.
- Tartan will be used in a minimalist way to be in keeping with the company name.
-
- Cormorant SC will be used for headings and important information, in keeping with the company logo. Roboto will be utilised for the website content. Sans-serif will be used as a fallback, should there be an error with imported fonts.
- The text will be consistent across all pages. Titles and heading will be centered, and as there are no large bodies of text content can also be centered.
-
- Utilising bootstraps Jumbotron the home page hero image is designed to catch the user's attention. It has to be contemporary, striking, and directly related to what the company offers.
- Images must be of a high enough quality that as the images scale according to different devices they do not become pixelated.
-
Below you can find links to the initial draft of the wireframes I've created for each page, showing how I would like the page to be structured, and how responsive the website is to different devices.
- I have created wireframes using Balsamiq for desktop, tablet and mobile devices.
As the project has progressed there have been quite a few changes to what was originally laid out in the wireframes. These changes have been made to improve the aesthetics and functionality of the website, based on feedback and my own opinion.
Looking back I definitely feel my project would have benefited from further planning at the beginning of the project. Having only just learnt HTML & CSS, and with a willingness to begin coding, some aspects of project planning may have been overlooked.
-
-
- Logo - Logo row will include social media links, a "Sign up / Sign In" modal, and the company logo. Social media links and modal will not display on smaller devices, and logo will also act as a link back to the home page.
- Navbar - Toggler to a hamburger menu on smaller devices. Current page will be identified by underlining the page link, and text will be coloured white when active.
- Footer - Split into 3 sections - contact information, social media, and "Sign Up / Sign In" modal. Wireframes show sign up modal to not display on smaller devices, however this has been included in the project, so there is an option to sign up on all pages regardless of device size. Social media links to open in a new tab.
- Differing fonts between headings and content, aids in making the page look less monotonous. Cormorant SC capitalisation of letters draws the attention of the user.
-
- Jumbotron - Striking image to draw the user's attention with information relating to the company. The image will have a darker overlay to allow the text to stand out.
- Reviews & How it works - Circular images used to add variety, and different background colour used to identify different sections.
- Bootstrap Cards - Aid the user with navigation through visual images and brief descriptions.
-
- Dropdown option on the navbar allows the user to quickly move to different sections within beers page. Especially important when using smaller devices as a large amount of scrolling required without navigation to different sections.
- Beer description overlay allows for a subtle user interaction and removes the need for large amounts of text to be visible.
- Differing background colours to help identify different sections.
- Half-page hero image ties in with the bootstrap cards seen on the home page.
-
- Bootstrap Cards - Image of each brewery logo to tie in with the logos seen on the beer description overlay, and a brief description about each brewery, with a link to each brewery opening in a new tab.
- Differing background colours to help identify different sections.
- Half-page hero image ties in with the bootstrap cards seen on the home page.
-
- Further information modal allows user interactions and avoids large amounts of text.
- Simple and concise form to entice the user. This is important as large forms which take time to complete can deter the user.
-
- FAQ's section with interactive dropdowns helps to make the content appear smaller.
- Simple contact us form allows the user to ask any questions not already covered by FAQ's.
- Embedded Google Maps allows for further interaction to see exactly where Tartan Taps is located.
-
- Bootstrap 4.3.1
- Used as a framework for styling and to make the website responsive.
- jQuery
- Used with Bootstrap to make the project responsive.
- Hover.css
- Hover.css was used in the navbar and the navbar dropdown links when being hovered over.
- Google fonts
- Google Fonts was used to import the "Cormorant SC" and "Roboto" fonts used across the website.
- Fontawesome
- Font awesome was used to obtain the social media icons, stars for review section, and the beer glass for the Sign Up / Sign In Modal in the footer.
- Google Developer Tools
- Used as a method of fixing bugs, and testing the responsiveness on different devices.
- Github
- GitHub is used to store the project code after being pushed from Git.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- Balsamiq
- Balsamiq was used to create the wireframes, seen at the skeleton section, during the design process.
- Reduce Images
- Reduce Images was used to re-size some of the websites images to improve performance.
- Sauce Labs
- Sauce Labs was utilised to complete cross-browser testing.
- Techsini
- Techsini has been utilised for website mockup.
- Grammarly
- Grammarly has been used across the website to fix spelling errors and grammar.
- Autoprefixer
- Autoprefixer has been utilized to enhance compatibility with browsers.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
-
W3C CSS Validator
-
W3C Markup Validator
-
As a First Time Visitor, I want to know at a glance the main purpose of Tartan Taps and what it can offer.
- When entering the site the user is greeted with a large hero image utilising Bootstraps Jumbotron component, with a dark overlay making the text clearly visible, describing the purpose of the company. View here
- Below the jumbotron on the home page, there is a section for "How it Works". This is made clear using imagery and a brief description. View here
-
As a First Time Visitor, I want to be able to navigate through the website intuitively, to seek the information I require.
- At the top of each page, there is a clear and easy to read navigation bar to take the user to each of the different pages, which compresses to a burger menu on smaller devices. The current page is highlighted by underlining each link, and the text is changed to white. View here
- The logo will take the user back to the home page when clicked.
- Using bootstraps "sticky-top" class the navbar will remain at the top of screen, when scrolling through the site, to avoid the need to scroll to the top of the page to view another page. View here
- Dropdown option on beers page allowing the user to quickly manoeuvre to a different section on that page. View here
-
As a First Time Visitor, I want to locate their Social Media accounts, to determine how trusted they are.
- On larger devices, only social media icons (Facebook, Twitter, Instagram, Youtube) can be located to the left hand side of the logo. View here
- On all device sizes, social media icons can be located in the footer of the site. All links to social media accounts will open in a different tab, to ensure the user does not lose access to the website. View here
-
- On the home screen on larger devices, the user can sign up in three places. Sign up button in the jumbotron, Sign up / Sign in to the right of the logo and a Sign up / Sign in icon in the footer. All will take the user to the same modal. View here
- On smaller devices, the Sign up / Sign in option to the right of the logo is removed. The user can sign up from any page using the option in the footer. View here
-
As a Returning Visitor, I want to have options to get in contact with Tartan Taps, with any queries or questions I may have.
- First option for a user to contact Tartan Taps can be located in the footer of the page, with an email address and telephone number. This appears on all device sizes. View here
- There is also a dedicated page to contact the company. Within this are FAQ's - if these do not fulfil the users' queries then a contact us form is available for additional enquiries. View here
-
- The home page has a section dedicated to customer reviews. I have situated this directly below the jumbotron, so the user knows the company has a good reputation. Circular images have been used for variety, which do not display on smaller devices. View here
-
- The beers page will show all the beers that the company offers. A brief description of each beer can be seen on the image content overlay. Descriptions have been taken from the individual breweries and edited to suit the needs of the project. View here
- Due to the scope of the project, it has been decided that it is not necessary to show any beers which may not be in stock.
-
- A brief description / history of the brewery can be located on the breweries page, which has been split into four sections for different regions in Scotland. A link to each brewery can be found on the brewery cards which will open in a new tab. View here
- A brewery logo thumbnail image appears on the image content overlay of the beers, to identify which brewery the beer is from. View here
-
- I have addressed this in the FAQ's section on the contact us page, with a dropdown response explaining how this is achieved. View here
-
As a Frequent User, I want to be able to change the amount of beers I order each month, and when I receive them.
- At this stage, this is addressed in the FAQ's section on the contact us page. View here. In further releases, I would create an page / modal that would allow the user to edit their order online.
Testing was completed using the following steps on all interactive elements of the website. View here
Sauce Labs was used to test the website across different browsers. The following browsers were tested:
- Google chrome - successful
- Microsoft Edge - successful
- Mozilla Firefox - successful
- Safari worked however it would not allow you to choose a date using the datepicker on the Customise Your Crate page - seen here. I checked this on Safari on Ipad and it worked well.
- Internet Explorer 11 was the worst experience and more or less broke the website. Images were stretched, dropdown for the FAQ's were broken, text was off-centre, and the jumbotron text was completely out of alignment - seen here
Google developer tools was used throughout the project to test the responsiveness of the website across multiple device sizes. I have used Google Developer tools to simulate device sizes:
- Iphone 5 / SE: Portrait, Landscape
- Iphone 6 / 7 / 8: Portrait, Landscape
- Iphone X: Portrait, Landscape
- Ipad: Portrait, Landscape
- Ipad Pro: Portrait, Landscape
- Moto G4: Portrait, Landscape
- Galaxy S5: Portrait, Landscape
- Pixel 2: Portrait, Landscape
- Surface Duo: Portrait, Landscape
- Galaxy Fold: Portrait, Landscape
- Iphone 4: Portrait, Landscape
These simulated tests only show the home page logo, navbar, and jumbotron as this is where I experienced most of issues due to the jumbotron's viewport height. As can be seen, there is no overlapping and the website is responsive for every page on all device sizes listed.
- The burger menu in the navbar for smaller devices would not drop down to reveal the nav-links.
- Error: I did not have the JS popper in the correct position in the HTML docs.
- Fix: to correct this I added the script after the footer and any modals, and before the body closing tag.
- I wanted to add a sticky-top class to the navbar so that when it was scrolled past it would stick to the top of the screen.
- Error: I originally had the navbar in the header section, which was inheriting properties preventing the navbar from sticking.
- Fix: I moved the navbar outside the header class and added a sticky-top class from bootstrap which sticks to the top of the page when scrolled past.
- The home page cards when moving from small to medium devices would display on the same row and overlap one another.
- Error: The col class was originally written as col-md-4, so on medium devices, 3 cards would try to fit on the same row resulting in overlapping.
- Fix: I corrected this to col-md-6 so that only 2 cards would display on one row on medium devices.
- Note: This was a common error until I got a better grasp of bootstrap's grid system.
- Jumbotron text "New Year New Beer" was overlapping the navbar on iphone 5/SE and Galaxy Fold, when in a horizontal position on Google Dev Tools.
- Error: As the jumbotron's height is measured by viewport height there isn't sufficient room for all the jumbotron text to fit.
- Fix: Max-height media queries for 320px (iphone 5 height horizontally) & 280px (Galaxy Fold height horizontally) have been added to increase the height of the jumbotron to include all the text. I could have omitted some of the jumbotron text however I did not want to do this, as it would affect the first user goal to know at a glance what the company offers.
- Home, Breweries and Customise Your crate page "cards" did not fit when testing the responsiveness on Galaxy Fold platform.
- Error: The width of the cards was wider than the screen width of the device.
- Fix: Max-width media queries for 280px, have been added which has reduced the size of the cards so they are no longer wider than the screen width. As the width of the cards have reduced this meant that text and visit website buttons were pushed out of the cards on the Breweries page. I have corrected this with an additional media query, changing the height to auto on the card body.
- Although not a bug I had a lot of repeated CSS for font-family and color due to lack of project planning at the beginning of the project.
- Fix: I created 4 classes for text content and styled them in CSS. This resulted in 50 lines of repeated CSS removed from the style.css.
- After viewing the home page layout on "Am I responsive" I wasn't happy with how far down the screen the jumbotron text appeared and noticed that on iphone 4 the jumbotron text was overlapping the navbar.
- Fix: Changed the size of the jumbotron from 115vh to 100vh, to push the text back up the screen, and added additional media queries to ensure the jumbotron text does not overlap the navbar on different devices.
- After deploying the project and viewing on ipad / iphone, when I opened and closed the sign-up modals a blue outline appeared, which would show until the page was refreshed.
- Error: This appears to have come from bootstrap styling.
- Fix: I found the solution on stack overflow to change the :focus {outline:none}. This removed the blue outline after the modal was closed.
- After deploying the project and viewing on ipad / iphone, the jumbotron hero image was not scaling correctly and was zoomed in too far on IOS devices.
- Fix: I found the solution on stack overflow to change the background-attachment to scroll. Jumbotron hero image is now scaling correctly on all devices.
- There is a tiny gap between the sticky-top navbar and the top of the screen when scrolling. This is most evident when using an iphone, showing the device frame, on chrome developer tools.
- There is no margin showing on google development tools, so I'm not sure why this is appearing. I have manually cheked the website on Iphone 8 and Ipad and the gap does not appear.
I tested my website using Lighthouse is Google Development Tools, and after some image re-sizing, this is the result I got.
As this was my first website design I was reasonably content with the results, however I wanted to increase my SEO score from 70-100.
- The first issue identified was I did not have a meta description in the head of the HTML doc.
- The second issue was my links to the "sign up / sign in" modal were using data-target rather than href.
- I reduced the image sizes further to increase performance.
Below shows the outcome of the changes made.
Despite reducing the image sizes further, the changes I have made to increase the SEO, has reduced the performance of the website slightly.
For the scope of this project, I am happy with the results from Lighthouse, however I would like to re-visit performance and best practices to achieve a higher score.
The project has been deployed on GitHub Pages using the following method:
- Log into GitHub and locate the repository you wish to deploy.
- At the top of the repository click on the settings link.
- Scroll down the setting pages until you reach the section titled "GitHub Pages".
- Under the "Source" subheading click the dropdown labelled "None", select master and click save.
- The page will then automatically refresh (it can take a while)
- When you scroll back down through the page you will see a green bar with a tick showing that your site has been published in the "GitHub Pages" section.
By forking the GitHub Repository to make a copy of the original repository, we can make changes without it affecting the original repository, by following these steps:
- Log into GitHub and locate the repository you wish to fork.
- At the top-right of the repository underneath the navbar, click the "Fork" button.
- You should now have a copy of the original repository in your account.
- Log into GitHub and locate the repository you wish to clone.
- Click the dropdown labelled "Code" to the left of the green "Gitpod" button and copy the link shown.
- Open Git Bash.
- Change to the location where you want the cloned directory to be made.
- Type "gitclone" and then paste the URL you copied in step 2.
- Vclever
- Helping to find a solution to get lines either side of the TT on the logo.
- W3Schools
- Provided the code to create a content overlay for the beer images.
- W3Schools
- Provided the code for a gradient background on the "how-it-works" section.
- W3Schools
- Provided the code for the FAQ's questions and dropdown answers on contact us page.
- CSS Tricks
- Aided with background images for beers, breweries, and contact us pages.
- Matt Rudge, Code Institute
- Jumbotron & Jumbotron styling
- Dark overlay which has been applied to jumbotron image and hero images.
- Social Media Icons in footer and logo row.
- Stackoverflow
- Aided to remove blue outline when the sign up modal is closed.
- Stackoverflow
- Aided to resolve scaling issues with the jumbotron hero image.
- Bootstrap
- Bootstrap has been used throughout the project to make the site responsive using Bootstraps Grid system and add components from their library.
- Fontawesome
- Fontawesome has been utilised for social media icons, reviews stars, further information modal, and the beer glass sign up / sign in modal.
Due to the nature of the website, I have relied heavily on the individual breweries for beer descriptions and brewery description / history. Some of the content has been edited for the needs of the website.
- West Brewery
- Williams Brothers
- Fallen Brewing Company
- 71 Brewing
- Stewart Brewing
- Fierce Beer
- Loch Ness Brewery
- Black Isle Brewing Company
- Cromarty Brewing Company
- Six Degrees North
- Isle Of Skye Brewing Company
- The Orkney Brewery
- Isle of Arran Brewery
- Islay Ales
- Tempest Brewing Company
- Broughton Ales
All other content has been written by Christopher Goodfellow.
Images taken from Unsplash
- Home Page Jumbotron Image - View
- Beer page Hero Image - View
- Breweries page Hero Image - View
- Contact Us Hero Image - View
- Home page male reviewer - View
- Home page female reviewer - View
- Home page how it works image 1 - View
- Home page how it works image 3 - View
- Home page crates image - View
- Lagers / IPA's - Customise your crate page - View
Due to the nature of the website, and beers / breweries being highly specific, images have been taken from various sources which can be seen below:
-
- St Mungo Lager - View
- Che Guava Radical Lager - View
- 71 Lager - View
- Stewarts Lager - View
- Modern Helles - View
- Fierce Pilsner - View
- Alstadt Lager - View
- Cromarty Lager - View
- Hopo Lager - View
- Saazi Ness - View
- Peloton - View
- Ceasar Augustus - View
- Skye Gold - View
- Northern Light - View
- Arran Blonde - View
- Light Ness - View
- Easy Shift - View
- Birds & Bees - View
- Switch - View
- GPA - View
- Saligo Golden Ale - View
- Spider Monkey - View
- Hopocrisy - View
- Hopo 6.2 IPA - View
- Tin Man Tropical IPA - View
- Left Coast IPA - View
- Radical Road - View
- Dark Ness - View
- Skye Black - View
- Black Rock Stout - View
- Mexicake - View
- Dark Island - View
- Night Shift - View
- Hibernator - View
- Black Hop Down - View
- Kelpie Seaweed Ale - View
- Chew Chew - View
- Affogato - View
- Dark Days - View
-
- West Brewery - View
- Williams Brothers - View
- Fallen Brewing Company - View
- 71 Brewing - View
- Stewart Brewing - View
- Fierce Beer - View
- Loch Ness Brewery - View
- Black Isle Brewing Company - View
- Cromarty Brewing Company - View
- Six Degrees North - View
- Isle Of Skye Brewing Company - View
- The Orkney Brewery - View
- Isle of Arran Brewery - View
- Islay Ales - View
- Tempest Brewing Company - View
- Broughton Ales - View
NOTE - As this is an internal CI project, images can be used without authorization from the image owner.
- My mentor, Gerard McBride for continuous helpful feedback.
- Tutor support at Code Institue for their support.
- Code Institute, for teaching the necessary skill to build the site.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
