Skip to content

Frontend landing page for Brew Barberista, an independent coffee shop and barber located in Raheny, Dublin 5: https://loosenthedark.github.io/brew-barberista-landing-page/ *** NB: This project is an expanded version of the original (built in July 2021), the repository for which can be found here: https://github.com/loosenthedark/brew-barberista ***

Notifications You must be signed in to change notification settings

loosenthedark/brew-barberista-landing-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Brew Barberista logo and nav bar

Brew Barberista responsive header device mockups

Brew Barberista responsive above-the-fold device mockups

Live link to deployed project (loosenthedark.tech)

NB: This project is an expanded version of the original (built in July 2021), the repository for which can be found here

Brew Barberista is a thriving independent coffee shop and barber in North Dublin. Opening its doors at the height of lockdown, the business has not only survived this period of uncertainty, it has firmly established itself as a community hub, showcasing the best of local produce as well as selling art and literature from Dublin-based creatives.

While the company has made good use of social media (notably Instagram) throughout its early days, one thing the pandemic has brought home to business owners everywhere is the importance of building a robust and reliable online presence - something that can remain as a proverbial shop window for customers if and when physical premises might have to close their doors due to Covid restrictions.

At the time of writing, the company's existing site appears to be somewhat unfinished, while it is also displaying out-of-date information about opening hours etc. (last updated in December 2020). In addition, its design falls well short of being sufficiently responsive for today's mobile-first consumer landscape:

mobile tablet desktop
Home Home Home
Brew Coffee Brew Coffee Brew Coffee
Brew Barber Brew Barber Brew Barber

Brew Barberista old website screenshots

Add to all of this the ongoing #DeleteFacebook movement and growing public concern over the lack of privacy across SNSs, and there is clearly a need for Brew Barberista to consolidate its brand identity and ties to the community by creating a bright and engaging standalone website.

User Experience (UX)

This Brew Barberista rebuild is a fully-responsive frontend website, offering users a visually appealing overview of the business's services, local partnerships and core values. Both first-time and returning visitors will be impressed by the site's mobile-first design as well as its intuitive navigation and layout, while their knowledge of Brew Barberista's offerings and message will be enriched by the site's informative and regularly-updated content.

Project design

Colour scheme:

click to view

Brew Barberista colour scheme (Coolors palette) screenshot

Typography:

click to view
  • Primary font...

    • Family: Poppins
    • Weights: 300, 400, 500
    • Fallback: sans-serif
  • Secondary (Heading) font...

    • Family: Lora
    • Weights: 600, 700
    • Fallback: serif

Wireframes:

click to view

Initial design inspiration for the project's layout and aesthetic came from this Frontend Mentor challenge spec

Features

Existing features:

  • Navigation:

    • Fixed Navigation Bar:
    click to view
    mobile tablet desktop
    • (Off-Canvas) Navigation Menu:
    click to view
    mobile tablet desktop
    • The off-canvas navbar-nav menu mentioned above can be expanded by clicking on the .navbar-toggler button. This functionality has been enabled using custom JavaScript by listening for a relevant user click(s) and sliding the .navbar-nav into the viewport with CSS class toggling involving absolute positioning and appropriate transition effects. In addition, the icon comprising the .navbar-toggler button animates on click to produce a dynamic yet smooth transition that is both distinctive and pleasing to the eye.
    • The expanded polygon-shaped menu contains links to each of the website's six internal sections containing content (see below), as well as a seventh link entitled 'Press'.
    • Clicking on this 'Press' link triggers an additional absolutely-positioned submenu featuring external links to recent Brew Barberista media appearances. Each of these links opens in a new browser tab due to the <a> tag's target property being set to _blank.
    • The bottom 'Contact' link consists of a blue call-to-action button. In keeping with UX best practices, clicking on any of the links embedded in the .navbar-nav will cause the menu to revert to its default off-canvas location as the site navigates to the designated location. Smooth scrolling has been enabled to streamline the navigation experience through use of the scroll-behavior: smooth; CSS rule on the document's body element.
    • It's worth noting that one further section of the site, a tiled image gallery, is purely decorative, and so no anchor link was deemed necessary.
    mobile tablet desktop
click to view
<header> HTML code snippet .hero-header and .overlay CSS code snippets
mobile tablet desktop
  • Mobile & Tablet (< 992px):
    • The site's above-the-fold real estate on mobile and tablet features a clean, soothing background image of a horizon out to sea. This was chosen due to Brew Barberista's prime location just off the Howth Road in Raheny, less than a kilometre uphill from the Dublin Bay coast road.
    • On page load this landing area is brought to life using animated hero icons: one a takeaway cup of hot coffee, the other a silhouette of a man with a striking hairstyle. These icons have been enlarged and had a 'zoom-into-view' @keyframes icon-reveal animation effect applied to them in order to capture the visitor's attention and hint at the services available at Brew Barberista.
    • There is also a gold-coloured downward-pointing chevron icon used to hook the user and encourage them to explore below the fold. This functionality has been enhanced by adding a gentle @keyframes bobbing animation effect in the project's stylesheet
  • Desktop (> 991px):
    • A decision was made to change the header area's aesthetic on desktop devices. In place of the background image with animated icons are two short complementary video backgrounds: one showing a barista pouring a cup of coffee, the other featuring a closeup of a barber trimming a customer's hair.
    • Both of these video elements have had their opacity reduced to keep them from being seen to occupy the foreground (and/or overly distract the user from the site's main content).
    • There has also been an .overlay class applied to an absolutely-positioned div element that acts as a subtle filter in line with the site's prevailing colour palette
    • One more additional div with background-color set to semi-opaque blue has had a clip-path rule applied to it. This has the effect of creating a symmetrical pair of roughly triangular 'corner areas', each containing an icon and a heading, which act as navigation links to 'Brew Coffee' and 'Brew Barber', respectively.
  • click to view
    mobile tablet desktop
    • The site's first textual content appears in the area immediately below the header (referred to as the About section here for the sake of convenience). This section is in turn subdivided into two divs, Brew Coffee and Brew Barber, each accompanied by eye-catching background imagery and short, snappy summaries of the two sides of Brew Barberista's operations.
    click to view
    mobile tablet desktop
    • Each About subsection contains a 'More Info' hyperlink, which brings the user to the relevant follow-on subsection for that Brew Barberista service (Brew Coffee / Brew Barber).
    • These two More Info subsections are stacked on mobile and tablet, and lie side by side on desktop
    • Each panel contains informative blurbs highlighting a variety of USPs offered by Brew Barberista. The text is set against carefully-positioned full-width and -height background images.
    • As screen width increases and space permits, several (initially hidden) elements are revealed across tablet and desktop devices. These include supplementary paragraphs of text and call-to-action buttons.
    • The 'OUR PARTNERS' CTA button (visible on desktop only) in the Brew Coffee div directs the user to the Our Partners section of the site, while the 'BOOK NOW' button (visible on tablet and desktop) beneath the 'Get in touch' Brew Barber heading causes the page to scroll right down to the footer, where the business's contact details can be found.
    click to view
    mobile tablet desktop
    • The Customer Reviews section boasts a selection of reviews from Brew Barberista customers, shining a light on what the business has to offer.

    • Each review consists of a customer avatar, excerpt from that customer's review, customer name and the source from which the review has been taken.

    • Semantic HTML elements have been used here: each review is wrapped inside a figure element, with nested img (avatar), blockquote (review body) and figcaption (name and review source) elements.

      <figure> HTML code snippet
    • As with several other sections, the layout has been achieved using a combination of CSS positioning and flexbox on smaller screens, with CSS grid rules applied on desktop.

    • Image gallery:
    click to view
    mobile tablet desktop
    • As stated previously, the (untitled) image gallery is for decorative purposes only
    • A flexible and fluid layout has been achieved with flexbox - more specifically, through use of the flex-wrap CSS property
    • The gallery displays as a 2x2 grid on mobile, 3x2 on tablet (two extra image divs having had their display property toggled from none to block) and a single row containing four images (each with a max-height rule applied when the screen width reaches 1440px) on desktop
    click to view
    mobile tablet desktop
    • A similarly fluid approach has been taken for the site's Our Partners section, which consists of a grid of logos belonging to companies/organisations that Brew Barberista has either championed or worked alongside
    • Each logo img is also a clickable link to the relevant company's website, with all of these external links opening in a new browser tab
    • Due to device width constraints, and in order to avoid generating a cluttered feel, two of the section's twelve figure elements are hidden on mobile
    click to view
    mobile tablet desktop
    • The last main section before the footer is a full-width rendering of the business's location on Google Maps

    • This has been implemented using a straightforward script call to the Maps API just inside index.html's closing <body> tag

    • Map configuration and rendering is processed in a maps.js file located in the project's js subdirectory of the static directory

      maps.js file JS code snippet
    • A max-width value of 60rem has been set on the .map-container div across desktop devices to prevent the map from sprawling too far horizontally.

    • To create a bespoke and memorable user experience, the default Maps Marker image has been replaced by a miniature version of the dark blue and gold Brew Barberista circular logo

click to view

The site's footer element is far from an afterthought, as it contains important contact information and social media links for Brew Barberista. There are three main ways the user might arrive here:

  1. By simply scrolling manually through the entire website
  2. By clicking the blue 'CONTACT' call-to-action button located at the foot of the off-canvas .navbar-nav navigation menu
  3. By clicking the gold-coloured 'BOOK NOW' CTA button located at the foot of the second section#more-info > div on tablet and desktop

As outlined previously, the choice of a specific shade of blue as the background-color for this area was inspired by the actual coat of paint used on the facade of Brew Barberista's physical premises in D5 (cf. device mockups footer screenshots at the bottom of this README document).

  • Dynamic 'back-to-top' button (visible on page scroll):

click to view

One other important UX feature is a fixed-position dark-blue button containing an upward-pointing chevron icon that becomes available to the user as a single-click avenue back to the top of the page when they have scrolled more than 500px vertically downwards. This functionality has been put in place by listening out for a window scroll event in the project's script.js file. The #btn-back-to-top element's display property is then toggled back and forth between none and block in order to show/hide the button in the bottom right-hand corner of the viewport.

script.js file event listener JS code snippet #btn-back-to-top CSS code snippet
mobile tablet desktop

Potential future features:

click to view
  • Favicon:

    The site's current favicon has been crudely created by simply cropping a circular cutout of the main Brew Barberista brand logo. A more professional-looking image (to be designed from scratch) would therefore be preferable going forward.

  • Opening hours:

    These may vary (e.g. Brew Coffee is open seven days a week, whereas Brew Barber is closed two of those days), and will need to be confirmed in consulatation with the business owner. A couple of options for displaying these would be to place them in the footer or else maybe to make them viewable on click by toggling a modal from the site's navbar-nav menu.

  • Contact/Booking form:

    At present, the user is unable to either contact Brew Barberista or make an appointment for a haircut from within the site itself - the Contact link in the navbar-nav just directs them to the footer, which lists the company's contact details along with social media links. A more comprehensive UX would incorporate a native form for reaching out to Brew Barberista without having to open a separate tab/window. Again, a pop-up modal might be suitable for this purpose, or else the form could maybe fit alongside the .map-container div on wider screens.

  • Price list(s)/Menu:

    One way of engaging the user further would be to display prices for all of Brew Barberista's products and services. This would likely necessitate building an additional page(s), as the current landing page is probably too long to accommodate much more scrollable content.

  • 'Meet The Team' section:

    One more potential feature to add would be a brief introductory profile section for each front-of-house member of the 'Brew Crew', as they're known. It would be best to maybe bring in a professional photographer if possible to take production-ready shots of the team at work. Together with a short, vox pop-style interview with each staff member, this would add a nice personal touch to the site and help connect the business more tangibly to its customer base.

Technologies Used

Languages:

click to view
  • HTML5: used for structuring the site
  • CSS3: used for styling the site
  • JavaScript: used for site logic and web page behaviour

Frameworks/Libraries, APIs, Programmes and Tools:

click to view
  • Google Fonts: used to import the Poppins and Lora fonts into the project's stylesheets
  • Font Awesome v5.15.3: used to add appropriate and visually appealing site icons
  • Gitpod: used as the online IDE for the project
  • Git: used for version control by utilising the Gitpod terminal to commit frequently to Git and push all commits to GitHub
  • GitHub: used to compile and remotely store the project's codebase following successive local commits initiated from the command line
  • Google Maps API: used to provide a visual representation of Brew Barberista's location to site visitors
  • Adobe Illustrator: used to convert both Shutterstock vector downloads from .eps to the more manageable .svg file format
  • Ezgif image converter: used to convert several of the project image source files from .webp to png/jp(e)g formats
  • TinyJPG: used for image compression
  • PicResize: used to crop and resize images
  • Brackets (desktop app version): used to make coloration edits to SVG files
  • Kapwing: used as the project's go-to content editing resource, e.g. to shorten videos and customise Brew Barberista partner logos
  • W3Schools HTML Color Picker: used for generating on-the-fly colour pairings and modifications (lightening, darkening etc. of core project colours)
  • WebAIM (contrast checker): / WAVE Web Accessibility Evaluation Tool used to ensure site foreground and background colour contrasts meet WCAG 2 accessibility requirements
  • Can I Use: browser compatibility tables used to cross-reference the viability of implementing certain HTML5 elements, CSS3 properties, file formats and more
  • Editor.md: used to format project Markdown in line with best practices
  • Ray.so: used to create the code block images featured throughout this Markdown file

Testing

Validation:

click to view
  • W3C's Markup Validation Service was used to test the validity of all HTML used in this project. The code was validated by direct input, and all suggested corrections were then made. As a result, all of the site's HTML source code now passes W3C validation with just a single warning message being returned, as is reflected in the following screenshot:

  • Likewise, the website's custom CSS stylesheet was checked for errors using W3C's CSS Validation Service. Once again, validation by direct input was the preferred method selected, and all necessary changes were subsequently carried out. Consequently, the stylesheet now passes W3C validation with just a couple of warning/error messages concerning use of the backdrop-filter property being returned, as the following screenshot indicates:

  • The issue surrounding the incompatibility of backdrop-filter with the W3C validator appears to be a well documented one. However, given that this property is present in the MDN Docs and endorsed by CSS-Tricks, it has been used in this project in spite of the validator's error messages. Its patchy browser support necessitated the use of a @supports query on line 698 of the project's stylesheet (with a reasonable fallback option of an opaque background), as suggested in this CSS-Tricks article

  • In a similar manner, both of the site's custom JavaScript files were validated against JSHint's error-detection tool, which is available both as an online linter and a Gitpod/VS Code extension for real-time JS problem-solving. After heeding various warning and error messages, at the time of deployment each of these .js documents passed JSHint validation with no problems detected.

Responsiveness:

click to view

Brew Barberista responsive above-the-fold device mockups viewed in the Responsively App browser

  • All testing was performed manually, and on a near-constant basis as the project evolved. Google Chrome DevTools served as an indispensable resource throughout this testing process, allowing incremental adjustments to be made to the site's infrastructure and layout. Firefox Developer Tools was preferred when building out the grid layout on desktop, as this offers a broader suite of grid functionality than Chrome. The site's responsiveness was also closely monitored and rigorously tested from start to finish using the developer-oriented Responsively App browser.
Devices
Samsung Galaxy S5
Huawei P20
Moto G4
Kindle Fire HD
MacBook Pro
Acer ΛSPIRE
Android Smart TV
Browsers

Bugs:

click to view
  • CSS scroll-behavior remains unsupported in the Safari browser. As ever, CSS-Tricks is on hand to offer suggested workarounds, although the most practical and reliable of these does depend on jQuery (which this project has chosen not to use). Other potential fixes for this diminished UX in Safari will be reviewed at a later date.

  • There were several bugs identified during testing of the above-the-fold background video elements on desktop:

    • The video functionality was initially freezing at run time when the site was viewed in Firefox - following thorough debugging, it was concluded that the likely cause of this bug was the use of the HTMLMediaElement.playbackRate property to increase video playing speed from within the project's script.js file. To get around the issue, it was decided to only accelerate video playback speed in browsers other than Firefox - appropriate conditional logic has been put in place on line 95 of the aforementioned JavaScript file to achieve this.
    • Video playback appears to be absent from the Odin browser (Android APK). The reasons for this are unclear, and since it's not really possible to inspect elements (i.e. use DevTools of any sort) on a smart TV, it was decided that pursuing this problem any further than documenting it here lies beyond the scope of this project.
    • A strange bug was observed when the video functionality was first put in place. The brightnesss/contrast/saturation of the barista video (in particular) was noticeably more glaring/'whitened' in several browsers when it looped for a second/third/fourth (etc.) time. This was fixed by hard-coding a reset of the seemingly affected properties between lines 100 and 115 in the project's script.js file. At the time of writing, the exact cause of this bug remains unclear. However, both videos now play successfully on an alternating loop in all browsers tested (except Odin, as noted above).

Deployment

click to view

GitHub Pages:

This project has been deployed to GitHub Pages. The deployment process carried out was as follows...

  1. Sign in to GitHub and locate the relevant repository. If you do not have a GitHub account, you may create one here.
  2. At the top of the project repository page, select Settings.
  3. On the Settings page, scroll down the menu flanking the left-hand side of the screen and select Pages near the bottom of the list of options.

This will open GitHub Pages....

  1. Under Source, click the dropdown displaying Branch: None and select the master branch. Click Save.
  2. The page will then automatically refresh and inform you that the site is now ready to be published, as well as indicating the https:// address to be used.
  3. For reference purposes, a link to this newly-published site can be found in the Pages section of Settings (described above).

Forking the GitHub Repository:

It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...

  1. Sign in to your GitHub account and locate the relevant repository.
  2. Click on Fork, located near the top right-hand corner of the repository page.
  3. You will now have a copy of this project's repository in your own GitHub account.

Making a local clone:

It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...

  1. Sign in to your GitHub account and locate the relevant repository.
  2. Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
  3. In order to clone the repository using HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL).
  4. Next, open Git Bash (see here for an overview of download options, if required).
  5. Change the current working directory on your local machine to the location where you want the cloning to be made.
  6. Type git clone into your IDE terminal followed by the URL you copied in Step 3 above, i.e.
https://github.com/loosenthedark/brew-barberista-landing-page.git
  1. Press Enter.
  2. Your local clone has now been created.

See the GitHub Docs for more information on all of the above processes.

Credits

Code:

Where code blocks/snippets/suggestions have been incorporated from external sources into this project's code, these have been noted through the use of comments. Beyond this, the developer made use of the following articles, workarounds and learning resources while building the site:

click to view

Content:

click to view

Media:

click to view
[Website section] Media title/description Media format Credit Link to original media source(s)
head
Brew Barberista circular brand logo image Brew Barberista Brew Barberista website header
Brew Barberista owner press pic photo Frank McGrath Independent.ie
nav
Brew Barberista main brand logo image Brew Barberista Brew Barberista website header
gold hamburger icon icon Font Awesome Font Awesome
gold coffee mug icon icon Font Awesome Font Awesome
header
'Calm Sea Under Blue Sky' photo cottonbro Pexels
'Fashion silhouette hipster style' vector illustration RomanYa Shutterstock
'Paper mug with hot drink inside' vector illustration Agnieszka Karpinska Shutterstock
'A Barista Making A Coffee Artistically' video Ketut Subiyanto Pexels
'A Man Shaving A Man's Facial Hair' video Pavel Danilyuk Pexels
main
'Cold Brew' photo Andrew "Donovan" Valdivia Unsplash
'Anonymous barista pouring milk from jug into paper cup' photo Ketut Subiyanto Pexels
barber's kit against orange background photo Sinval Carvalho Unsplash
'Baked Pastries' photo Magda Ehlers Pexels
'Brown Coffee Beans on Gray Textile' photo Liana Horodetska Pexels
'Man in White and Black Stripe Shirt Holding Black Pen' photo cottonbro Pexels
'White Ceramic Mug With Brown Liquid' photo Gareth Rees Pexels
'Straight Razor Kit' photo Josh Sorenson Pexels
'Set of disposable paper coffee cups' photo Ketut Subiyanto Pexels
customer avatars photos UI Faces / Random User Generator #1 / #2 / #3
Lovin Dublin avatar image Lovin Dublin Lovin Dublin Twitter profile
Brew Barber customer black & white image photo Brew Barberista Facebook page Facebook
3fe logo logo 3fe 3fe website
Victoria Arduino logo logo Victoria Arduino Jimmy's Espresso Services
Tartine Organic Bakery logo logo Tartine Veganic
Pieman logo logo Pieman Pieman website
Nic Gemma Cupcakes logo logo Nic Gemma Cupcakes Nic Gemma Instagram page
The Raw Juice Company logo logo The Raw Juice Company The Raw Juice Company website & Facebook page
Korina Bakery logo logo Korina Bakery Korina Bakery Facebook page
Tonja Maguire Art logo logo Tonja Maguire Art Tonja Maguire Art Facebook page
Conscious Cup Campaign logo logo Conscious Cup Campaign Conscious Cup Campaign website
Pieta Darkness Into Light logo logo Pieta Darkness Into Light 2021 website
St. Francis Hospice logo logo Saint Francis Hospice Laimoon
Raheny Business Association logo logo Raheny Business Association Raheny Business Association website
footer
'Gmail New 2020 Vector' vector icon IconApe IconApe
'Dog Friendly sign' image SVGCraftLounge Etsy

Acknowledgments:

  • I've been fortunate enough to be paired with an incredibly helpful and approachable mentor in Tim Nelson. He has been on hand throughout this project's evolution to offer pointers, timely feedback and guidance. Cheers, Tim!
  • My better half Ana deserves a medal, not just a mention, for all her constant support and encouragement. She also conducted plenty of ad hoc testing on a range of devices, and it was she who suggested I speed up the background barista video above the fold on desktop 😁

Brew Barberista responsive footer device mockups

Notice

This site has been created for development purposes only.